「box-shadow」を利用した「リングシャドウ」の作り方

2024年2月16日

要素に「影」を追加できる「CSSのプロパティ」が「box-shadow」ですが、今回は「box-shadow」を利用して「リングシャドウ」を表現する方法についてご説明をしていきたいと思います。

シンプルな「リングシャドウ」

背景が黒に「白いシャドウ」を表現したシンプルな「リングシャドウ」を作成していきたいと思います。

まず「HTML要素」を作っていきます。

<body>
    <div id="circle"></div>
</body>

「div要素」の「id属性」に「circle」を付加しています。

body {
     height: 100vw;
     background-color: #000;
     position: relative;
}

#circle {
    width: 200px;
    height: 200px;
    border: solid 1px #333;
    border-radius: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 5px 5px 10px #fff;
}

のように設定します。

「body要素」の「背景」を「黒色」に設定して「border-radius」で「円形」にした要素に「白色」の「box-shadow」を設定します。

表示をすると、

のように表示されます。

「皆既日食」みたいな表現になりました。

これだとシンプルすぎるので、「カラー」を追加していきたいと思います。

カラフルな「リングシャドウ」

「HTML」は下記のように作ります。

<body>
    <div id="circle"></div>
    <div id="circle2"></div>
    <div id="circle3"></div>
</body>

「リング要素」を２つ追加しています。

そして、CSSは下記のように作成しました。

:root {
    --shadow-range: 10px;
    --x-axis: 10px;
    --y-axis: 0px;
}

body {
    height: 100vw;
    background-color: #000;
    position: relative;
}

#circle,
#circle2,
#circle3 {
    width: 200px;
    height: 200px;
    border: solid 1px #333;
    border-radius: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
}

#circle {
    box-shadow: var(--x-axis) var(--y-axis) var(--shadow-range) #eb2286;
    transform: translate(-50%, -50%) rotate(0deg);
}

#circle2 {
    box-shadow: var(--x-axis) var(--y-axis) var(--shadow-range) #0cd348;
    transform: translate(-50%, -50%) rotate(120deg);
}

#circle3 {
    box-shadow: var(--x-axis) var(--y-axis) var(--shadow-range) #2700b3;
    transform: translate(-50%, -50%) rotate(240deg);
}

このコードを表示してみると、

のようになります。

カラフルな３色リングシャドウができました。

リングシャドウアニメーション

せっかくなのでこのリングシャドウをくるくる回してみたいと思います。

CSSを下記のように作成しました。

:root {
    --shadow-range: 10px;
    --x-axis: 10px;
    --y-axis: 0px;
}

body {
    height: 100vw;
    background-color: #000;
    position: relative;
}

#circle,
#circle2,
#circle3 {
    width: 200px;
    height: 200px;
    min-height: 400px;
    border: solid 1px #333;
    border-radius: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
}

#circle {
    box-shadow: var(--x-axis) var(--y-axis) var(--shadow-range) #eb2286;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rotate 3s linear infinite normal backwards 0.5s;
}

 @keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#circle2 {
    box-shadow: var(--x-axis) var(--y-axis) var(--shadow-range) #0cd348;
    transform: translate(-50%, -50%) rotate(120deg);
    animation: rotate2 3s linear infinite normal backwards 0.5s;
}

@keyframes rotate2 {
    0% {
        transform: rotate(120deg);
    }

    100% {
        transform: rotate(480deg);
    }
}

#circle3 {
    box-shadow: var(--x-axis) var(--y-axis) var(--shadow-range) #2700b3;
    transform: translate(-50%, -50%) rotate(240deg);
    animation: rotate3 3s linear infinite normal backwards 0.5s;
}

@keyframes rotate3 {
    0% {
        transform: rotate(240deg);
    }

    100% {
        transform: rotate(600deg);
    }
}

「animationプロパティ」と「keyframes」を追加しています。

このコードを表示してみると、

回転するカラフルなリングシャドウができました。

CSSの表現やアニメーション機能のどんどん拡張しているため、CSSだけでもさまざまなアニメーションを作ることができますので、ぜひいろいろと試しながら、CSSアニメーションの作成に取り組んでみていただければと思います。

また何かおもしろそうな表現があれば公開したいと思います。