8ヶ月前に投稿

Neumorphism の CSSを生成できる Generator

2020年2月17日

この記事は約 2 分で読めます。

3

Neumorphism ってなに?
「New」と「Skeuomorphism
を掛け合わせた造語で、

「ニューモーフィズム」と
読むそうです。

特徴としては、
「要素が背景と同じで、
シャドウを与えて押し出されたような
窪んだようなスタイル」の
事を言うようです。

新たなデザイントレンドとして
特に海外では去年の年末ぐらいから
注目されているのだそう。

このデザイン、要素に明暗2色の
ドロップシャドウを付けるとか、
要素は浮いていないとか、
いくつかのルールと定義があるようですが、
「新鮮でいい感じだから」という理由で
注目されているそうです。

以下の記事に詳しく書かれています。

そんな
ニューモーフィズムな
スタイルを実装するCSSを
簡単に生成できる
ジェネレーターを紹介する
記事が多いです。

わたしの Respectでも、
三つのブログが記事として
取り上げています。

それだけ
注目度が高いのですね。

使い方はとっても簡単で、
生成したCSSはコピペできるので
試しに使ってみました。

For example Pressed
border-radius:50px;
background:#fff;
box-shadow:inset 5px 5px 15px #ccc, 
inset -5px -5px 15px #fff;

注: 背景を白は Neumorphism の
定義からは外れるようです。

For example Background: #db0cdf

Background を #db0cdf にすると
分かりやすくなったかな?

こんな感じにシャドウを使い
窪み感が出たのが分かります。

このGenerator、
注目のデザイントレンドを
ブログに取り入れてみたい方は
使ってみてはいかがでしょう?

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
Neumorphism の CSSを生成できる Generator