CSSで簡単に実装できる、ニューモーフィズムの繊細なデザインでつくられたフォーム -Neomorphic Form

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

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

Neomorphic Form

ニューモーフィズムのスタイルは、dribbbleなどでも多く見かけます。
かなり繊細なデザインなのでシャドウや、場合によっては背景とは少し違うカラーにした方がいいかもしれませんね。

Neomorphism Shots

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

※ボタンをクリックしても動作しません。

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

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

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