東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

CSSの「mix-blend-mode」を使ってみる

2021.05.20 Posted by

tecmemo2105

こんにちは、ウェブラボクリエイターズメモです。

 

今回は、CSSだけでPhotoshopなどで画像を加工したように見せることができるプロパティ「mix-blend-mode」を紹介したいと思います。

 

まず、このプロパティでどんなことができるか見てもらう為にDEMOを作成しましたのでそちらをご覧ください。

DEMO

 

「mix-blend-mode」を使うとブレンドモード(2つのレイヤーをどのように合成するか)が表現でき、本来Photoshopなどで事前に加工していたものをCSSだけで実現することができます。

また、DEMOで書いてある「乗算」、「スクリーン」などはブレンドモードの種類となります。

 

各種ブレンドモードの詳細については深く触れませんが、以下に参考文献としてWikipediaのリンクを載せときます。

※全てのブレンドモードが使用できるわけではありません。

ブレンドモード(Wikipedia)

 

ではソースの説明をしていきますが、HTML・CSSともにクラスやプロパティの値を変えているだけなので「乗算」部分のみ抜粋します。

 

■HTML

 

■CSS

 

画像の上に単色半透明の疑似要素を乗せ、それを合成することで表現する方法を取りました。

他のブレンドモードごとにCSSを用意してあるのでクラスを変えるだけでブレンドモードが変わるようにしています。

 

DEMOのリンクを以下にもう一度載せときます。

DEMO

 

今回は単色半透明の疑似要素で試しましたが、もちろん画像同士や画像+テキストも合成することが可能です。

表現の幅がすごく広がりますね!

 

対応ブラウザですがいつものごとく「Can I use」を参考にさせて頂くと、IEを除くブラウザではほぼサポートされていることが確認できます。

Can I use

 

一応IE11で確認してみましたが、すべて要素が単純に上に乗った「mix-blend-mode: normal;」の状態になります。

ですが非常に便利なので、IEなんて気にしない!という人は是非どんどん使ってみてはどうでしょう。

きっと工数削減などに役立つはずです。

 

以上、クリエイターズメモでした。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278