画像の加工処理をやろうとすると、サーバサイドでもJavaScriptでも面倒といった印象がありますよね。特にユーザに選ばせたり、その場でダイナミックにフィルタを適用するなんてのは相当大変です。 そこで使ってみたいのがSassmaticです。SCSSを使ってCSS3だけでフィルタリングを実現するライブラリです。

Sassmaticの使い方

使い方は簡単で、例えば以下のようにHTMLがあったとします。

<div>
  <img src="img/example.jpg"/>
</div>

そしてSCSSは以下のように定義します。

@import "compass";
@import "sassmatic.scss";

div {
  @extend %filter-sanfran;
}

imgタグではなく、その上にあるdivタグに対して適用するのがコツと言えそうです。先ほどのスクリーンショットのフィルタはプリセットで、自作もできます。

@import "compass";
@import "sassmatic.scss";

div {
  @include filter-custom(sepia(100%)); // REQUIRED but doesn't have to have a value
  @include filter-color(#ffb400, 0.5);// Filter color and opacity
  @include filter-vignette(white, 70%, 90%, 3rem); // Color, start, stop and inset boxshadow
}

こんな感じで独自のフィルタを作成して適用も可能です。

Sassmaticは元の写真は変えない、ダイナミックなフィルタなので何度でも加工できるのが特徴と言えそうです。後はパラメータだけ保存しておけば、後から何度も適用できます。写真の楽しみ方として面白そうです。

SassmaticはCSS3製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

Sassmatic - The Photo Filter SCSS Mixin Library DarbyBrown/sassmatic