[CSS]コンテンツの見せ方にも工夫が必要、CSS3を使ったかっこいいフィルタリングのチュートリアル

Post on:2012年1月12日

sponsors

複数のアイテムを特定の条件で表示したり、非表示にするフィルタリングをCSS3のエフェクトを使ってかっこよく実装するチュートリアルを紹介します。

[ad#ad-2]

チュートリアルでは3種類のエフェクトを使って、フィルタリングを実装しています。

各デモはページ上部の「ALL」「WEB DESIGN」「ILLUSTRATION」「ICON DESIGN」をクリックすると、フィルタリングを実行します。

フィルタリングを行うと、条件にあったアイテムはそのままで、あわないアイテムはフェードのアニメーションで半透明にします。

条件にあったアイテムはアニメーションでズームインし、あわないアイテムはズームアウトし半透明にします。

[ad#ad-2]

条件のボタンをクリックするとすべてのアイテムをいったん縮小し、条件にあったアイテムのみアニメーションで表示します。