画像無しでリッチな表現(3/4) – css3を触ってみて思った4個の利点
角丸「border-radius」
css3で画像無しの表現といったらまずはこれではないでしょうか。
css2までだと画像無しでの実装が困難だった角丸がすぐに対応出来てしまいます。
サンプルはこちらborder:1px solid #000;
/*左上、右上、右下、左下、全ての角を10px分丸くする*/
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
一部分だけ角丸にしたい場合
/*左上、右上の角を10px分丸くして、右下、左下の角は丸めない*/
border-radius:10px 10px 0 0;
とショートハンドの書き方をすることによって、任意の場所だけを角丸にすることが出来ます。
※ただし、「-webkit-border-radius:10px 10px 0 0;」だと現在Safari4だと角が四角くなってしまうので以下の様に、ショートハンドを用いない書き方をしてあげる必要があります。
/*webkitの場合はSafariのためにこう書くべき*/
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
上記のように書くことでSafariでも指定した部分だけ角丸にしてあげることができます。
ボックスシャドウ「box-shadow」
ボックスレベル要素に対して、外側の箱に影をつけるCSSのプロパティになります。
IEでも実装可能ですが、書き方がかなり特殊なので注意が必要です。
サンプルはこちら/*左から順にx方向のずれ、y方向のずれ、ぼかしの値、影色*/
box-shadow:2px 2px 5px #333;
-moz-box-shadow:2px 2px 5px #333;
-webkit-box-shadow:2px 2px 5px #333;
/*Strength=影の強さ、Direction=影の角度、Color=影色*/
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#333333');
テキストシャドウ「text-shadow」
インライン要素に対して、その中のテキストに影をつけるCSSのプロパティになります。
IEでも実装可能ですが、書き方がかなり特殊なので注意が必要です。
※今回紹介する中で、Operaは「text-shadow」対応しています。
サンプルはこちら/*左から順にx方向のずれ、y方向のずれ、ぼかしの値、影色*/
text-shadow:2px 2px 5px #000;
/*Strength=影の強さ、Direction=影の角度、Color=影色*/
filter:progid:DXImageTransform.Microsoft.Glow(Strength=3,Direction=135,Color='#000000');
/* IEのhaslayoutをtrueに */
zoom:1;
