Posted at

CSSでビックリマンシール風の背景を作る

More than 1 year has passed since last update.

Chrome 69 から CSS conic-gradient が使えるようになります :open_hands:

※2018年8月3日時点ではバージョンが 68 なので、以下のソースは Chrome Canary でご確認ください。

今までグラデーションといえば、線形グラデーションの linear-gradient と 放射状グラデーション の radial-gradient の2つだけでしたが、conic-gradient で円錐状グラデーションを表現することができます :thumbsup:

スクリーンショット 2018-08-03 15.36.18.png

これを利用しビックリマンシール風の背景を作成してみました。*1

スクリーンショット 2018-08-03 13.16.05.png

実際に描画されたものを見たい場合はこちら

名前のところは太字にして枠をつけただけなので、もう少し何とかしたいところですが、

主旨のキラキラはいい感じにできました。


キラキラソース

HTML

<div class="kirakira">

ここに名前や画像の要素を置く
</div>

CSS

.kirakira {

position: relative;
width: 240px;
height: 240px;
text-align: center;
background: conic-gradient(
white 2%,
#d9ccb7 22%,
white 25%,
gray 40%,
white 50%,
#bbcfd2 60%,
white 80%,
gray 96%,
white 100%
);
background-size: 24px 24px;

> * {
position: relative;
}

// 台紙のカラー
&::before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
background : linear-gradient(-45deg, orange, blue);
opacity: .18;
}
}

background: conic-gradient(...) で円錐状の背景パターンを作成し、

background-size: 24px でパターンの繰り返し。

before擬似要素の linear-gradient() で色合いを加えれば完成です。

以下、補足として conic-gradient の使い方をざくっとまとめました。


conic-gradient の基本的な使い方


1. 2色のグラデーション

スクリーンショット 2018-08-03 16.03.25.png

.hoge {

background: conic-gradient(#fff, #000);
}

グラデーションは要素の中心から時計周りに、白(#fff) から 黒(#000) へ均等に分布します。


2. グラデーションカラーのスタート位置を変える

スクリーンショット 2018-08-03 16.09.05.png

.hoge {

background: conic-gradient(from 90deg, #fff, #000);
}

カラー指定の前に from 〇〇deg と書くことでグラデーションカラーのスタート位置を変更することができます。 deg は角度(degree)を表わし、デフォルトの位置(0 度)から時計周りに移動します。deg の代わりに turn も使用できます。


3. グラデーションの中心位置を変更する

.hoge {

background: conic-gradient(from 90deg at 75% 50%, #fff, #000);
}

スクリーンショット 2018-08-03 16.25.12.png

デフォルトでは要素の中心(50% 50%)に指定されていますが、 at x位置 y位置 をカラー指定の前に置くことで中心位置を変更することができます。 from と一緒に指定する場合、fromat の間にコロンは不要です。


4. 複数色のグラデーション

スクリーンショット 2018-08-03 16.33.48.png

.hoge {

background: conic-gradient(red, orange, yellow, green, blue, purple, red);
}

カラーは複数指定することができます。最初と最後の色を合わせておけば、連続したカラーグラデーションを作ることができます。


5. 特定の色の分布範囲を変更する

スクリーンショット 2018-08-03 16.43.53.png

.hoge {

background: conic-gradient(red 180deg, orange, yellow, green, blue, purple, red);
}

任意の色に対し角度を指定することで分布範囲を変更することができる。上の例では red 180deg で赤色を 180 度まで染めるようにしています。この時残りの範囲は他の色で均等に分布されます。


*1 @grapswiz thanks :bow_tone1: