[CSS]一つの要素に背景やボーダーをマルチプルに配置する実用的なテクニック
CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します。 Multiple Backgrounds and Borders with CSS 2.1 CSS3のサポートは必要なく、対応ブラウザはCSS2.1の擬似要素をサポートするIE8+, Fx3.5+, Safari 4+, Chrome 4+, Opera 10+となっています。 実装の仕組みは上記の画像のように、擬似要素の「:before」と「:after」を利用したもので、複数の背景やボーダーを配置することで面白い効果が得られます。 下記にその実用的で面白い効果をもったデモを紹介します。 マルチプル バックグランド デモ：Multiple Backgrounds with CSS 2.1 CSSファイル：backgrounds.css
CSSによるサイトのバックグラウンド作成テクニック集:phpspot開発日誌
Basic Web Page Background Techniques with CSS CSSによるサイトのバックグラウンド作成テクニック集が紹介されています。 テクニックといってもCSSが少しわかれば実現できるテクニック集ですが、パターンとして認知しておくことは重要かもしれません。 パターンだけでなく、CSSコードも紹介されているので、入門という方にも安心して参考に出来ます。 単色パターン 背景画像をリピートで使う例 グラデーションを使う例( repeat-x 使用) 大きめの背景画像を固定で使う例( background-position, no-repeat 使用) あとはスクロールしてもバックグラウンドがついてくるパターンなんていうのもありますね。 重いという理由で実装されると嫌われる傾向にあるかもしれませんが。 関連エントリ デザイナーが知っておくべき背景画像のリソースサイト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
