繰り返すグラデーション

大晦日。 今年も後数時間で終わり。

窓から見える高幡不動は、いつもより少し賑やかな気配がする。 除夜の鐘にはまだ早いはずだが、順番待ちの行列はもう始まっているのだろうか。 それとも単に暇なのか。

他人の事情は知らないが、少なくとも俺についてなら自信を持って断言できる。 暇だと。 ということで、そのうちやろうと思っていた昨日のグラデーションの続きをここで。

repeating gradient

直線方向、放射方向、回転方向、それぞれのグラデーションで繰り返し対応版がある。 俺にとってはそう魅力的な機能ではないのだが、今そう思うだけで、この先、使いたくなる時がないとは言えないからね。 昨日同様に、基本的なところを押さえておく。

repeating-linear-gradient

ますは直線方向。 個々の設定値の考え方は繰り返さない版とほぼ同じ。 繰り返しのユニットを定義すると、それを領域いっぱい繰り返してくれる。

罫線風。 そう魅力的じゃないと言ったばかりだが、縦横組み合わせてレイアウトのガイドラインにいいかもしれない。

repeating-radial-gradient

次に放射方向。 これも繰り返す単位を指定するだけ。 開始位置や終了位置、中心の考え方は繰り返さない版と同じ。

repeating-conic-gradient

最後に回転方向。 以下同文。

感想

初めてグラデーションの機能を知った時は、きっと使うことは無いだろうと思った。 が、こうして色々試した結果、ちょっと使いたくなってきた。 簡単だし。 綺麗だし。 まあグラデーションが綺麗なのは、解像度の高いディスプレイを使っていることも大きいと思うが。

最後に、ここまでの成果として時計のデザイン案を一つ。

回転方向のグラデーションを組み合わせて、外周から 月 - 日 - 時 - 分 - 秒 に対応させている。

まだデザイン案の段階なので動かない。 諸々もうちょっと詰めた上で、動くようにしてみたい。 来年のいつか暇な時にでも。