CodePenで公開されている、Neumorphism(ニューモーフィズム)の見栄えを取り入れたデモ 20

Tips

CodePenで公開されている、Neumorphism(ニューモーフィズム)の見栄えを取り入れたデモ 20

新たなデザイントレンドとして特に海外では去年の年末ぐらいから注目されているNeumorphism(ニューモーフィズム)を取り入れたデモを、CodePenで公開されている中からいくつか紹介します。
実装・デザイン時のポイントとなるシャドウの使い方はもちろん、ボタンならhover時とactive時、フィールドならfocus時といったようにデモによってはユーザーの行動に応じて見栄えを変化させているものもあるので、そういった点でも参考になります。

※スマートフォンやタブレットでも確認ができないというわけではないですが、動作確認などはPC環境での閲覧推奨です。

Payment App (Neumorphism)

See the Pen Payment App (Neumorphism) by Steven Brannum (@sdbrannum) on CodePen.

Neumorphism Weather App

See the Pen Neumorphism Weather App by Travis Williamson (@travisw) on CodePen.

Neumorphism Soft UI Music Player

Neomorphic Form

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

Neumorphism Calculator UI

See the Pen Neumorphism Calculator UI by Tirso Lecointere (@tirsolecointere) on CodePen.

A bit of neumorphism

See the Pen A bit of neumorphism by Damir (@drovosek2703) on CodePen.

neumorph test

See the Pen neumorph test by victor (@VictorUx) on CodePen.

Neumorphism

See the Pen Neumorphism by Dannie Vinther (@dannievinther) on CodePen.

Neumorphism

See the Pen Neumorphism by andrewbridge (@andrewbridge) on CodePen.

Neumorphic

See the Pen Neumorphic by Amber Stickel (@hiamber) on CodePen.

Neumorphism Soft UI Buttons

See the Pen Neumorphism Soft UI Buttons by Moustafa Jazzar (@MoustafaJazzar) on CodePen.

Neumorphic Buttons

See the Pen Neumorphic Buttons by Dev Loop (@dev_loop) on CodePen.

Neumorphism Button

See the Pen Neumorphism Button by Naoya (@nxworld) on CodePen.

Neumorphism sass mixin

See the Pen Neumorphism sass mixin by Simone Maranzana (@simo_m) on CodePen.

Neumorphism and toggles

See the Pen Neumorphism and toggles by Ryan (@ryanparag) on CodePen.

Neumorphism menu

See the Pen Neumorphism menu by Wouter (@wouterXD) on CodePen.

Neumorphism Button

See the Pen Neumorphism Button by Sebastian Piskaty (@sebastian-piskaty) on CodePen.

css Neumorphism design practice 02

See the Pen css Neumorphism design practice 02 by CMYK350dpi (@AYV) on CodePen.

Neuomorphic Checkboxes

See the Pen Neuomorphic Checkboxes by Braydon Coyer (@braydoncoyer) on CodePen.

Neumorphism | Soft UI

See the Pen Neumorphism | Soft UI by Atul Prajapati (@atulcodex) on CodePen.


ちなみに、上で紹介してきたような実装コードなどよりもニューモーフィズムを取り入れたデザインを多く見たい場合は、DribbbleやBehanceで検索すると様々なデザインを見ることができます。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.