HTML

CSS 要素を Neumorphism 風にする方法

CSS 要素を Neumorphism 風にする方法

CSS で要素を Neumorphism 風にする方法を紹介します。
例えば、スキューモーフィズムな感じで要素を Neumorphism 風に整えたい時に便利な方法です。

  1. CSS で要素を Neumorphism 風にする方法
    1. 解説
  2. マウスオーバーに対応する方法

CSS で要素を Neumorphism 風にする方法

要素を Neumorphism 風にするには box-shadow を使用します。
実際の見た目はこんな感じになります。

ベースとなるHTMLとCSSの指定は次のようになります。

<div class="Neumorphism"></div>
.Neumorphism {
background-color: #8cc7f6;
box-shadow:
-8px -8px 16px 0px #b9dcf9,
8px 8px 16px 0px #5eb0f2;
}

上記は Neumorphism 風のみの指定です、要素の形を変更する場合は任意の値を追加してください。

解説

Neumorphism 風に仕上げるには、フラットな場所から浮き出る感じを再現します。
出来上がりのイメージは、フォトショップの効果「ベベル(外側)」を適用した感じが近いですが、CSS でベベル表現を再現するのは難しいので「ドロップシャドウ」の複数指定で挑戦します。

Neumorphism 風に仕上げるには CSS の box-shadow を使って、対象の要素の外側に「ハイライト」と「シャドウ」を追加します。

Neumorphism 風を再現するには色のチョイスが重要です。
ただ単にハイライトを「白」シャドウを「黒」に指定しただけだと、ちょっと違和感がでてしまいます。色を透過しても同様です。
特にシャドウの色は、周りの色の反射がシャドウの色にも現れるので、キーカラーを同色とした濃い色を作る必要があります。
まずはキーカラーを決めてそのを元にしたハイライト・シャドウカラーを用意してください。

box-shadow はカンマで区切ると複数の指定が可能になります。
最初にハイライト、続いてシャドウを指定して完成です。

マウスオーバーに対応する方法

Neumorphism 風をボタンとしても使いたい場合は、マウスオーバーに対応するためのコードを追加します。

CSSの指定は次のようになります。

.Neumorphism {
background-color: #8cc7f6;
box-shadow:
-8px -8px 16px 0px #b9dcf9,
8px 8px 16px 0px #5eb0f2;
transition: box-shadow .4s ease-in-out;
}
.Neumorphism:hover {
background-color: #8cc7f6;
box-shadow:
-1px -1px 2px 0px #b9dcf9,
1px 1px 2px 0px #5eb0f2;
cursor: pointer;
}

ベースのCSSには transition を追加して、マウスオーバー時の動きをつけます。
マウスオーバー時は、影の広がりを縮めることで、エリアを触っている感じを演出します。

まとめ

CSS で要素を Neumorphism 風にする方法を紹介しま

この記事をシェアする