on:2020年1月31日sponsorsニューモーフィズム(Neuomorphism)が去年の暮れあたりから新しいスキューモーフィズムとして注目されています。その特徴は要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。このニューモーフィズムをCSSで実装したフォームのデモが公開されていたので、紹介します。Kelleyがコメントした「Neuomorphism?」がその起源です。その特徴は要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。ニューモーフィズムのスタイルは、dribbbleやBehanceなどでも多く見かけます。繊細なデザインなのでシャドウや、場合によっては背景とは少し違うカラーにした方がいいかもしれませんね。Shotsニューモーフィズムの繊細なデザインでつくられたフォームニューモーフィズムのスタイルで実装されたフォームはコピペで簡単に利用できるので、試しに実装してみました。ボタン※デモなので、ボタンをクリックしても動作はしません。実装コードは、下記の通り。HTMLは、非常にシンプルです。type="button">ボタン</button></form>CSSは、ニューモーフィズムの見た目を作るためには要素と背景を同じにして、あとはbox-shadowとborder-radiusを使用するくらいでしょうか。#FFF;}ニューモーフィズムのデモ実際のデモは、下記でご覧ください。