CSS入門 | CSS3モジュール | CSS3影効果

Tags:

CSS3影効果

CSS3では、テキストやHTML要素に簡単に影効果を適用できる。

CSS3で使用できるshadowプロパティは次のとおりである。

  1. text-shadow
  2. box-shadow

CSS3影(shadow)効果の対応バージョン

CSS3影(shadow)効果に対応している主要Webブラウザーのバージョンは次のとおりである。また、ブラウザー別にベンダープレフィックス(vendor prefix)を使ってこの機能に最初に対応したバージョンも併記している。

プロパティ ie chrome firefox safari opera
text-shadow 10.0 4.0 3.5 4.0 9.5
box-shadow 9.0 10.0 / 4.0 -webkit- 4.0 / 3.5 -moz- 5.1 / 3.1 -webkit- 10.5

text-shadowプロパティ

text-shadowプロパティは、そのテキストに簡単に影効果を適用する。

text-shadowプロパティの構文は次のとおりである。

構文

text-shadow: 影のx軸値 影のy軸値 blur値 色値;

影が始まるx軸とy軸の相対位置を指定し、影のぼかし具合を表すblur値を指定する。

次の例は、CSS3でテキストに適用できるさまざまな影効果を示す例である。

<style>
    #shadow_01 { text-shadow: 2px 2px; }
    #shadow_02 { text-shadow: 2px 2px orange; }
    #shadow_03 { text-shadow: 2px 2px 5px; }
    #shadow_04 { text-shadow: 0 0 3px red; }
    #shadow_05 { text-shadow: 1px 1px 2px black, 0 0 20px purple, 0 0 5px maroon; }
</style>

box-shadowプロパティ

box-shadowプロパティは、そのHTML要素に簡単に影効果を適用する。

box-shadowプロパティの構文は、text-shadowプロパティを使用する構文と同じである。

構文

box-shadow: 影のx軸値 影のy軸値 blur値 色値;

影が始まるx軸とy軸の相対位置を指定し、影のぼかし具合を表すblur値を指定する。

次の例は、CSS3でHTML要素に適用できるさまざまな影効果を示す例である。

<style>
    #shadow_01 { box-shadow: 5px 5px; }
    #shadow_02 { box-shadow: 5px 5px orange; }
    #shadow_03 { box-shadow: 5px 5px 10px; }
    #shadow_04 { box-shadow: 0 0 15px red; }
    #shadow_05 { box-shadow: 5px 5px 10px black, 0 0 15px purple, 0 0 30px maroon; }
</style>