[ CSS ] box-shadowプロパティデザインサンプル7選

本記事では、CSSプロパティの一つであるbox-shadowでHTML要素に影をつけたい場合に..どのように設定をすればいいかをサンプルコード(コピペ使用可能)を用いて、ご紹介させて頂いております。

✅ box-shadowプロパティとは何かが分かる
✅ box-shadowプロパティの使い方が分かる

box-shadowプロパティとは??

基本は、外側に影をつけることがほとんどであると思いますので、上記の内容で問題ないかと思いますが、insetキーワードの指定をすると、内側へ影をつけることも可能です。

box-shadowプロパティの基礎

基礎的な使い方をみてみましょう。
以下、サンプルコード及び実行例になります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>box-shadow_sample</title>
    </head>
    <body>
        <div class="box"></div>
    </body>
        <style>
            .box {
                width:30%;
                height: 200px;
                background-color: rgb(159, 204, 244);
                /*  5px:水平方向の長さ 5px:垂直方向の長さ 2px:ぼかし具合 3px:影の広さ  */
                box-shadow: 5px 5px 2px 3px rgba(32, 29, 99, 0.6);
            }
        </style>
</html>

[ 実行結果 ]

デザインサンプル:7選

box-shadowプロパティの基礎的な使い方がわかったところで、今回の本題でもありますデザインサンプル7選をご紹介せさせて頂きます！HTMLコードは、「 box-shadowプロパティの基礎 」にて使用しましたものを使用していきますので、CSSの部分のみ書き換えるようにしてください。

box-shadow: rgba(16, 1, 75, 0.325) 2px 2px 5px, rgba(16, 1, 75, 0.24) 2px 2px 2px;

[ 実行結果 ]

box-shadow: rgb(16, 1, 75) 0px 20px 30px -10px;

[ 実行結果 ]

box-shadow: rgba(16, 1, 75, 0.4) 0px 0.225em 0.225em, rgba(16, 1, 75, 0.25) 0px 0.125em 0.5em;

[ 実行結果 ]

box-shadow: rgba(46, 46, 240, 0.4) 4px 4px, rgba(46, 46, 240, 0.3) 8px 8px, rgba(46, 46, 240, 0.2) 12px 12px, rgba(46, 46, 240, 0.1) 16px 16px;

[ 実行結果 ]

box-shadow: rgb(103, 154, 198) 3px 3px 6px 0px inset, rgba(103, 154, 198, 0.5) -3px -3px 6px 1px inset;

[ 実行結果 ]

box-shadow: rgba(59, 59, 101, 0.25) 0px 40px 50px -20px inset, rgba(18, 5, 79, 0.35) 0px 30px 40px -25px inset;

[ 実行結果 ]

box-shadow: rgba(59, 59, 101, 0.17) 0px -23px 25px 0px inset, rgba(59, 59, 101, 0.15) 0px -36px 30px 0px inset, rgba(59, 59, 101, 0.1) 0px -79px 40px 0px inset, rgba(59, 59, 101, 0.06) 0px 2px 1px, rgba(59, 59, 101, 0.09) 0px 4px 2px, rgba(59, 59, 101, 0.09) 0px 8px 4px, rgba(59, 59, 101, 0.09) 0px 16px 8px, rgba(59, 59, 101, 0.09) 0px 32px 16px;