画像無しでリッチな表現(3/4) – css3を触ってみて思った4個の利点
背景色指定（背景のみ透過も可）「background-color:rgba();」
opacityというプロパティがありましたが、それは中に記述されているテキストまでも透過にしてしまっていましたが、このrgba指定は、背景色のみを透過させることができます。
色の指定はRGBカラーモデルでの指定になります。
サンプルはこちら/*左から順に「RGBの赤指定」、「RGBの緑指定」、「RGBの青指定」、「透過率（0~1）」*/
background-color:rgba(0,0,0,0.5);
グラデーション「background-image:gradient(～);」
このグラデーションはWebkitと一部のMozilla（Firefox3.6↑）で使用することが可能です。
書き方が少し異なる上に、対応ブラウザも少ないですが、かなり見た目をリッチにすることができます。
サンプルはこちらbackground-image:-webkit-gradient(
/*グラデーションの方向指定*/
linear,
left top,
left bottom,
/*開始色*/
from(#1a62db),
/*途中指定色*/
color-stop(0.5,#3690f0),
color-stop(0.5,#55a4ee),
/*終了色*/
to(#70b6f2)
);
background-image:-moz-linear-gradient(
/*グラデーションの方向指定*/
top,
/*開始色*/
#1a62db,
/*途中指定色*/
#3690f0 50%,
#55a4ee 50%,
/*終了色*/
#70b6f2
);
Webフォント「@font-face」
このWebフォント指定は一部のWebkit（Safari4↑は確認済）とMozilla（3.5↑は確認済）で使用することが可能です。
クライアント側にフォントがなくても、サーバー側でフォントを設定してあげることで、そのフォントを表示させるプロパティになります。
※使用するにあたって、フォントのライセンスには十分お気をつけください。
サンプルはこちら@font-face{
/*このフォントの名前を設定する*/
font-family:fontName;
/*fontを置いてあるURLを指定*/
src:url("http://kzms2.com/wp-content/themes/kzms2_darkBlue/font/font.ttf");
}
h1{
/*設定したfont名を指定する*/
font-family:fontName;
}
まとめ
- css2だと画像が必要な場面でも、css3を使うとcssのみで対応出来る
- WebkitとMozillaがビジュアルに関してのcss3の対応が進んでいる
- Operaと
特にIEはまだ対応が進んでいない状態
このようにcss3なら、画像を使用せずともかなりリッチな表現ができることがわかったかと思います。
その他にも鏡面反射などがあるのですが、それはWebkit系しかまだ対応していないこと、それだけでもかなり深い説明が必要な事を踏まえて、またそれは別途説明をしたいと思います。
