【CSS】画像を白黒、セピアに

ウェブ制作技術

この記事はこんな人に向けて書いています

  • Webデザイナー
  • コーダー/マークアップエンジニア

おはようございます、ヒグチです。

今回のネタは、CSSの小技です。

画像を、CSSだけで白黒にしたり、セピア色にしたりします。
雰囲気がでて、いい感じになりますね。

ロールオーバーのエフェクトなんかにもいいかもです。
白黒で表示させておいたのを、hoverで色付きにするとか。

それでは行ってみましょう!

cssで白黒とセピア

CSSで画像を白黒、セピアに – サンプルコード

まずはてっとり早くコードをご覧ください。

See the Pen CSSで画像を白黒、セピアに by daisukehiguchi (@daisukehiguchi) on CodePen.

かんたんに、画像を白黒(グレースケール)、セピア調にできました。

imgタグに対して、「filter」というプロパティを使って指定しています。

まだ接頭辞が必要なので、「-webkit-」の指定をお忘れなく。

あと、IEは非対応です。

白黒ぐあい、セピアぐあいを調整

ぐあいも簡単に調整できます。

調整するには、「filter : grayscale(100%)」の%の部分を変更します。

See the Pen Ywjozy by daisukehiguchi (@daisukehiguchi) on CodePen.

セピアの方も同じように調整できます。

See the Pen セピアの度合いを調整 by daisukehiguchi (@daisukehiguchi) on CodePen.


以上、CSSで画像を白黒、セピアにする方法でした。
今回紹介したfilterプロパティは、グレースケール、セピア以外にも、いろいろな値をとることができて、
photoshopみたいに画像を加工することができてしまいます。

おもしろいので、次回あらためて紹介いたします。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。