HTML5 マークアップとはどのようなものか? また、新しい要素をどのようにマークアップすればいいのか? を実践的に習得したいため、ウェブログでエントリーした CSS3 に関してまとめてみました。なお、WebKit 独自拡張プロパティを使用しているので WebKit レンダリングエンジンを利用するウェブブラウザが最適となります。

まだ、右も左もわからないので間違い等がありましたら遠慮なく突っ込んでください。

多彩な表現ができるスタイルプロパティ

まずは、作例を見ていただきましょう。

注意: 画像をクリックすると作例サイトへ移動します。なお、 WebKit 独自拡張プロパティを使用しておりますので WebKit レンダリングエンジンを利用するウェブブラウザでしか正常な表示はできません。

グラデーション

背景がグラデーションしているのは、画像を使っている訳ではなく -webkit-gradient() 属性を使って表現しています。線形では[縦/横/斜め]と表現できるほか、円形でも表現できるので自由度がありますね。

-webkit-gradient の基本形式

-webkit-gradient(
  linear, 
  開始位置, 
  終了位置, 
  from(開始色), 
  to(終了色), 
  color-stop(追加位置, 色));

グラデーションができる方法はわかった。だけど、決める値が多くてイメージできない。こんな人に便利なウェブサービス「tools & resources for web professionals」があります。Linear Gradients の他に、Radial Gradients, Text Shadow, Box Shadow, Text Stroke が用意されています。これで思い通りの値を素早く取得することができます。

リフレクション (反射)

よく見かける、画像が反射して見えるテクニックです。これまでだと、画像編集ソフトで加工してから配置していましたが、これから簡単なリフレクションはスタイルシートで指定するだけで可能になります。

-webkit-box-reflect の基本形式

-webkit-box-reflect:below 1px 
-webkit-gradient(
  linear, 
  left top, 
  left bottom, 
  from(transparent), 
  color-stop(0.5, transparent), 
  to(white));

-webkit-box-reflect プロパティで指定できる反転方向は、上(above)、下(below)、左(left)、右(right)、の4方向です。これに前セクションで説明した -webkit-gradient 属性を合わせるとマスクのかかった効果を表現できます。

ボックス・シャドウ

Photoshop でいうドロップシャドウのような効果です。ブロック要素の外側にぼかしを加える視覚効果です。-webkit-box-shadow プロパティを使用します。

-webkit-box-shadow の基本形式

box-shadow: 
  [横方向のオフセット] [縦方向のオフセット] [ぼかしの半径] [影の色];

オフセット値とは、シャドウを移動させる距離のことです。ブロック要素の周りにぼかしを入れたい時はオフセット値は「0」となります。