クラスを追加するだけで写真にフィルタをかけられるCSSライブラリ「CSSCO」

CSSCOは、クラスを追加するだけで写真にフィルタをかけることができるCSSライブラリです。Photoshopなどのソフトを使わなくても、CSSを読み込んでクラスを追加するだけで写真にフィルタをかけることができます。

フィルタのデモは公式サイトをご参照ください。

CSSCOの使い方

CSSCOの配布サイトにアクセスし、[DOWNLOAD]からファイルをダウンロードします。

※[DOWNLOAD]ボタンを右クリックして[名前を付けてリンク先を保存]すると、cssco.cssがダウンロードされます。

<head>～<>/head>内に以下を記述して、CSSファイルを読み込みます。

<link href="path/to/cssco.css" rel="stylesheet" type="text/css">

フィルタをかけたい画像をdivで内包し、クラスを付与します。


<div class="cssco cssco--c1">
 <img src="image.png"/>
</div>

クラスのcsscoは必須で、cssco–c1の部分は各フィルタ毎に指定が異なります。指定するクラス名は公式サイトのサンプルの下に書いてあるので、そちらを参考にしてください。

Photoshopなどのソフトを使ってやると、結構な手間のかかるフィルタも、簡単に適用できちゃいますね。いやはや便利な時代になったものです。