おち研 技術部
HTMLやCSSなどのサンプルソース倉庫です
2016/5/25
CSS3のlinear-gradient(線形グラデーション)を用いて、画像を使わずボックス要素内に罫線を引きます。
2016/5/19
外部サイトへのリンクに印を付けます。fontawesomeのアイコンフォントを使っているので、基本コードはコピペで実装可能です。
2016/5/17
YouTubeやinstagramやGoogleマップなどの埋め込みコンテンツを、スマートフォンの横幅に収めたい時の対処です。
2016/5/1
ヘルプバルーンなどに使うフキダシ型のツールチップをJavaScriptを使わずCSSだけで作ります。
2016/4/29
CSS3のblurフィルタを使ったときにはみ出るぼかしを原寸で切り取る方法です。
2016/4/27
画像にモザイクをかけたようなぼかし効果をCSSだけで実装するサンプルソースです。
2016/4/26
blockquoteタグを使った外部テキストの引用をCSSだけで装飾するサンプルソース5種です。
2015/1/31
タイプライターやドラクエ風に1文字ずつテキスト送りするCSSです。JavaScriptを使うタイプに比べて簡素ですけどワンポイントには効果的かも。
2014/5/21
Twitterの埋め込みコードが既存のCSSとバッティングすると描画の書き換えが余分に発生することがあります。ガタガタして読みにくいのでCSSセレクタで回避しましょう。
2014/5/13
HTTPリクエストの負荷が地味にかかる小さな画像を、CSSスプライトで高速化させる方法です。
2014/3/17
横スクロールや強制改行のキーとなる、white-space属性の各プロパティについて改めて調べてみました。
2013/12/18
画面ロード時は何も表示されず、空白をマウスオーバー(hover)したり、タップしたときだけ表示されるCSSエフェクトです。逆にするとボス来たボタンが作れます。
2013/8/28
CSSの上下パーセントは、親要素の幅をもとに決められます。縦を基準に考えると計算が合わなくなるので注意しなければなりません。
おち研技術部ではWeb関連技術やサイト運営に関する情報をお知らせしています。お探しの記事がありましたら下の検索窓からどうぞ。姉妹サイトいろいろやってます。
プライバシーポリシー