CSSの素晴らしいアイデアが満載!2014年スタイルシートのテクニックのまとめ

これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。

今年もCSSの進化がすごかったですね。

デモのアニメーション

Form Buttons with Love

ホバー・クリックすると愛に溢れるボタン。
※classの変更にスクリプトを使用しています。

デモのアニメーション

Blackout

もうこれ、僕の知ってるCSSじゃないw 100% CSSの美しい光を使ったシネマというかアート。
途中で表示される「Begin」をクリックすると、更にBlackoutの映像(と言っていい)を楽しめます。
Blackoutの説明ページもあります。

デモのアニメーション

isometric Block Effect

ブロックがぼこっと盛り上がるアイソメトリックエフェクトのボタン。

デモのアニメーション

Bouncy Button

バウンドのアニメーションがかわいいボタン、影もリアルです。
※スクリプト使用。

デモのアニメーション

Rogie

弾けるようなアニメーションでロゴが表示されます。ホバー時にも。

デモのアニメーション

Animated Fold Out Menu Labels

ソーシャルサービスのアイコンをホバーすると、折り畳まれていたラベルが表示されます。

デモのキャプチャ

Gradiance 2

背景のグラデーションが美しくアニメーションします。

デモのキャプチャ

Timeline Dummy

画像無しで作られたタイムライン。レスポンシブ対応でレイアウトも変更されます。

デモのキャプチャ

Scroll down that hole.

パララックスの面白い見せ方、ホールの中にコンテンツがスクロールで表示されます。

デモのキャプチャ

Slice link text

ホバーでリンクのテキストが変わります。アニメーションも実装方法も面白いアイデアです。

デモのキャプチャ

Floating labels -CSS only

入力欄をフォーカスするとラベルが浮き上がるのをCSSのみで実装。

デモのキャプチャ

Pure CSS, annotated linear carousel

CSSで実装された水平タイプのカルーセル。

デモのキャプチャ

Crazy Angled Button

マンガみたいな面白い形状をしたボタン。ホバーするとアニメーションで形状が変わります。

デモのキャプチャ

Brad Frost

落書き風のデザインや動きをCSSで実装。

デモのキャプチャ

Progressive blur with CSS

普通の画像にCSSで放射状や線状のブラーエフェクトを適用。

デモのキャプチャ

Perspective Background

背景にパースをつけ、映画のエンドロールのようにアニメーションで動かします。

デモのキャプチャ

Embossed inpur

エンボススタイルのかっこいい入力欄。

デモのキャプチャ

Pure CSS Blurred Video Background Login Box

動画を背景に使った半透明のパネルに配置したログインフォーム。

デモのアニメーション

3d nested navigation

3Dのアニメーションでパカッとひらく多階層のナビゲーション。

デモのアニメーション

Happy Text

ちろちろ動くテキストが、ホバーするとウェーブします。

デモのアニメーション

Newton's Cradle Loader

かわいいアニメーションで動くローダー。画像やアイコンフォントは無し。

デモのアニメーション

CSS3 Pseudo Sound Bars

かわいいアニメーションで動くローダー。画像やアイコンフォントは無し。

デモのキャプチャ

Border Fun

ページいっぱいに斜めの対角線で区切った半透明のパネルを配置します。

デモのキャプチャ

Better bullets for lists

リストで配置した各項目をホバーするとハイライトします。

デモのキャプチャ

CSS fullscreen sections

縦長ページの各セクションをブラウザいっぱいやちょっとだけ次を表示する高さに設定します。

デモのキャプチャ

Dynamic Sticky Footer

フッタを常に同じ高さで表示します。

デモのキャプチャ

CSS Centering Methods

CSSで天地中央に配置する7つの方法。

デモのキャプチャ

Halvsies Hover

ホバーで斜めの区切りをアニメーションでスライドさせます。

デモのキャプチャ

CSS only picture wall

CSSで実装されたアニメーションで動くピクチャウォール。

デモのアニメーション

rotate panel

パネルをぶらーんとアニメーションで表示します。

デモのアニメーション

CSS Image Zoom

ホバーすると画像を拡大し、テキストをフェードさせます。

デモのキャプチャ

Image hover effect

アニメーションgifにしたら大容量になってしまったので静止画で。美しいフェードのエフェクトで画像を変更します。

デモのキャプチャ

Gradient Ghost Buttons

ソリッドなラインのゴーストボタンに美しいグラデーションを与えます。

top of page

©2017 coliss