CSS3から新たに利用できる機能を、いくつか試してみます。
ボックスの角丸やシャドウを追加できたり、かなり実用的な機能が使えるようになります。Firefox、Safariなどのモダンブラウザでは、すでにいくつかの機能は実装されていますが、残念ながらIEでは次のバージョン以降での対応になりそうです。
ボックスのコーナーを丸くする
ボックスの角丸では、Firefoxを代表とするmozillaと、Safari、Chromeを代表とするweb-kitを別々に記述する必要があります。
Box Round
1
2
3
4
5
6
7
8
9
| .box-round {
width: 300px;
height: 200px;
text-align: center;
color: #ffffff;
background: #999999;
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* safari, Chrome */
} |
ボックスにシャドウを付ける
ボックスのシャドウも角丸と同じく、mozillaと、web-kitを別々に記述します。
Box Shadow
1
2
3
4
5
6
7
8
9
10
| .box-shadow {
width: 300px;
height: 200px;
text-align: center;
color: #cccccc;
border: 1px solid #e6e6e6;
background: #ffffff;
-moz-box-shadow: #e6e6e6 0px 3px 5px; /* Firefox */
-webkit-box-shadow: #e6e6e6 0px 3px 5px; /* safari, Chrome */
} |
テキストにシャドウを付ける
X軸、Y軸の距離と、ぼかしの幅、カラーを指定できます。
Text Shadow
1
2
3
| .text-shadow {
text-shadow: #cccccc 3px 3px 5px;
} |
テキストを光らせる
テキストのシャドウを応用して、光らせるような効果もできます。シャドウを多重にすることで、より濃いグローになります。
Text Glow
1
2
3
4
| .text-glow {
color: #ffffff;
text-shadow: #ac4343 0px 0px 5px, #ac4343 0px 0px 5px;
} |
ボックスを透過させる
要素に対して透明度を0〜1の間で指定できます。
1
2
3
4
5
6
7
8
| .opacity {
width: 150px;
height: 200px;
text-align: center;
color: #666666;
background: #ffffff;
opacity:0.5;
} |
コメントはまだありません。
この投稿へのコメントの RSS フィード。
TrackBack URL
|