第10回MLCマークアップ部お題のスクープ型ボックスをCSSマスクで再現した話の余談

皆さんこんにちは！UI開発者の宇賀です。

今回の記事は、先日当社のUI開発者 古川が第10回MLCマークアップ部お題のスクープ型ボックスをCSSマスクで再現した話と題して公開した記事に関連したものです。

もしまだお読みでなければ先にそちらの記事をご覧ください。あわよくばシェアしていただけると嬉しいです笑

本題

さて、イベントのお題として登場したデザインがこちらです。

このデザインは、イベントに参加したスタッフの中でもどのような再現方法が考えられるか引き続き議論が交わされていました。

こちらは、古川の記事で紹介されていたmask-imageを利用した解決方法です。

IE11では動作せず、Chrome72ではジャギーが目立ち、まだ実用的とはいえません。最終的には「SVGマスクなどの方法を用いることを検討してみてはどうか」と記事は締めくくられています。

そこで本記事では比較的簡単な「いずれかが単色だった場合にスクープ型ボックスをどのように再現するか」をご紹介したいと思います。

いずれかが単色だった場合の例

こちらは、ボックスの中身が単色だった場合のサンプルです。四方のくぼみは、透明なborder-radius: 100%;の疑似要素にbox-shadowを使ってデザインを再現しています。

さくっと実装しただけではIEだと画面幅によって疑似要素やbox-shadowの間に隙間が出てきてしまいますが、ボックスの中身の繰り返しを意識しなくてよいため、単純にボックスの外側に枠をつける感覚で色の領域を伸ばしてあげれば解決できますね。

続いて、ボックスの外側が単色だったパターンです。

こちらはより簡単で、単純に背景色と同じ色をした丸い疑似要素を四方に配置しただけですね。

まとめ

今回のお題はあえてWebページとして実装しない前提で用意しましたが、それが一層よい頭の体操になり、制作スタッフ同士のコミュニケーションにもつながったようです。

デザインが異なると当然ユーザーに与える印象には差が生まれますが、似たような表現でもこうした装飾の違いが工数に多少なりとも影響を与えることがわかる良い例だったのではないでしょうか。

本記事は余談ですから、以上で簡単に終わろうと思います。次回のフロントエンドBlogをお楽しみに！