使い始めたEspressoに慣れ親しもうと、WebKitで実現できるCSS3の練習をしました。WebKit Nightlyの最新ビルド(r42162)で表示テストを行っています。グラデーションを行う -webkit-gradient() プロパティはSafari4ベータから採用されたものなので、Safari4以外のブラウザでは表示できないと思います。なので、画像を掲載しておきます。
詳しくは、サンプルページをご覧ください。
今回使用した、目新しいスタイルプロパティ。
– -webkit-gradient()
– -webkit-border-radius
– -webkit-box-shadow
– -webkit-box-reflect
– text-shadow
グラデーションを表現する -webkit-gradient() プロパティの基本形式。
-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), to(終了色));
途中で色を追加したい場合は color-stop(追加位置, 色) を指定することによってできます。この指定を複数追加することによって色鮮やかな(?)グラデーションも実現できます。
画像を角丸にしている -webkit-border-radius プロパティの基本形式。
-webkit-boder-radius: 半径(px指定);
画像を編集することなく角丸にできるのは便利。また、画像の周辺をぼかす -webkit-mask-box-image プロパティも併用すると便利かも。今回は -webkit-box-reflect プロパティを併用して反射させてみました。
ボックスに陰を付けて立体感を表現する -webkit-box-shadow プロパティの基本形式。
box-shadow: [横方向のオフセット] [縦方向のオフセット] [ぼかしの半径] [影の色];
まだまだ、紹介しきれないプロパティがあるけど、今回紹介したプロパティだけでもかなり表現の幅が広がりますよね。