コピペで動く!CSSで書かれたおしゃれなスマホデザイン8選!


スマホが普及して、インターネットもスマートフォンで見る人が多くなった近年。スマホに対応したおしゃれなホームページも増えてきました。そこでそんなスマホ用のデザインを厳選して紹介します!

1.Secret Project

See the Pen Secret Project by Mohan Khadka (@khadkamhn) on CodePen.

2.Pure CSS Questionnaire Concept (hover items)t

コピペで動きます。

See the Pen Pure CSS Questionnaire Concept (hover items) by Nikolay Talanov (@suez) on CodePen.

3.Pull Down to Refresh (Paper Plane)

コピペで動きます。紙飛行機が飛んで行くかわいいUIです。コピペでも動きます。

See the Pen Pull Down to Refresh (Paper Plane) by Nikolay Talanov (@suez) on CodePen.

4.CSS-only Weather App Concept

CSSで動いており、コピペで動きました。スマホ画面に表示させていてホバーすると動くおしゃれなデザインですね!

See the Pen CSS-only Weather App Concept by David Khourshid (@davidkpiano) on CodePen.

5.Lock Screen

M字を書くとロックが溶けてHome画面に遷移します!コピーしても動くので是非試してみて!

See the Pen Lock Screen by Mohan Khadka (@khadkamhn) on CodePen.

6.Mobile menu, CSS only

See the Pen Mobile menu, CSS only by Poppe1219 Web & Backend Developer (@poppe1219) on CodePen.

7.Responsive Navigation Ideas

たくさんのレスポンシブなメニューデザインがあるのですが、残念ながらコピペしても動きませんでした。

See the Pen Responsive Navigation Ideas by Andrzej Dubiel (@itsfame) on CodePen.

8.React UI

See the Pen React UI by Matthew Greenberg (@mattgreenberg) on CodePen.

9.App Showcase

See the Pen App Showcase by Riccardo Zanutta (@rickzanutta) on CodePen.

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です