エスエムティ スタッフブログ『エスエムティの愉快な仲間たち』

pay-per-click

Staff blog

エスエムティの愉快な仲間たち

記事担当
ぴのこ

CSSで「乗算」に

昨年、twitterでちょっとバズってたこちらの投稿。

https://twitter.com/pulpxstyle/status/1329575674458238977

「白背景を消す」という表現をされていますが、
CSSの「mix-blend-mode」を使用して
画像の合成モードを変更している状態になっています。

—————————
mix-blend-mode: multiply;
—————————

なので、「乗算」になっているわけですね。

「screen」でスクリーン。
「color-burn」で焼きこみ。
「color-dodge」で覆い焼き。

Photoshop等の画像作成ツールで定番の合成モードが
CSSで実装できるようになっているんですね。

お馴染みの「Can I use」で確認すると↓

https://caniuse.com/?search=mix-blend-mode

IEは非対応ですが、サポートも終了しているのでもう良いかな…?
少し前だとEdgeも非対応でしたのであまり使わずにいましたが
今はもう対応済みのようなので、どんどん使ってよさそうですね。

使い方によっては面白い表現が出来そうなので、
うまく使ってみましょう!

ぴの子

クリックしていただけると幸いです

http://www.smt-net.co.jp/

旧ブログはこちら


ページの先頭へ戻る

ページの先頭へ戻る

お問合せ・ご相談

キャンペーン実施中

pay-per-click