本日はバレンタインということで、チョコレートを作りました(CSS的な意味で)。今回はbox-shadowを多用して作っています。最近話題のNeomorphismもbox-shadowを使って陰影を実装できますが、その参考になるかもしれません。矩形のブロックが基本構成なので、box-shadowを使って陰影を作りました。明るいbox-shadowと暗いbox-shadowを重ねることでハイライトと影を表現します。div要素に加え、擬似要素にもbox-shadowを使っているので、けっこう重ね掛けしています。今回は装飾にtext-shadowも使って内エンボス加工風の文字も添えました。45度の突き合わせこだわったのは、角の部分です。斜め45度で突き合わせるのですが、普通にbox-shadowを組み合わせてもパキッといきません。そこで、mask-imageとlinear-gradient()を使って、斜めのマスクを作成します。マスクを使って左斜め上と右斜め下のパーツに分けてくっつけて45度の突き合わせを実現したしています。マスクの端部を少しグラデーションさせてパキッとはしつつも、鋭角になりすぎないようにしています。今思えば、borderとblur()を使えばもっと手軽に実装できたかもしれません。描画負荷は少し高くなりますがmix-blend-modeも活用しています。光が当たっている部分はscreenを、影の部分にはmultiplyを使っています。照りや影は、真っ白や真っ暗ではなく、実際には物体が持つ色を含んでいます。SCSSのmix()関数を使うことでチョコレートの色を含んだ反射光や影をつけました。作り方では、作り方を解説していきます。1つのブロックに注目して進ます。class="chocolate">で指定しています。}}1つの大きさは130px×100pxです。疑似要素で中に二周りほど小さい四角を作り、内側にシャドウをかけています。これだけだとただの箱です。膨らんだ表現は外側と内側の2つの要素に分けて作っています。外側の膨らみを作っていく左上と右下に分けて作っています。}}ここでは共通部分を定義しています。大きさはブロックと同じですが、疑似要素はさきほどの内側の四角よりは大きい、一回り小さいサイズです。}}ここで、さきほどの書いた45度の突き合わせを使っています。100%);で擬似要素にかけたbox-shadowの左上半分だけが表示されます。縁の部分にもinsetでわずかに白いハイライトいれることで、角が少し丸みをおびたように見えます。}}同じようにして、右下も作ります。内側を作っていく外側ができたので、内側も作っていきます。基本的には同じ手法になります。}}右下にはハイライトを入れます。これで、だいたいできました。斜めのエッジにハイライトを加える。左上の斜めの辺が一番光を強く受けるのでハイライトを加えます。0;}これでブロックの完成です!最終調整あとは、これをで15個並べていきます。flexで配置しています。下側と右側にborderで厚みを加えています。}}最後にオーバーレイ要素で全体的な濃淡の差を少し加えます。リアル感が少しでます。}}あとはよしなに配置すれば完成です。おわりに四角い矩形で比較的つるっとした表面なので、簡単に作れるかなって思っていましたが、やはりそれなりに時間はかかりました。box-shadowの良い練習になりました。requestStockLike213ICSにしはら@nishihara_zariフロントエンドエンジニア。デザインとエンジニアリングのつながりを探求したい。現実と虚構の狭間も好き。ザリガニを飼っていた🦞https://ics.mediaFollow株式会社ICSインタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。upLoginユーザーは見つかりませんでした。