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

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

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

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

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

CSSCOの使い方

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

CSSCOのダウンロード

※[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などのソフトを使ってやると、結構な手間のかかるフィルタも、簡単に適用できちゃいますね。いやはや便利な時代になったものです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です