CSSの芸術：菊を描く
CSSアートは、デザインと技術的なスキルを融合させたものです。画像ファイルを使用することなく、HTMLとCSSのみを使って詳細な絵を描き出します。
菊には、密集した多くの花びらがあります。以下の特定のプロパティを使用することで、この花を構築できます。
- border-radius で柔らかな形状を作る
- linear-gradient で色の深みを出す
- box-shadow で立体感を出す
- transform で回転させる
花を作るには、まず形を描きます。菊は、レイヤー化された div 要素と擬似要素の集合体です。花を「花びら」「レイヤー」「中心部」といったパーツに分解して考える必要があります。
border-radius を使って花びらの形を作ります。次に、transform: rotate() を使ってそれを動かします。これらの形状を中心点の周りで回転させることで、開花した模様が生まれます。
作品を向上させるためのヒント：
- z-index を使って花びらを重ねる。
- opacity を変更して奥行きを加える。
- ::before や ::after などの擬似要素を使用する。これにより、HTMLをクリーンに保つことができます。
CSSアートは、ボックスモデルやポジショニングをマスターするのに役立ちます。また、ブラウザがどのように要素をレンダリングするかを学ぶことができます。
今すぐコードエディタを開いて、花のデザイン作りに挑戦してみましょう。
Source: https://dev.to/jehadurre/the-art-of-css-rendering-a-chrysanthemum-using-only-html-and-css-3j6d