新着記事プロフィールmenuコピペとデモで解るCSSブレンドモード2016.7.23CSS「CSSブレンドモード」CSSの比較的新しいプロパティである「mix-brend-mode」について。ご存じの方も多いと思いますが、PhotoshopやIllustratorで見かける、オーバーレイなどの、重なりあうオブジェクトの色どうしを計算して表示の方法を変える技がCSSでも実現できるようになってきました。国内のサイトでは見かけませんが、ポートフォリオや、最新ブラウザをターゲットにした実装の際には試してみたいものです。いうことで、デモを載せます。そのまえに!mix-brend-modeを使用するメリットとは?canvasやWebGLでは美しく独特な表現が可能になります。静的なページでの実装については、2016年ではほぼその意味が見当たらないです・・・IEがあるがゆえに実際の案件では使いづらいでしょうし。みるFirefoxやChromeはイケます。IEはもちろん非対応。EdgeですらもNGです。luminosity;PhotoshopやIllustratorでも使う、乗算とかオーバーレイなどの考え方について表にまとめました。上のレイヤー、下のレイヤーの色が重なった時に、どう合成されるか?の目安にしてください。明るさ(輝度)の度合いで乗算とスクリーンどちらかの効果が出る。輝度が50%グレーより明るい場合はスクリーンが、輝度が50%グレーより暗い場合は乗算が適用される。オーバーレイよりも柔らかい印象になる。オーバーレイよりもかなりはっきりとした印象になる。上のレイヤーと下のレイヤーのRGB値のそれぞれ明るい数値が選ばれて合成される。上のレイヤーと下のレイヤーのRGB値を掛けあわせて明るくなるような感じで色を表示。黒以外に効果が表れる。明るい部分がより明るくなることでコントラストが高くなる。2つの重なり合う色を比べて、より暗い方の色が適用される。合成色よりも基本色のほうが暗い場合は、基本色の色がそのまま残るので、色が置き換えられるのは合成色よりも基本色のほうが明るい場合ということになる。上のレイヤーと下のレイヤーのRGB値を掛けあわせて暗くなるような感じで色を表示。白以外に効果が表れる。基本色の色相は保ったまま、重ねた色を暗くする。暗いところはより暗くなるのでコントラストが高くなる。合成色と基本色のカラーチャンネルを比べて、明るさの大きい方から小さい方の数値が引かれて合成されます。白を重ねた場合は単純に色が反転して、黒を重ねた場合には何の影響も与えません。下にあるレイヤーの輝度と彩度を維持したまま、上にあるレイヤーの色相を合成する。上にあるレイヤーの明度や彩度は除外視される。下のレイヤーの輝度と色相を維持したまま、上のレイヤーの彩度が合成される。下のレイヤーの色相と彩度を維持したまま、上にあるレイヤーの色の輝度(白=100%,黒は0%,赤は46%など色によって定まっている)を合成する。グレーを合成するとモノクロになる。uminosity;基本的にはこれらと同じ考えで良いです。mix-brend-modeのデモChromeかFirefoxで見て下さいね。前述のとおり、まだ役に立たないです・・・あと、描画をするためにメモリに負荷がかかるのは間違いないので、そういった意味でも導入を検討する必要がありそうです。ちなみに、参考にした記事はこちら。音楽Profile東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。