2016/10/26こんにちは、チーフデザイナーの塩谷です。本日は新しいCSS3プロパティ「mix-blend-mode」の使い方をご紹介いたします。デザイナーが気軽にいつも使用している「オーバーレイ」「乗算」「比較(明・暗)」などの描画モードがCSSで設定できるようになったんです。これがCSSで表現できるようになることで、これまで画像で対応していた部分をテキストで対応出来たりして、SEO的にも管理的にも良さ気です。残念ながらIEは未対応ですが、もはやIE対応はこの時代いらないでしょう、無視無視。Windows10にアップデートして、せめてEDGEを使いましょう。ブレンドモードの基本と使い方さて、このmix-blend-modeの挙動ですが、基本的にはPhotoshopに準しているようです。そもそもブレンドモードとは、重なるレイヤーのオブジェクトをどのように表示させるのかを指定する機能です。画像のように2枚の写真を重ねた時、ブランドモードを指定することで様々な描画表現が可能になります。Effect等では昔から存在する機能で、とても便利!もうデザイナーは当たり前のようにバンバン使用してますよね。luminositymix-blend-modeの指定方法mix-blend-mode:overlay;これだけです。text-align:center;}使い方はとても簡単ですね!今回はあえて画像との境目で描画モードが変わるのを確認してもらうために背景画像を60%にしていますが、100%に変えれば画面一杯になりますよ。画像でやりましたが、動画の上にmix-blend-modeを指定したテキストを配置しても、かなりカッコイイですよね!デザイナーがCSSのみで描画モードが指定できるようになって、さらにデザインの幅が広がります!最近、WEB業界もデザインの幅やクオリティが上がってきて、より一層デザイン競争が激化してきてますね。がんばろうLINE担当者:ブログ編集部リースエンタープライズのブログ編集部です。お知らせから最新のWEB制作事情まで、あらゆるリース情報を発信します。