明日はホワイトデーということで、バレンタインのお返しにアイシングクッキーを作りました。クッキーといってもブラウザに保存するやつじゃないです。
See the Pen Only HTML + CSS Cookie by Nishihara (@Nishihara) on CodePen.
概要
丸が基本形なので、border-radius: 50%で円形を作り、borderをつかって影やハイライトを作っています。目のハイライトにはクロソイド曲線を用いたグラデーションを使っています。クッキーの複雑な表面を再現するのは難しかったのでアイシングクッキーにしました。
作り方
ここではスマイルのものを例に上げて説明していきます。
HTMLはクッキーの土台、アイシング部分、そして目、口、口角部分から構成されています。
<div class="cookie smile">
<div class="icing">
<div class="eye eyeLeft"></div>
<div class="eye eyeRight"></div>
<div class="mouth">
<div class="kokaku kokakuLeft"></div>
<div class="kokaku kokakuRight"></div>
</div>
</div>
</div>
クッキー部分
まずはクッキーの土台部分です。
.cookie {
position: relative;
width: 165px;
height: 160px;
margin: 12px;
border-radius: 50%;
border-right: 6px solid mix($cookieColor, #000, 75%);
border-bottom: 6px solid mix($cookieColor, #000, 75%);
box-shadow: 6px 5px 6px 3px mix(#000, mix($cookieColor, $bgColor, 50%), 10%),
inset -5px -4px 3px 1px mix($cookieColor, #000, 80%);
@include reverse-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: 1px solid mix($cookieColor, #000, 45%);
border-bottom: 1px solid mix($cookieColor, #000, 45%);
filter: blur(2px);
}
}
インクルードしている関数がありますが、これはグラデーションをつくるmixinです。本体はこうです。
/**
* クロソイド曲線の放射状グラデーション
*/
@mixin reverse-clothoid-radial-gradient(
$position: closest-side at center,
$color-start: #000000,
$color-end: #ffffff,
$start-point: 0
) {
background-image: radial-gradient(
$position,
$color-start 0 $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%;
@include reverse-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: 6px solid mix($icingColor, #fff, 20%);
transform: rotate(117deg);
filter: blur(3px);
}
エッジ部分だけでなく、全体的な照り具合を加えます。
&:before {
content: "";
width: 140px;
height: 140px;
border-radius: 50%;
position: absolute;
top: 2px;
left: 3px;
@include clothoid-radial-gradient(
$position: farthest-side at 65% 30%,
$color-start: rgba(255, 255, 255, 0.6),
$color-end: rgba(255, 255, 255, 0)
);
border-bottom: 6px solid mix($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: inset 0 0 2px 1px mix($chocoColor, #000, 80%),
1px 0 2px 0 mix($icingColor, $chocoColor, 50%);
}
目の共通部分です。基本的には長方形をborder-radius: 50%で楕円にし、わずかにシャドウ加えたものです。そこに擬似要素とクロソイド曲線グラデーションでハイライトをいれます。
&:after {
content: "";
display: block;
width: 8px;
height: 12px;
position: absolute;
top: 2px;
left: 1px;
@include clothoid-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: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 6px solid $chocoColor;
}
borderを左右下で設定していますが、左右の色は透明です。同じ色であれば4分の1の弧ができるはずですが、左右のborderのカラーが透明なのでその中点、つまり45度の位置で終わります。こうすることで笑顔の口ができます。他のと同じように擬似要素でいい感じにシャドウとハイライトをつけます。
同様に口角部分も作ります。
.kokaku {
width: 16px;
height: 20px;
border-radius: 50%;
position: absolute;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid $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: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid mix($chocoColor, $icingColor, 80%);
filter: blur(1px);
}
&:after {
content: "";
width: 16px;
height: 20px;
position: absolute;
top: 0;
left: 1px;
border-radius: 50%;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid mix($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: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid mix($chocoColor, $icingColor, 80%);
filter: blur(1px);
}
&:after {
content: "";
width: 16px;
height: 20px;
position: absolute;
top: 3px;
left: -1px;
border-radius: 50%;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid mix($chocoColor, #fff, 30%);
filter: blur(1px);
}
}
}
完成！
これでスマイルクッキーのできあがりです。サングラスやぴえんは似たような手法で展開しています。詳しくはCodePenのコードをご覧ください。
▼完成までGifアニメ
おわりに
あまり時間を掛けられなかった割にはキレイにできたのかなと思っています。やはり形がシンプルな方が作りやすいですね。