tl;dr;
2020年初頭から注目されているデザイン、Neumorphismをご存知ですか？
広く普及しているマテリアルデザインと比較して紹介します。
マテリアルデザインは、影を用いて要素を浮かび上がらせます。
一方、Neumorphism(ニューモーフィズム)では、影と光を用いて要素の凹凸を表現します。
Neumorphism(ニューモーフィズム)の基本的なパーツはCSS3のbox-shadowを用いて簡単に実装できます。
この記事ではCSSとHTMLを用いて簡単なパーツの作成方法を紹介します。
図1 : Neumorphismを用いたアプリケーション例 (neutodo.com)
膨らみの表現
Neumorphism(ニューモーフィズム)の膨らみの表現について解説します。
次の3ステップで基本的な要素が実現できます。
1. border-radiusを指定して要素の四隅に丸みをつける。
2. box-shadowを用いて、要素の左上（光を当てる場所）に背景色よりも明るい色をつける。
3. box-shadowを用いて、要素の右下（影を落とす場所）に背景色よりも暗い色をつける。
box-shadowで指定する値を調整することで、凹凸の高さやなだらかさを調節できます。
box-shadowの詳しい説明は以下のようなドキュメントに譲ります。
box-shadowについて: https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow
以下に簡単なHTMLとCSSを示します。
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
<div>button</div>
</body>
body {
background-color: #dddddd;
}
div {
margin: 50px;
padding: 10px;
width: 50px;
border-radius: 5px;
box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff;
}
Chrome83での表示結果
凹みの表現
Neumorphism(ニューモーフィズム)の凹みの表現について解説します。
次の3ステップで基本的な要素が実現できます。
1. border-radiusを指定して要素の四隅に丸みをつける。
2. box-shadow insetを用いて、要素の右下内側（光を当てる場所）に背景色よりも明るい色をつける。
3. box-shadow insetを用いて、要素の左上内側（影を落とす場所）に背景色よりも暗い色をつける。
以下に簡単なHTMLとCSSを示します。
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
<div>button</div>
</body>
body {
background-color: #dddddd;
}
div {
margin: 50px;
padding: 10px;
width: 50px;
border-radius: 5px;
box-shadow: inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}
Chrome83での表示結果
組み合わせて応用
上述の凹凸の表現それぞれを組み合わせることで、応用した表現も可能です。
以下に例を示します。
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
<div>button</div>
</body>
body {
background-color: #dddddd;
}
div {
margin: 50px;
padding: 10px;
width: 50px;
border-radius: 15px;
border: 5px solid #dddddd;
box-shadow: 5px 5px 10px #bbbbbb, -5px -5px 10px #ffffff,
inset 3px 3px 5px #bbbbbb, inset -3px -3px 5px #ffffff;
}
Chrome83での表示結果
まとめ
Neumorphismのスタイルを生成するツール等もありますが、今回はCSSで作成しました。
注目を浴びているNeumorphismについて、webではHTMLとCSSで簡単に実現できます。
できる限り多くの方の参考になればと思い、シンプルで簡単に記述しました。