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

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

サイトのキャプチャ

Image Effects with CSS

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

写真画像

画像: Point Reyes Lighthouse

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

写真画像

HTML

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

CSS

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

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

写真画像

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

写真画像

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

写真画像

サイトでは他にも、さまざまな画像エフェクトが楽しめます。

サイトのキャプチャ

Image Effects with CSS

top of page

©2017 coliss