Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

tl;dr;

2020年初頭から注目されているデザイン、Neumorphismをご存知ですか?
広く普及しているマテリアルデザインと比較して紹介します。
マテリアルデザインは、を用いて要素を浮かび上がらせます。
一方、Neumorphism(ニューモーフィズム)では、を用いて要素の凹凸を表現します。

Neumorphism(ニューモーフィズム)の基本的なパーツはCSS3のbox-shadowを用いて簡単に実装できます。
この記事ではCSSとHTMLを用いて簡単なパーツの作成方法を紹介します。

output.gif
図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;
}

スクリーンショット 2020-06-25 11.38.18.png
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;
}

スクリーンショット 2020-06-25 11.46.13.png
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;
}

スクリーンショット 2020-06-25 12.03.31.png
Chrome83での表示結果

まとめ

Neumorphismのスタイルを生成するツール等もありますが、今回はCSSで作成しました。
注目を浴びているNeumorphismについて、webではHTMLとCSSで簡単に実現できます。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away