最近注目されているニューモーフィズムの繊細なデザインでつくられたフォーム -Neomorphic Form

ニューモーフィズム(Neuomorphism)が去年の暮れあたりから新しいスキューモーフィズムとして注目されています。その特徴は要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。

このニューモーフィズムをCSSで実装したフォームのデモが公開されていたので、紹介します。

サイトのキャプチャ

Neomorphic Form

ニューモーフィズムとは

ニューモーフィズム(Neuomorphism)という言葉は、UIのトレンドで「新しいスキューモーフィズム」としてJason Kelleyがコメントした「Neuomorphism?」がその起源です。

その特徴は要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。ニューモーフィズムのスタイルは、dribbbleやBehanceなどでも多く見かけます。

かなり繊細なデザインなのでシャドウや、場合によっては背景とは少し違うカラーにした方がいいかもしれませんね。

ニューモーフィズムのデザイン方法と実装方法をやさしく解説

ニューモーフィズムをデザインする時に知っておきたいポイント、CSSでの実装方法

ニューモーフィズムの繊細なデザインでつくられたフォーム

ニューモーフィズムのスタイルで実装されたフォームはコピペで簡単に利用できるので、試しに実装してみました。




※デモなので、ボタンをクリックしても動作はしません。

実装コードは、下記の通り。
HTMLは、非常にシンプルです。

CSSは、ニューモーフィズムの見た目を作るためには要素と背景を同じにして、あとはbox-shadowとborder-radiusを使用するくらいでしょうか。

ニューモーフィズムのデモ

実際のデモは、下記でご覧ください。

See the Pen
Neomorphic Form
by Swapnil (@swapnet)
on CodePen.

sponsors

top of page

©2020 coliss