CSSでの影の表現方法【現役エンジニアが解説】
今回は、CSSでの影の表現方法について、3種類に分け、簡単に解説していきます。
box-shadow
box-shadowプロパティで影を表現できます。
引数は、オフセットx方向とオフセットy方向、ぼかし半径、拡張半径、色です。
.hoge{ box-shadow:10px 10px 10px 0 rgba(0, 0, 0); }
上記のコードでは、オフセットxとy方向10ピクセル、ぼかし半径10ピクセルの影を表示しています。
drop-shadow
Internet Explorer非対応ですが、filterプロパティでも影を作れます。
値はdrop-shadowとし、その引数は、オフセットx方向とオフセットy方向、ぼかし半径、色です。
.hoge{ filter:drop-shadow(10px 10px 10px rgb(0, 0, 0)); }
上記のコードでは、オフセットxとy方向ともに10ピクセル、ぼかし半径10ピクセルの影を表示しています。
擬似要素とfilter、transform
Internet Explorer非対応ではあるものの、擬似要素でも影をつけられます。
擬似要素内で、値がblurのfilterプロパティでぼかし半径、transformでオフセットxy方向を指定します。
.hoge:before{ content:''; display:block; position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; background-color:rgb(0, 0, 0); filter:blur(10px); transform:translate(10px, 10px); }
上記のコードでは、オフセットx及びy方向10ピクセル、ぼかし半径10ピクセルの影を擬似要素で表示しています。