CSSで絵を描いてみよう〜さくらんぼ編〜
先日、CSSの限界が知りたくて調べていたら、とあるサイトにたどり着いた。
これらの作品は全てHTMLとCSSだけで書かれている。しかもHTMLはほぼdiv要素とclassの定義だけなので、実質CSSだけで書かれている。すごい。職人技である。
と、いうことで私も職人を目指すべく、CSSで絵を描いてみた。
用意するもの
・描きたいものの写真(今回はさくらんぼなので美味しそうなやつ)
・CSSで絵を描きたいという気持ち
・根気
今回さくらんぼを選んだ理由、それは描きやすそうだから。
本当はクリームソーダとか描いてみたかったのだが、最初にしては難易度が高すぎる。クリームソーダはジュース、アイス、さくらんぼ、スプーンと分けることができるので、今回は一番簡単そうなさくらんぼを選んでみた。
必要な部位をHTMLで書き出してみよう
さくらんぼは実と茎に分けることができるのでとりあえず実と茎、あとはさくらんぼ全体のdiv要素を書き出していく。他に必要なものが出てきたら再度書き足す、という形をとった。
<div class="cherry">
<div class="stem"></div>
<div class="fruit"></div>
</div>
さくらんぼの実をCSSで描いてみよう
さくらんぼはまん丸ではなく、若干歪な丸なので、border-radiusで調整する。また色は赤一色ではなく、オレンジがかっている部分なども考慮する必要がある。そう、グラデーションの出番だ。
radial-gradientを使い、円形にグラデーションをかけてあげる。グラデーションをかける位置も調整しないと、真ん中からグラデーションがかかってしまうので注意だ。
.fruit {
width: 100px;
height: 100px;
background: -moz-radial-gradient(circle at 70px 60px, #ff9175 3%, #c90300, #5c0100);
background: -webkit-radial-gradient(circle at 70px 60px, #ff9175 3%, #c90300, #5c0100);
background: radial-gradient(circle at 70px 60px, #ff9175 3%, #c90300, #5c0100);
border-radius: 50% 50% 60% 60%/50% 50% 70% 60%;
}
見た目はこんな感じ↓
スクリーンショットだと若干色がくすむようだ。実際の色味はcode penを参考にして欲しい。
さくらんぼの茎をCSSで描いてみよう
茎は曲線で表現したい。が、曲線を描くCSSがない(知らない)ので、今回はborderを使って表現した。
.stem {
position: relative;
top: 17px;
left: 5px;
width: 230px;
height: 100px;
border: solid 5px #4fab5f;
border-color: #4fab5f transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
transform:rotate(-45deg);
}
border-colorの右、下、左にtransparent(透明色)を指定することで、上の曲線がかかった部分だけ表示される。
角度をつけて、このような見た目になる。
これだけでも大分さくらんぼらしくなったが、茎が生えてる感がないので、茎の付け根と枝にくっついていた部分(節?)も追加する。
<div class="node"></div> //節?
<div class="cherry">
<div class="stem"></div>
<div class="stem-root"></div> //茎の付け根
<div class="fruit"></div>
</div>
節は茎の色から濃い緑に変化するようグラデーションをかけ、付け根は楕円を意識し、茎と同じ色にした。
.node {
position: absolute;
left: 595px;
top: 20px;
width: 20px;
height: 10px;
border-radius: 50px 0px;
background: -moz-linear-gradient(to top right, #4fab5f 20%, #1e4f1d);
background: -webkit-linear-gradient(to top right, #4fab5f 20%, #1e4f1d);
background: linear-gradient(to top right, #4fab5f 20%, #1e4f1d);
}
.stem-root {
position: relative;
left: 44px;
top: 6px;
width: 10px;
height: 5px;
border-radius: 50% 50%;
background: #4fab5f;
}
だんだんさくらんぼらしくなってきたのではないだろうか。
ハイライトと影を追加して立体感を出してみよう
まだまだのっぺりしているように見えるので、ハイライトと影を追加する。
まずは実の部分。茎の下に影を追加し、実にハイライトを入れる。
<div class="node"></div>
<div class="cherry">
<div class="stem">
<div class="stem-shadow"></div>
</div>
<div class="stem-root"></div>
<div class="fruit">
<div class="highLight"></div>
<div class="fruit-shadow"></div>
</div>
</div>
filter:blurでぼかし、いい感じの位置になるまで調整する。
.highLight {
position: relative;
left: 25px;
top: 5px;
width: 30px;
height: 10px;
border-radius: 50% 50%;
background: #fff;
-ms-filter: blur(5px);
filter: blur(5px);
}
.fruit-shadow {
position: relative;
left: 32px;
top: -8px;
width: 30px;
height: 10px;
border-radius: 50% 50%;
background: #5c0100;
-ms-filter: blur(5px);
filter: blur(5px);
}
茎や付け根にも影を追加する。
.stem-shadow {
position: relative;
left: -2px;
width: 230px;
height: 100px;
border: solid 2px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
-ms-filter: blur(2px);
filter: blur(2px);
}
.stem-root {
position: relative;
left: 44px;
top: 6px;
width: 10px;
height: 5px;
border-radius: 50% 50%;
background: #4fab5f;
box-shadow: -1px -1px 1px rgba(92,1,0,0.7) inset; //内側の影を追加
}
いい感じ!
完成
クリームソーダ用に一個作ったが、さくらんぼといえば双子のイメージが強い人も多いだろう。なのでもう一個追加し、影や茎の長さ、節の位置なども調整した。
最後に
あまり美味しそうに見えないのが残念だが、結構それっぽく描けたのは嬉しい。
また、noteのコードには書いていないのだが、今回はz-indexが大活躍した。形を作り、位置を調整する。大体これでいけるし、運良くいい感じになったりもする。コードを書くことを生業としている方は、普通に絵を描くより手を出しやすいのではないかとすら思う。
興味がある方はぜひ手を出してみて欲しい。
参考記事
この記事が気に入ったらサポートをしてみませんか?