Sassmaticで簡単に画像フィルターを実現

Jan 26 2015

sass
css

CSSで画像を加工しようと思ったらけっこう大変です。そこでSassmaticを使います。SassmaticはCSS3だけで画像に色々なフィルターを掛けることができるライブラリです。

インストール

GithubからSassmaticをダウンロードします。
必要なファイルは_sassmatic.scssです。

https://github.com/DarbyBrown/sassmatic.git

使い方

使い方は簡単で、style.scssなどでcompassと_sassmatic.scssとimportで読みこむだけです。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sassmatic</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="img-filter01"><img src="img/sample.jpeg" alt="" ></div>
</body>
</html>

style.scss

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

.img-filter01 {@extend %filter-sanfran;}

これでscssをコンパイルすると画像フィルターが完成です。

これが元画像。

Sanfran

@extend %filter-sanfran

Washout

@extend %filter-washout

Deadwood

@extend %filter-deadwood

Neptune

@extend %filter-neptune

Warming

@extend %filter-warming

Casablanca

@extend %filter-casablanca

なんだか余計な背景色がついてしまいますね。これはdiv要素に画像と同じ幅を指定してあげればOKです。

.img-filter {
    width: 600px;
    marign: 0 auto;
}

Custom Filter

フィルターをカスタムすることもできます。

.img-filter01{
  @include filter-custom(sepia(100%));
  @include filter-color(#ffb400, 0.5);
  @include filter-vignette(white, 70%, 90%, 3rem);
}

viewpoint