Edited at

CSSで色相環を作る

More than 3 years have passed since last update.

前回「CSS三角形の角度を決めて表示させるSTYLUS MIXIN」の応用編です。


作り方


html

三角形が入るコンテナを360個ばかり用意します。

と書くとアレですが、jadeなら一瞬です。


jade

ul

- var i = 1
while i <= 360
li
- i++


html

<ul>

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
...

こうなります。


CSS


三角形を作る

頂点の角度が1度になるように作ります。色は仮です。


stylus

ul

top 20px
left 120px
position relative
li
width 0
height 0
position absolute
border-style solid
border-width 115px 1px 0
border-color #f00 transparent transparent

これで360個の三角形が重なった物ができます。

なんだか一本線にしか見えませんが。


1度ずつずらして三百六十角形を作る

ということで360個ばかり transform を設定します。

と書くとまったくアレですがstylusなら一瞬です。

頂点の部分を中心にしてrotate()させたいので、transform-originを設定しておきます。

translate3d()つけるとキレイな感じに回転させられますのでそのように。


stylus

li

transform-origin 50% 100%
for i in (1..360)
&:nth-of-type({i})
transform rotate(i deg) translate3d(0, 0, 0)


css

li:nth-of-type(1) {

-webkit-transform: rotate(1deg) translate3d(0, 0, 0);
transform: rotate(1deg) translate3d(0, 0, 0);
}
li:nth-of-type(2) {
-webkit-transform: rotate(2deg) translate3d(0, 0, 0);
transform: rotate(2deg) translate3d(0, 0, 0);
}
li:nth-of-type(3) {
-webkit-transform: rotate(3deg) translate3d(0, 0, 0);
transform: rotate(3deg) translate3d(0, 0, 0);
}
...

イテレーション万歳。

円のように見えますが、いちおう三百六十角形です。


グラデーションを作る

ボーダーにグラデーションを付けるやり方はまあいろいろあったりなかったりしますが、ここはせっかくなので border-image を使ってみましょう。ちょっといろいろ書き換えます。


stylus

li

width 0
height 0
position absolute
border-style solid
border-width 115px 1px
// border-color #f00 transparent transparent
border-image linear-gradient(to bottom, black, white) 100% / 115px 1px 0
transform-origin 50% 100%
for i in (1..360)
&:nth-of-type({i})
transform rotate(i deg) translate3d(0, 0, 0)

border-image の書き方でちょっと悩みましたが、スライス部分と別に border-image 内で線幅を設定することでうまくいきました。ので、線色と線幅を削除します。border-colorを削除して、border-widthは環境によって線が表示されなくなるので残します。


色を加える

あとはたいていお気づきだと思いますが、stylusのイテレーションのところにhslで色を指定してやるだけです。イテレーション万歳。


stylus

li

for i in (1..360)
&:nth-of-type({i})
border-image linear-gradient(to bottom, hsl(i, 100%, 50%), #FFF) 100% / 115px 1px 0

ちょっと滑らかさに欠けますが、これでひとまず完成です。

なんの役に立つのかは聞かないでください。パフォーマンスも大してよくありません。ChromeとSafariでしか動作確認していません。


おまけ

こんなのを作ってみました。


jade

| Saturation:

- var s = 0
while s <= 100
if s == 100
- chk = true
input.sat(id="sat"+s, type="radio", name="sat", value=s, class="sat"+s, checked=chk)
label(for="sat"+s)= s
| %
- s += 10


stylus

ul

for s in (0..10)
.sat{s*10}:checked ~ &
filter saturate(s/10)

CSSフィルターをつかって彩度を変更できます。本当は明度も変えたかったのですけれど、半ば意地でCSSだけで動くようにしたのでムリでした。だからそれが(略

完成品はこちらにあります。

色相環を作る