- 2008年12月19日 11:57
- Dreamweaver
CSS3ネタ第2弾です。
今回は、影について見てみましょう。
今まで、画像を用いて、影をつけてきた部分が、CSSで再現可能となり、
格段にページデザインの幅が広がってくる気がします。
まず、文字に影をつける場合は、「text-shadow」プロパティを使用します。
対応ブラウザは、今までは、Safariが対応しているだけだったが、firefox3、Opera9.5が対応しています。
「text-shadow」プロパティは、CSS2.1で一度なくなっていたが、CSS3の草案ではで再度復活しています。
次に「box-shadow」プロパティを使用します。
「box-shadow」プロパティは、その名のとうり、ボックスに対する影の設定です。
CSS 3の草案で提案されており、現在再現できるのは、
Safari3で、「-webkit-box-shadow」というプロパティ名で利用することができます。
