2021/02/05

CSSでの影の表現方法【現役エンジニアが解説】

PROGRAM

今回は、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ピクセルの影を擬似要素で表示しています。

• facebook
• Tweet
• Read Later