覚えておこう！ CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法
Post on:2022年6月8日
sponsors
CSSグラデーションといえば、linear-gradient()とradial-gradient()の線形グラデーションと放射グラデーションで実装することが多いと思いますが、もう1つ扇形グラデーションのconic-gradient()もあります。
conic-gradient()を使用した美しいグラデーションを実装するテクニックを紹介します。IEを除く、すべてのブラウザにサポートされています。
Use conic gradients to create a cool border
まずは、実際のデモをご覧ください。
conic-gradient()のグラデーションは線形・放射とは異なり、色の変化は円の中心点から回転しながら色を変化させる扇型の円錐曲線グラデーションです。
See the Pen
Conic Gradient Border by Adam Argyle (@argyleink)
on CodePen.
また、要素の上でマウスを移動すると、グラデーションの角度が変化するデモもあります。CSSの変数を使用して、JavaScriptで値を操作します。
See the Pen
Conic Gradient Border by Terry Mun (@terrymun)
on CodePen.
HTMLはシンプルで、div要素の矩形にボーダーを表示します。
|
1 2 3 |
<div class="card"> Conic Gradient Border </div> |
このグラデーションを実装するポイントは、CSSのborder-image-sourceプロパティとconic-gradient()です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.card { --startDeg: 0deg; inline-size: 50vmin; block-size: 50vmin; border: 5vmin solid hsl(100 100% 60%); border-image-slice: 1; border-image-source: conic-gradient( from var(--startDeg, 0deg), hsl(100 100% 60%), hsl(200 100% 60%), hsl(100 100% 60%) ); display: grid; place-content: center; padding: 4ch; box-sizing: border-box; font-size: 10vmin; } html { block-size: 100%; inline-size: 100%; } body { min-block-size: 100%; min-inline-size: 100%; background: hsl(204 100% 5%); color: white; margin: 0; display: grid; place-content: center; font-family: system-ui; } |
border-image-sourceプロパティは、要素のボーダーを作成するために使用されるソース画像を設定できます。画像の値を受け入れる他のプロパティと同様に、CSSグラデーションも設定できます。
conic-gradient()はグラデーションを中心点から拡げる放射ではなく、中心点から回転しながら色を変化させる扇型の円錐曲線グラデーションです。
参考: W3C
|
1 |
conic-gradient(from 0deg, #f06, gold); |
conic-gradient()には、最初の引数に回転させる角度、2番目の引数に中心点（省略するとデフォルトで中央）、あとはグラデーションの開始と終了を設定します。
対応ブラウザは、下記の通りです。
border-image-sourceは、すべてのブラウザにサポートされています。
conic-gradient()はIEを除く、すべてのブラウザにサポートされています。
sponsors
