はじめに
この記事は アイスタイル Advent Calendar 2023 1日目の記事です。
こんにちは、アイスタイルではフロントエンド周りをちまちま触っているsakaguchiiと申します。
すこし昔の話になりますが弊社のサービス「@cosme」のロゴをリニューアルした際、「Dot & Space」がロゴのコンセプトとなりました。
今回は幾何学模様である「Dot&Space」をCSSで実装するとしたらどう実装しようか？というものを記事にしようと思います😊
① Dotを並べてみる
コンセプトの通り「Dot」から生まれる「Space」を表現するために、まずはシンプルに丸い要素を並べてみます。
See the Pen dot1 by sakaguchii (@sakaguchii) on CodePen.
「Dot&Space」を表現することは出来ましたが、大量のdivで書いているため汎用性も実用性もありません。
② cssで書いてみる
形状または円形に二色以上の色が放射線状に広がる背景を生成できるradial-gradient()を利用します。
See the Pen dot2 by sakaguchii (@sakaguchii) on CodePen.
主に円形を記述しているのは下記になります。
background-image: radial-gradient(closest-side, #2eb6aa 96%, #fff);
#2eb6aaから#fffへのグラデーションの幅を96%として設定しています。
このパーセンテージは色と色の境目を表現しており、これを100%で設定するとジャギる状態になってしまうため96%にすることで自然な見た目になるようにしています。
③ カスタマイズしてみる
色を変えたり、パターンとしてより自然な見え方になるよう配置を変えます。
See the Pen dot4 by sakaguchii (@sakaguchii) on CodePen.
See the Pen dot3 by sakaguchii (@sakaguchii) on CodePen.
背景として描画することで上にテキストを記述することが出来る等、①では叶えられなかった実用性が生まれました。
また、background-positionで描画位置を変更することでパターンとしてより自然な形で並べることが出来ました
最後に
実際に書いてみた感想としては、調整しないとジャギってしまったり、逆に調整したことによって微妙に円の境目が惜しい感じがあり、実務上でキービジュアルやファーストビューとして持ってくるには、画像を使った方が良いな…と個人的には思いました。
ただこういう機会がなければCSSで幾何学模様を描画してみようとも思わず、挑戦することもなかったので、楽しく描くことが出来ました！
ここまで読んでくださりありがとうございました😊