はじめに
この記事は アイスタイル Advent Calendar 2023 4日目の記事です。
こんにちは、アイスタイルではフロントエンド周りをちまちま触っているsakaguchiiと申します。
この記事では弊社のサービス「@cosme」のプロモーションキャラクターである「ミカエル」をCSSで描いてみようと思います。
ミカエルとは
3月6日生まれの男の子。
@cosmeでみなさんとマイコスメとの出会いをお手伝いする、カエルの姿をした妖精。
名前の語源は「美に変える(change)」「美が買える(buy)」。
キラキラの目がトレードマーク！ お風呂のときにはおなかの@cosmeをとるらしい…！？
トレードマークであるキラキラの目は@cosmeのアイデンティティである「Dot&Space」のSpaceから来ており、こちらの記事で「Dot&Space」をCSSで表現することは出来たのでこの部分が描けたならミカエルもCSSで描けるのでは…！と思いついたため、ミカエルのお顔を描いてみました。
さっそく
See the Pen micael by sakaguchii (@sakaguchii) on CodePen.
こだわりポイント
キラキラの目
「ベースの塗りつぶし部分」「トレードマークのキラキラ部分」で構成しました。
キラキラ部分はCSSのradial-gradientを使って下記のようなドット模様の背景を作り出来たスペースの部分を利用しました。
ただし、これだと使いたいところ以外の余白も見えてしまうため、clip-path: circle()を使って丸くクリッピング領域を作り、あとはpositionで良い感じの場所に配置して描画しました。
くち
楕円の線の部分を使ってくちの弧を作り、キラキラ目と同様clip-path: circle()で必要な部分だけを残すことでにっこりとしたくちを表現しました。
ふちどり
かなり力業ですが、塗りつぶされた顔のベースの要素を複製しborderを付けた要素を作成。この要素の後に塗りつぶされた顔の要素を記述することで、見せたくない部分の線を上書きしてふちどったように見せています。
最後に
意外と難しかった…CSSお絵描き……。キラキラ目の余白を良い感じにするためにclip-pathを使えば良いのか！と思いつくまで少し時間がかかりました😅CSSの自分の引き出しを試されることになり、面白い機会になりました。
初心者ということもありお顔のみのチャレンジになりましたが、来年は全身か、アドカレらしくサンタなど描いてみるのも楽しそうだなと思いました。
ここまで読んでくださりありがとうございました😊