Alessio Atzeni | Web Designer & Front-end Developer

Webデザイン３つの良いとこ : 3 Good Point!

1. 余白を大きく使って訴えかけるフラットWebデザイン
2. クルッと回るホバーアニメーションをCSSで実装
3. ローディングがポップで素晴らしい

私はWebデザインのココを見た！

• Tweet
• 

フラットUIが素敵なポートフォリオWebデザイン。余白をすごいうまく使用していますよね。たまに魅せるローディングやホバー時のアクションなどは、ポップで癒されるくらい洗練されています。

訴えかける余白+フラットWebデザイン

フラットUIが素敵なのですが、それにもまして特徴的なのが大きく取られた余白。

ページごとにそれに合わせた言葉やアイコンを置くことで、非常にキャッチーに印象を残します。フラットUIと余白ってすごく合いますね。このサイトはそれをうまく利用している。

クルッと回るホバーが素敵

ところどころ、正方形のWorkサムネイルなどに対して、ホバーを行うとくるくる回るアニメーションが使われています。

これってjQueryで出来てるのかなーと思ったら、CSS3で実装された、transform:rotateを利用していました。

実際に使われているのは以下のコード

-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);

各ブラウザに対応するため、ベンダープレフィックスをつけていますが、基本は、transform:rotate;です。これを利用して、クルッとオレンジ色の要素を反転させているんですねー。きれいです。

ローディングがポップで素晴らしい

ローディングがとっても良い！ボールがポンポン跳ねているのですが、ちょっとどうやってるの！？と思ったのですが、jPreLoaderなるものを利用しているようです。 jPreLoader ちょっとこれは今度使い方をよく調べよう。すごい便利そう。

このようなフラットWebデザイン、すごく流行っていますが、本当に綺麗に映りますよね。そしてこのサイトは、グレーとオレンジで色を統一しているので、その点もすごくミニマルに仕上がっており、より印象がよくなっています。

フラットUI＋余白、CSS3、jPreLoaderなどなど、シンプルな中に沢山の技が詰まった非常に勉強になるWebデザインでした！

この素敵なWebデザイン、「いいな」と思いました？
その気持ちをポチッと残しておきましょう！

• ツイート
•