深夜のテレビで流れるアレをCSSで実装してみた

ピーーーーーーーーーーーーー

See the Pen color-bar by saeka-hirai (@saeka-hirai) on CodePen.

実装方法

HTML

<section class="color-bar"></section>

これだけ

日頃装飾のために空divを無駄遣いしている諸君
これくらいのモノならCSSの擬似要素使えば実装できるゾ

CSS

linear-gradientというポテンシャルの塊

「CSS グラデーション」を検索にかけるとほぼほぼ出てくる
linear-gradientというproperty。
文字通りグラデーションを実装するときに使います。
参考URL : https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient

でも、実は他の使い道もあるポテンシャルの塊なんです
linear-gradientの値は、先の後と次の前の配分を同じ値で繋げると、
なんと単色で色を置くことができます。
さらに配分次第では何色も追加することができる優れもの
(同じ値で繋げなくてもグラデーションになるだけです )
あとは入れたい色数分繋げていくだけで、
一つの要素にたくさんの色を入れることができます。
こんな感じ

 background: linear-gradient(to right, navy 20%, white 20% 40%, purple 40% 60%, gray 60% 72%, dimgray 72% 77%, gray 77% 82%, silver 82% 87%, black 87% 100%);

20 -> 20 40 -> 40 60
ってなっているのがわかりますか？

応用(?)編

梨汁ブシャー

See the Pen funassyi by saeka-hirai (@saeka-hirai) on CodePen.

※変数機能、Sassだけじゃなくて実はCSSも標準で持ってます

＼\ 月に代わっておしおきよ /／

See the Pen Slice Pretty Guardian by saeka-hirai (@saeka-hirai) on CodePen.

Slice Herosっていうゲームの問題に出てくるキャラの色味を再現してみました。
遊んでみてね。

グラデーション作りたい人は

このサイトが画期的なので遊んでみてください！
(どんなに濁る組み合わせで色を入れても、
いい感じのグラデーションを作ってくれる優れもの )
https://mycolor.space/gradient