【コーディング備忘録】box-shadow 影の種類を備忘録

2022年7月22日2022年7月23日

こんにちはrey( @reydesign8376) です

ブロック要素に影をつけるbox-shadowの影デザインをしたためていきます〜

ではサクサクっとやっていきます〜

コーディング解説

box-shadowの書き方はこんな感じ

.container1 {
    box-shadow: 20px 20px 10px 20px #999;
}

左の値から、左右の影の出かたを設定、上下の影の出かたを設定、ぼかし具合、影の大きさ、影の色になります。

左に影を出したい時は -20px、上に影を出すときは-20px
デザインによって必要な値だけ記入すればOKです。

影のデザインの種類

影にぼかし無し

.container1 {
    /* 影にぼかしがない */
    box-shadow: 10px 10px #999;

    /* 箱のデザイン */
    width: 300px;
    height: 280px;
    background-color: aliceblue;
}

影にぼかし有り

.container1 {
    /* 影にぼかし有り */
    box-shadow: 5px 5px 10px #999;

    /* 箱のデザイン */
    width: 300px;
    height: 280px;
    background-color: aliceblue;
}

左右上下0のぼかし

.container1 {
    /* 左右上下0のぼかし */
    box-shadow: 0px 0px 20px 20px #999;

    /* 箱のデザイン */
    width: 300px;
    height: 280px;
    background-color: #fff;
}

こんな使い方も

.container1 {
    /* こんな使い方もできちゃう */
    box-shadow: 90px 80px 0px 30px rgb(160, 195, 206);

    /* 箱のデザイン */
    width: 300px;
    height: 280px;
    background-color: rgb(244, 230, 218);
}

ボタンデザインにも使いやすいので是非お試しくださいませ〜