サクっと！CSSでNeumorphismのボタンを作る

8662 ワード
Neumorphism HTML CSS 初心者 CSS3 HTML テキストリンク

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を示します。

index.html
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
  <div>button</div>
</body>
neumorphism.css
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を示します。

index.html
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
  <div>button</div>
</body>
neumorphism.css
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での表示結果

組み合わせて応用

上述の凹凸の表現それぞれを組み合わせることで、応用した表現も可能です。
以下に例を示します。

index.html
<link rel="stylesheet" type="text/css" href="neumorphism.css" />
<body>
  <div>button</div>
</body>
neumorphism.css
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で簡単に実現できます。

できる限り多くの方の参考になればと思い、シンプルで簡単に記述しました。