驚きのクオリティで画像にエフェクトが適用できる、CSSのブレンドモードを使った実装テクニックのまとめ

サイト構築 -CSS

Post on:2016年11月29日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

下記の4枚は、元の写真画像にCSSのブレンドモードや画像フィルタを適用したキャプチャです。
鉛筆画、色鉛筆画、水彩画、黒板（画？）など、かなりのクオリティで画像にエフェクトが適用できるスタイルシートのテクニックを紹介します。

Image Effects with CSS

まずは、元となる写真画像。

画像: Point Reyes Lighthouse

この画像に、鉛筆画のエフェクトを適用してみます。

HTML

HTMLは非常にシンプルです。
仕組みとしては、img要素の画像に適用するのではなく、背景画像にエフェクトを適用するので、コンテナが必ず必要です。

<div class="pencil-effect">
	<img src="photo.jpg">
</div>

</div>

CSS

「photo.jpg」を使用する画像のURIに変更して、ご利用ください。
あと、img要素の「opacity: 0;」はお忘れなく。

.pencil-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (background-blend-mode: difference) {
  .pencil-effect {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
    box-shadow: inset 0 0 0 1px black;
  }
}

[class$=-effect] img {
	vertical-align: top !important;
	margin: 0 !important;
	opacity: 0 !important;
}

.pencil-effect {

background-size: cover;

background-position: center;

}

@supports (filter: invert(1)) and (background-blend-mode: difference) {

.pencil-effect {

background-blend-mode: difference;

background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);

filter: brightness(2) invert(1) grayscale(1);

box-shadow: inset 0 0 0 1px black;

}

[class$=-effect] img {

vertical-align: top !important;

margin: 0 !important;

opacity: 0 !important;

}

続いて、色鉛筆。
いい感じですね。元の写真によってはフィルタ値を調整する方がよいと思います。

.colored-pencil-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (mix-blend-mode: color) {
  .colored-pencil-effect {
    position: relative;
  }
  .colored-pencil-effect:before, .colored-pencil-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    box-shadow: inset 0 0 0 1px black;
  }
  .colored-pencil-effect:before {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
  }
  .colored-pencil-effect:after {
    background: inherit;
    mix-blend-mode: color;
  }
}

.colored-pencil-effect {

background-size: cover;

background-position: center;

}

@supports (filter: invert(1)) and (mix-blend-mode: color) {

.colored-pencil-effect {

position: relative;

}

.colored-pencil-effect:before, .colored-pencil-effect:after {

display: block;

content: "";

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-size: cover;

box-shadow: inset 0 0 0 1px black;

}

.colored-pencil-effect:before {

background-blend-mode: difference;

background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);

filter: brightness(2) invert(1) grayscale(1);

}

.colored-pencil-effect:after {

background: inherit;

mix-blend-mode: color;

}

続いて、水彩画。
こんなに美しくエフェクトが適用できるんですね。

.watercolor-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
  .watercolor-effect {
    position: relative;
    overflow: hidden;
  }
  .watercolor-effect:before, .watercolor-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
  }
  .watercolor-effect:before {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
    box-shadow: inset 0 0 0 1px black;
  }
  .watercolor-effect:after {
    background-image: url(photo.jpg);
    background-position: center;
    mix-blend-mode: multiply;
    filter: brightness(1.3) blur(2px) contrast(2);
  }
}

.watercolor-effect {

background-size: cover;

background-position: center;

}

@supports (filter: blur(2px)) and (mix-blend-mode: multiply) {

.watercolor-effect {

position: relative;

overflow: hidden;

}

.watercolor-effect:before, .watercolor-effect:after {

display: block;

content: "";

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-size: cover;

}

.watercolor-effect:before {

background-blend-mode: difference;

background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);

filter: brightness(2) invert(1) grayscale(1);

box-shadow: inset 0 0 0 1px black;

}

.watercolor-effect:after {

background-position: center;

mix-blend-mode: multiply;

filter: brightness(1.3) blur(2px) contrast(2);

}

最後に、黒板画。
黒板画は、シンプルな写真の方がいい感じです。

.chalkboard-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: grayscale(1)) and (background-blend-mode: difference) {
  .chalkboard-effect {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(1.5) grayscale(1);
  }
}