ニューモフィズム・ジェネレーター

ニューモフィズム・ジェネレーター CSS
この記事は約2分で読めます。
スポンサーリンク

2020年3月現在。最近流行っているニューモフィズムのジェネレーターがあると聞き使ってみたくなった。

そもそもニューモフィズムってな~に?

ニューモーフィズムは、一昔前に流行った「スキューモーフィズム」のリアルな質感と、フラットやマテリアルデザインのようなシンプルさを組み合わせた新しいスタイル。言葉の由来も、New(新しい)+Skeumorphism(スキューモーフィズム)からきた造語。

早速使ってみよう

このニューモフィズムジェネレーターでいい感じのおしゃれ感を出そうと思う。

【DEMO】

一応CSSを

【CSS】
.demo {
position:relative;
border: 1px solid #e2e4e7;
width:100%;
height: 400px;
background: #d8b986;
}
.demo span {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width: 120px;
height: 120px;
display:block;
transition: .4s;
// ここから下がジェネレーターでコピーしたCSS
border-radius: 19px;
background: linear-gradient(225deg, #d8b986, #b69c71);
box-shadow:  -12px 12px 24px #a89068, 
             12px -12px 24px #ecca92;
}
.demo span:hover {
border-radius: 50%;
background: linear-gradient(225deg, #d8b986, #b69c71);
box-shadow:  -5px 5px 9px #63553d, 
             5px -5px 9px #ffffbd;
}
SNSフォローボタン
エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました