Web制作者がチェックしておきたい、CSSのライブラリのまとめ

ページのレイアウト、アニメーションをはじめ、エフェクトやフィルターなど、ここ数年でCSSでできる表現の幅がかなり広がりました。

Web制作に携わる人がチェックしておきたい、これからどんどん取り入れていきたいCSSのライブラリを紹介します。

CSSのライブラリのまとめ 2016年秋

イラスト: Girls Design Materials

サイトのキャプチャ

Driveaway -GitHub
デモページ

レスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できます。CSSアニメーションを使ったインタラクションも豊富に用意されており、パネルが回転する「Flip」、パネルにフォーカスがあたる「Focus」、鼓動のように動く「Pulse」など、楽しませてくれます。

サイトのキャプチャ

Colofilter.css
Colofilter.css -GitHub

去年から増えてきたフィルター関連も実用的なものが増えてきました。CSSのblend-modesプロパティを使ってデュオトーンのカラーフィルターを画像に適用します。

サイトのキャプチャ

CSSCO
CSSCO -GitHub

こちらもCSSのフィルターを使ったもので、写真画像の色合い・彩度・輝度などを調整して魅力的に表示します。

サイトのキャプチャ

imagehover.css
imagehover.css -GitHub

画像をホバーすると、テキストをアニメーションで表示されるエフェクトが44種類用意された超軽量のスタイルシート。classを加えるだけの簡単実装で、画像にリンクを与えることもできます。

サイトのキャプチャ

image hover 63 effects

上記と同様に画像をホバーのエフェクトで、こちらは全部で63種類。下の方にかなり面白いエフェクトがあります。

サイトのキャプチャ

CSShake
CSShake -GitHub

ページ上のあらゆる要素をガクブルさせるスタイルシート。新しいバージョンの1.5ではさまざまな改良が加えられ、より使いやすくなっています。
今月に、最新の1.5.1がリリースされています。

サイトのキャプチャ

Rocket
Rocket -GitHub

要素が他の要素に移動する際に、さまざまなアニメーションを適用できます。
名前のように、ロケットが飛ぶようなイメージです。

サイトのキャプチャ

Shift.css

HTMLのさまざまな要素を使って、タイムラインベースのアニメーションでコンテンツやレイアウトを作成できます。

サイトのキャプチャ

Tuesday
Tuesday -GitHub

さまざまなUI要素の表示、非表示にさまざまなアニメーションを適用するライブラリ。アニメーションはすべて、ユーザーのいらいらが募らないように短時間で終了するように実装されているのもポイントです。

サイトのキャプチャ

Transformicons
Transformicons -GitHub

CSSやSVGで実装されたアイコンをアニメーションで変形させます。iOSやAndroidでももちろん動作します。

サイトのキャプチャ

voxel.css
voxel.css -GitHub

最後は、3DアニメーションをCSSで実現するライブラリ。しかも3.36KBで軽量です。
レンダリングはスクリプトで実装していますが、CSSの可能性が大きく広がりますね。

top of page

©2017 coliss