Web制作者がチェックしておきたい、CSSのライブラリのまとめ
Post on:2016年10月19日
sponsors
ページのレイアウト、アニメーションをはじめ、エフェクトやフィルターなど、ここ数年でCSSでできる表現の幅がかなり広がりました。
Web制作に携わる人がチェックしておきたい、これからどんどん取り入れていきたいCSSのライブラリを紹介します。
イラスト: Girls Design Materials
レスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できます。CSSアニメーションを使ったインタラクションも豊富に用意されており、パネルが回転する「Flip」、パネルにフォーカスがあたる「Focus」、鼓動のように動く「Pulse」など、楽しませてくれます。
Colofilter.css
Colofilter.css -GitHub
去年から増えてきたフィルター関連も実用的なものが増えてきました。CSSのblend-modesプロパティを使ってデュオトーンのカラーフィルターを画像に適用します。
こちらもCSSのフィルターを使ったもので、写真画像の色合い・彩度・輝度などを調整して魅力的に表示します。
imagehover.css
imagehover.css -GitHub
画像をホバーすると、テキストをアニメーションで表示されるエフェクトが44種類用意された超軽量のスタイルシート。classを加えるだけの簡単実装で、画像にリンクを与えることもできます。
上記と同様に画像をホバーのエフェクトで、こちらは全部で63種類。下の方にかなり面白いエフェクトがあります。
ページ上のあらゆる要素をｶﾞｸﾌﾞﾙさせるスタイルシート。新しいバージョンの1.5ではさまざまな改良が加えられ、より使いやすくなっています。
今月に、最新の1.5.1がリリースされています。
要素が他の要素に移動する際に、さまざまなアニメーションを適用できます。
名前のように、ロケットが飛ぶようなイメージです。
HTMLのさまざまな要素を使って、タイムラインベースのアニメーションでコンテンツやレイアウトを作成できます。
さまざまなUI要素の表示、非表示にさまざまなアニメーションを適用するライブラリ。アニメーションはすべて、ユーザーのいらいらが募らないように短時間で終了するように実装されているのもポイントです。
Transformicons
Transformicons -GitHub
CSSやSVGで実装されたアイコンをアニメーションで変形させます。iOSやAndroidでももちろん動作します。
最後は、3DアニメーションをCSSで実現するライブラリ。しかも3.36KBで軽量です。
レンダリングはスクリプトで実装していますが、CSSの可能性が大きく広がりますね。
sponsors
