[CSS]borderプロパティを使用した華麗なる四つのエフェクト
Post on:2010年6月25日
sponsors
実用的で簡単なスタイルシートで実装できる、borderプロパティを使用した華麗なる四つのエフェクトを紹介します。
Have Fun w/ Borders – Beveled, Pressed, & More!
デモページ
以下、デモのキャプチャは200%に拡大表示したものです。
Light Shadow
シンプルな明るいシャドウのエフェクトです。borderにライトグレーを使用しています。
CSS
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="css" cols="60" rows="5"> .shadow { padding: 20px; border: 1px solid #f0f0f0; border-bottom: 2px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } </textarea> |
Pressed
手紙などにあるプレスしたエフェクトです。プレスのエフェクトはborderの色で実現しており、角丸が更に美しくみせています。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<textarea name="code" class="css" cols="60" rows="5"> .pressed { color: #fff; padding: 20px; background: #111; border: 1px solid #000; border-right: 1px solid #353535; border-bottom: 1px solid #353535; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } </textarea> |
Beveled
double borderのテクニックに非常に類似していますが、ここではoutlineを使用することで繊細なベベルのエフェクトを実現しています。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<textarea name="code" class="css" cols="60" rows="5"> img.light { outline: 1px solid #ddd; border-top: 1px solid #fff; padding: 10px; background: #f0f0f0; } img.dark { outline: 1px solid #111; border-top: 1px solid #555; padding: 10px; background: #333; } </textarea> |
Indented Lines
リストを区切る際に有用なエフェクトです。li要素のtopとbottomにそれぞれ異なるカラーを指定して一本のラインにしています。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<textarea name="code" class="css" cols="60" rows="5"> #indented ul{ margin: 20px 0; padding: 0; list-style: none; } #indented ul li { border-top: 1px solid #333; border-bottom: 1px solid #111; } #indented ul li:first-child {border-top: none;} #indented ul li:last-child {border-bottom: none;} #indented ul li a { padding: 10px; display: block; color: #fff; text-decoration: none; } #indented ul li a:hover {background: #111;} </textarea> |
sponsors
