Nutspress

ベーシックなCSS3を取り入れてみよう！

CSS3の基本中の基本、RGBA による色と透過率の指定、Text Shadow による文字の影、Border Radius による角丸、Box Shadow によるボックスプロパティに対する影、以上の4点を Web Designer Wall で詳しく説明してくれています。CSS3を取り入れることで、画像を使わずにデザイン的要素を取り入れることが可能となります。

ただし、IEは対応していないので、IEに対しても同じ見せ方をする場合、画像やJavascriptを使ったハックが必要となります。

RGBA

background: rgba(255, 255, 255, 0.2);
始めの3桁の数字が色を表します。左からR：赤、G：緑、B：青、A：透過率となります。0が透明、1=100%透過なしとして透過の割合を設定していきます。使える要素はフォントカラー、背景色、ボーダー色、シャドウなどなど、適応範囲が広いプロパティです。

Text Shadow

text-shadow:0 1px 0 #bbb, 0 -1px 0 #444;
文字通り、テキスト（フォント）に対して影をつけるためのプロパティ。デザイン的に多く取り入れられていることも多く、@fontface と組み合わせると画像として用意する必要がなくなるので、これは積極的に使って生きたいプロパティです。影をつけて文字を浮き立たせてみたり、プレス風にしてみたりと変幻自在。

プレス風にする場合は、sans-serif 系である程度の大きさがないと文字がつぶれて読みにくくなってしまうので、乱用はしないほうがいいかもしれません。

Box Shadow

box-shadow: 0 3px 6px rgba(0,0,0,.25);
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
影の部分に透過を使うので、色の指定はRGBAでおこないます。左から、X軸、Y軸、ぼかし率、色（RGBA）となります。スタイルシートでの指定だと、デザイン変更のときに作業が少なくてすみます。

Border Radius

border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
角丸を作るプロパティ。ボックスに対して指定するだけ。4つの角それぞれに丸みの大きさを指定することも可能。私の場合、デザイン的にIEでも同じように見せておきたい部分があるのでjQueryを併用しています。

角丸のスタイルシートを生成するのに便利なジェネレーターがあります。
CSS Border Radius

四隅にそれぞれ数字を入れるだけで、画面の中央にスタイルシートのコードが生成されます。
※webkit browsers、Firefox に対応するためのコードも自動で生成されるので、そのままコピーして使えます。

基本的なこととして取り上げられている内容ですが、これだけでも十分に出来ることの幅が広がりますよね。

参考：Web Designer Wall
The Basics of CSS3
CSS3 Examples and Best Practices
CSS3 Dropdown Menu

Tags: CSS3, ウェブデザイン, スタイルシート, ベーシック

This entry was posted on Friday, March 5th, 2010 at 2:57 pm and is filed under ウェブデザイン関連. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.