[CSS]2013年、素敵なアイデア満載のスタイルシートのテクニックのまとめ

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

利用する時にネックになるのがIEですが、来年になるとXPのサポートが終了、そういえばGmailなどのGoogle AppsでのIE9のサポートも終了しました(参考:サポートされているブラウザ -Google)。来年はより多くのテクニックが利用できるようになりそうですね。

というわけで、まずは今年もクリエイティブなCSSをたくさん生み出したCodropsからご紹介。

デモのキャプチャ

Simple Icon Hover Effects
デモページ

アイコンのホバー時に、CSS3アニメーションを使ったシンプルながら面白い9種類のエフェクト。

デモのキャプチャ

Creative Link Effects
デモページ

フラットなデザインにぴったりなリンクの21種類のエフェクト。

デモのキャプチャ

Creative Button Effects
デモページ

上記と同シリーズの今度はボタンのエフェクト。フラットだと難しいボタンも楽しくなります。

デモのキャプチャ

Progress Button Styles
デモページ

ボタンのクリックでプログレスバーを表示する18種類のエフェクト。いろいろなアイデアがあるものです。

デモのキャプチャ

Creative Loading Effects
デモページ

ローディング時のアニメーションのさまざまなエフェクト。↑はパイチャート型のエフェクト。

デモのキャプチャ

Nifty Modal Window Effects
デモページ

モーダルウインドウを表示するさまざまなエフェクト。フェードやスライド、くるっと回転したり、全面表示にしたり。

デモのキャプチャ

A Collection of Separator Styles
デモページ

1ページで構成されたウェブサイト用のコンテンツごとの区切りのスタイル。斜め、曲線、ジグザグ、図形を使ったものなどアイデア満載。

デモのキャプチャ

SpinKit
デモページ

CSS3アニメーションを使ったちょっとかわいいローディングのエフェクト8種類。

デモのキャプチャ

InContent
デモページ

半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のアニメーション。

デモのキャプチャ

CSS Raindrops

窓越しの雨粒がどんどん増えていく癒やし系スタイルシート。

デモのキャプチャ

radio click through

画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダー。もちろんスクリプト無し。

デモのキャプチャ

Dynamic Inside Blur Pure CSS
デモページ

背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装。

デモのキャプチャ

Animated CSS3 Perspective Menu
デモ:水平デモ:垂直

コンテンツを水平・垂直にぐぐぐっと傾けてナビゲーションを表示します。

デモのアニメーション

Opening type

画像は一切使用せず、その文字をホバーするとパタっと開きます。日本語でもOK!

デモのキャプチャ

CSS3 Card Deck Drop Down

カード状に重なったアイテムがぱかっと開いて、するすると落ちてくるドロップダウン。

デモのキャプチャ

Gradient Borders

p要素などで実装したテキストの天地に、半透明の美しいグラデーションのボーダーと背景を適用。

デモのキャプチャ

Pure CSS Navigation Overlay

一見普通のミニマルなナビゲーションですが、オーバーレイのナビゲーションをかっこいいアニメーションで表示します。

デモのキャプチャ

CSS Flip Boards
デモページ

パネルの表と裏をくるっと水平・垂直に軽快なアニメーションでひっくり返します。

デモのキャプチャ

Fixed image backgrounds

背景を固定させて、カーテンを持ち上げるように次々にコンテンツを表示させます。

デモのキャプチャ

CSS Border Radius Exercise

border-radiusを使って、角丸ではなく落書き風にボーダーをデザイン。

デモのキャプチャ

CSS Displaced Background

HTMLは要素一つだけ、枠線から背景をずらして、ゆる〜い感じにデザイン。

デモのキャプチャ

Body Border, Rounded Inside
デモページ

ページが長くても、ページ全体を角丸のボーダーで囲みます。

デモのアニメーション

Fun with CSS 3D Box

パネルをくるっと垂直・水平・斜めに回転させます。

デモのキャプチャ

Depth

ブラウザ上枠のすぐ下、ページの上部に美しいシャドウを加え、奥行きを与えます。

デモのアニメーション

Twitter Button Concept
デモページ

ホバーすると、パネルがアニメーションでパタッと開き、中からボタンが現れます。

デモのキャプチャ

Who Says the Web is Just for Squares?
デモページ

スタイルシートだけで斜めのダイヤモンド状のグリッドを実装します。

デモのアニメーション

CSS3 Social Slidebar

ソーシャルサービスのボタンをサイドに配置し、ぱたっとかわいいアニメーションで開きます。

デモのキャプチャ

menu following cursor

スクリプト無しで、カーソルに追従するナビゲーション。

top of page

©2017 coliss