明日はホワイトデーということで、バレンタインのお返しにアイシングクッキーを作りました。クッキーといってもブラウザに保存するやつじゃないです。
See the Pen Only HTML + CSS Cookie by Nishihara (@Nishihara) on CodePen.
概要
丸が基本形なので、border-radius: 50%で円形を作り、borderをつかって影やハイライトを作っています。目のハイライトにはクロソイド曲線を用いたグラデーションを使っています。クッキーの複雑な表面を再現するのは難しかったのでアイシングクッキーにしました。
作り方
ここではスマイルのものを例に上げて説明していきます。
HTMLはクッキーの土台、アイシング部分、そして目、口、口角部分から構成されています。
<divclass="cookie smile"><divclass="icing"><divclass="eye eyeLeft"></div><divclass="eye eyeRight"></div><divclass="mouth"><divclass="kokaku kokakuLeft"></div><divclass="kokaku kokakuRight"></div></div></div></div>クッキー部分
まずはクッキーの土台部分です。
.cookie{position:relative;width:165px;height:160px;margin:12px;border-radius:50%;border-right:6pxsolidmix($cookieColor,#000,75%);border-bottom:6pxsolidmix($cookieColor,#000,75%);box-shadow:6px5px6px3pxmix(#000,mix($cookieColor,$bgColor,50%),10%),inset-5px-4px3px1pxmix($cookieColor,#000,80%);@includereverse-clothoid-radial-gradient($color-start:$cookieColor,$color-end:mix($cookieColor,#000,80%),$start-point:0.85);&:after{content:"";display:block;width:165px;height:160px;position:absolute;top:3px;left:3px;border-radius:50%;border-right:1pxsolidmix($cookieColor,#000,45%);border-bottom:1pxsolidmix($cookieColor,#000,45%);filter:blur(2px);}}
インクルードしている関数がありますが、これはグラデーションをつくるmixinです。本体はこうです。
/**
* クロソイド曲線の放射状グラデーション
*/@mixinreverse-clothoid-radial-gradient($position:closest-sideatcenter,$color-start:#000000,$color-end:#ffffff,$start-point:0){background-image:radial-gradient($position,$color-start0$start-point*100%,mix($color-start,$color-end,98.1%)$start-point*100%+(1-$start-point)*12%,mix($color-start,$color-end,96.3%)$start-point*100%+(1-$start-point)*17.15%,mix($color-start,$color-end,92.5%)$start-point*100%+(1-$start-point)*24.5%,mix($color-start,$color-end,85%)$start-point*100%+(1-$start-point)*35%,mix($color-start,$color-end,70%)$start-point*100%+(1-$start-point)*50%,$color-end);}クロソイド曲線を使うとグラデーションの変化をいい感じに整えてくれます。このグラデーションについては拙筆『1歩踏み込んでみる! CSSグラデーションのマニアックな世界』に詳しく書かれています。このmixinはbackground-imageを出力しており、クッキーの色部分を担当しています。この部分だけ抜き出すとこんな感じです。
いい感じに影がつきました。（box-shadowのinsetでも良かった気がする）
そこにborder-rightとborder-bottomだけをつけることで右下側に厚みをもたせます。box-shadowや疑似要素で影を加えます。
これでクッキーの土台は完成
アイシング
アイシング部分を作っていきます。
.icing{width:153px;height:150px;position:absolute;top:5px;left:5px;border-radius:50%;@includereverse-clothoid-radial-gradient($color-start:$icingColor,$color-end:mix($icingColor,#000,80%),$start-point:0.9);}クッキー部分と同じようにクロソイド曲線のグラデーションで色付けしています。after疑似要素でハイライトをつけます。
&:after{content:"";width:130px;height:130px;border-radius:50%;position:absolute;top:5px;left:10px;border-bottom:6pxsolidmix($icingColor,#fff,20%);transform:rotate(117deg);filter:blur(3px);}
エッジ部分だけでなく、全体的な照り具合を加えます。
&:before{content:"";width:140px;height:140px;border-radius:50%;position:absolute;top:2px;left:3px;@includeclothoid-radial-gradient($position:farthest-sideat65%30%,$color-start:rgba(255,255,255,0.6),$color-end:rgba(255,255,255,0));border-bottom:6pxsolidmix($icingColor,#000,80%);transform:rotate(-76deg);filter:blur(4px);}
またここで先程のクロソイド曲線をグラデーションが役に立ちます。柔らかい変化を出せるのでほんのりと反射した表現ができます。
アイシング部分は完成です。
おめめ
続いて目を作っていきます。
.eye{width:12px;height:24px;position:absolute;top:40px;border-radius:50%;background-color:$chocoColor;box-shadow:inset002px1pxmix($chocoColor,#000,80%),1px02px0mix($icingColor,$chocoColor,50%);}
目の共通部分です。基本的には長方形をborder-radius: 50%で楕円にし、わずかにシャドウ加えたものです。そこに擬似要素とクロソイド曲線グラデーションでハイライトをいれます。
&:after{content:"";display:block;width:8px;height:12px;position:absolute;top:2px;left:1px;@includeclothoid-radial-gradient($color-start:rgba(255,255,255,0.8),$color-end:rgba(255,255,255,0));}
画竜点睛とは言いますが、目ができると、活きてきますね！
口
さいごに口の部分です。口はborderを使って作り出しています。
.mouth{width:80px;height:80px;position:absolute;top:32px;left:30px;border-radius:50%;border-left:3pxsolidtransparent;border-right:3pxsolidtransparent;border-bottom:6pxsolid$chocoColor;}borderを左右下で設定していますが、左右の色は透明です。同じ色であれば4分の1の弧ができるはずですが、左右のborderのカラーが透明なのでその中点、つまり45度の位置で終わります。こうすることで笑顔の口ができます。他のと同じように擬似要素でいい感じにシャドウとハイライトをつけます。
同様に口角部分も作ります。
.kokaku{width:16px;height:20px;border-radius:50%;position:absolute;border-left:4pxsolidtransparent;border-right:4pxsolidtransparent;border-bottom:4pxsolid$chocoColor;top:51px;&Left{left:-12px;transform:rotate(-45deg);&:before{content:"";width:16px;height:20px;position:absolute;top:4px;left:-2px;border-radius:50%;border-left:1pxsolidtransparent;border-right:1pxsolidtransparent;border-bottom:1pxsolidmix($chocoColor,$icingColor,80%);filter:blur(1px);}&:after{content:"";width:16px;height:20px;position:absolute;top:0;left:1px;border-radius:50%;border-left:1pxsolidtransparent;border-right:1pxsolidtransparent;border-bottom:1pxsolidmix($chocoColor,#fff,30%);filter:blur(1px);}}&Right{right:-12px;transform:rotate(45deg);&:before{content:"";width:16px;height:20px;position:absolute;top:-1px;left:0;border-radius:50%;border-left:1pxsolidtransparent;border-right:1pxsolidtransparent;border-bottom:1pxsolidmix($chocoColor,$icingColor,80%);filter:blur(1px);}&:after{content:"";width:16px;height:20px;position:absolute;top:3px;left:-1px;border-radius:50%;border-left:1pxsolidtransparent;border-right:1pxsolidtransparent;border-bottom:1pxsolidmix($chocoColor,#fff,30%);filter:blur(1px);}}}
完成！
これでスマイルクッキーのできあがりです。サングラスやぴえんは似たような手法で展開しています。詳しくはCodePenのコードをご覧ください。
▼完成までGifアニメ
おわりに
あまり時間を掛けられなかった割にはキレイにできたのかなと思っています。やはり形がシンプルな方が作りやすいですね。