🥺
🥺な気持ちなので
🥺をCSS(SCSS)で描いてみました。
See the Pen Pleading Face emoji "Pien" by wasshoy (@wasshoy) on CodePen.
作り終わって気づいたら夜になっていました。
🥺ぴえん
手順解説
パーツ分け
まず、作るパーツを分けました。
- 顔本体
- 右目 / 左目
- 右眉 / 左眉
- 口
パーツ細部
それぞれのパーツの細部をどう表現するかを決めました。
右目 / 左目
黒目を中心に、「黒目の下のわずかな白目部分」と「黒目の大きなハイライト」を擬似要素で作ることにしました。
ここで、黒目の小さいハイライトは別の要素として追加することにしました（パーツに「右目小ハイライト / 左目小ハイライト」を追加）。
右眉 / 左眉
傾けた茶色の楕円の上に顔の色と同じ楕円を重ねることで作ることにしました。
口
眉と同様に、楕円の上に楕円を重ねることにしました。
コーディング
🥺は左右対称なので、右半分のパーツを全て作って、その後左のパーツを作ることにしました。
目と小ハイライトは左右全く同じ書き方です。
眉は傾ける角度を逆回転にするだけです。@mixinでまとめて、位置や角度などを引数にとるようにし、スッキリ書けるようにしました。
