CSSで絵を描いてみよう〜さくらんぼ編〜

先日、CSSの限界が知りたくて調べていたら、とあるサイトにたどり着いた。

Diana Smith | UI Engineer / Web Developer / Frontend Specialist | cyanharlow @ GitHub

これらの作品は全て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が大活躍した。形を作り、位置を調整する。大体これでいけるし、運良くいい感じになったりもする。コードを書くことを生業としている方は、普通に絵を描くより手を出しやすいのではないかとすら思う。

興味がある方はぜひ手を出してみて欲しい。

参考記事

今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！

css — CSSで曲線を描く

CSSで簡単ぼかし（ブラー）掛ける方法 | 株式会社Cruw（クルー）