CSS 要素をニューモーフィズム風にする方法
最終更新日 - 公開日 2020.01.16
by
CSS で要素をニューモーフィズム（Neumorphism）風にする方法を紹介します。
例えば、要素を背景に馴染ませた感じのボタンを作りたい時に便利な方法です。
CSS で要素をニューモーフィズム風にする方法
スキューモーフィズムのスタイルの一つ、要素をニューモーフィズム風にするには box-shadow を使用します。
実際の見た目はこんな感じになります。
ベースとなるHTMLとCSSの指定は次のようになります。
<div class="Neumorphism"></div>
.Neumorphism {
background-color: #8cc7f6;
box-shadow:
-8px -8px 16px 0px #b9dcf9,
8px 8px 16px 0px #5eb0f2;
}
上記はニューモーフィズム風のみの指定になります。
影を内側に向ける場合は inset を指定します。
.Neumorphism-inset {
background-color: #8cc7f6;
box-shadow:
inset -8px -8px 16px 0px #b9dcf9,
inset 8px 8px 16px 0px #5eb0f2;
}
解説
ニューモーフィズム風に仕上げるには、フラットな場所から浮き出る感じを再現します。
出来上がりのイメージは、フォトショップの効果「ベベル（外側）」を適用した感じが近いですが、CSS でベベル表現を再現するのは難しいので「ドロップシャドウ」の複数指定で挑戦します。
Neumorphism 風に仕上げるには CSS の box-shadow を使って、対象の要素の外側に「ハイライト」と「シャドウ」を追加します。
ニューモーフィズム風を再現するには色のチョイスが重要です。
ただ単にハイライトを「白」シャドウを「黒」に指定しただけだと、ちょっと違和感がでてしまいます。色を透過しても同様です。
特にシャドウの色は、周りの色の反射がシャドウの色にも現れるので、キーカラーを同色とした濃い色を作る必要があります。
まずはキーカラーを決めてそのを元にしたハイライト・シャドウカラーを用意してください。
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にはニューモーフィズムを追加して、マウスオーバー時の動きをつけます。
マウスオーバー時は、影の広がりを縮めることで、エリアを触っている感じを演出します。
まとめ
CSS で要素をニューモーフィズム風にする方法を紹介しました。
