下記の4枚は、元の写真画像にCSSのブレンドモードや画像フィルタを適用したキャプチャです。

鉛筆画、色鉛筆画、水彩画、黒板（画？）など、かなりのクオリティで画像にエフェクトが適用できるスタイルシートのテクニックを紹介します。

Image Effects with CSS

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

画像: Point Reyes Lighthouse

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

HTML

HTMLは非常にシンプルです。

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

HTML <div class="pencil-effect"> <img src="photo.jpg"> </div> 1 2 3 < div class = "pencil-effect" > < img src = "photo.jpg" > < / div >

CSS

「photo.jpg」を使用する画像のURIに変更して、ご利用ください。

あと、img要素の「opacity: 0;」はお忘れなく。

CSS .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; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 . 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 ; }

続いて、色鉛筆。

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

CSS .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; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 . 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 ; } }

続いて、水彩画。

こんなに美しくエフェクトが適用できるんですね。

CSS .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); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 . 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 ) ; } }

最後に、黒板画。

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

CSS .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); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 . 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 ) ; } }

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

Image Effects with CSS