ギルバート色のブレンドモードのリバースエンジニアリング

私は準備をしているTalk.CSS 話すmix-blend-mode 今週.一方、もしあなたがシンガポールのコミュニティと呼ばれるこのかわいいコミュニティに出くわしたことがあるなら、私たちのFacebookグループにもあるでしょう.

そのフォントは記念して作られたGilbert Baker , 誰が虹の旗を設計した.

それはcolor font そして、あなたは両方からの色バージョンとType With Pride website .

信じられないほど美しいですが、ストロークの交差点にブレンド効果を見逃すことはできません.そして、ねえ、私の話のトピックを覚えていますか?このCSSプロパティmix-blend-mode 色がどのようにブレンドするかについて正確です.そして今、それは私のスライドのフォントになります.

ブレンドモードを考え出す

話の準備からの片側効果mix-blend-mode あなたが停止することはできませんが、あなたが見る色の交点に使用されるブレンドモード(または何も)とは何かを不思議に思うことです.そして、スライド準備を通して途中で、私は私の選ばれたフォントの上にあることを理解するために、この増加している誘惑を感じました.もし誰かがその質問をしたらどうでしょう?
私は色を見るのにあまり上手に訓練されていない.そして、裸の目だけで色がどのようにブレンドされるかを言うことができません.私は、私はブレンドモードについて何かを学んでいるので、なぜそれを把握する私の運を試してみませんか?
現在、リバースエンジニアリングはCSS Colors and Blending , このプロセスについて十分に要約します.

ブレンドモードのうちの16のうちの12は、SRGB色空間で計算される分離可能な混合モードです.分離可能な手段は、結果として生じる色のR、GおよびBチャネルが別に計算されることを意味する.他の4つは非分離であり、HSL表現で計算されます.

計算は、各色の分数値、すなわち「0 xFF」または255の意味1、「0 x 80」または128を意味する.

チェックするthe specs CSS指定されたブレンドモードの完全なリストのために.
私のマッチを分離可能なブレンドモードで見つけることができるという保証はありません.フォントのデザイナーは、ストロークの交差点のためにすべての色を選ぶことができる.誰が知っている🤷🏻‍♀️
しかし、私はタイポグラファーのお気に入りの引用を白い背景に捨てて、これをし始めました:

そしてここに色

--orange: rgb(255, 107, 0); /* #ff6b00 */
--red: rgb(255, 67, 56); /* #ff4338 */
--green: rgb(5, 206, 124); /* #05ce7c */
--blue: rgb(0, 179, 227); /* #00b3e3 */
--magenta: rgb(218, 58, 179); /* #da3ab3 */
--yellow: rgb(255, 200, 67); /* #ffc843 */

基本的に、私はすべてのブレンド機能を試してみて、どちらが一致するかを確認することにしました.そして、簡単な除去があるかどうか最初にチェックしたいです.
例えば、通常、ブレンドは全くないと言います.
darkenとlightenは、それぞれ暗いまたは明るいチャネル値を選択します.したがって、結果は、構成色のいずれかのチャネルのいずれかに一致する数値を持つ必要がありますが、ゼロ以外はありません.
非自明なブレンディング計算を有する第1のものは乗算する.そして、それは本質的に色をチャンネルによって、乗算する.小学校の数学は私たちに教えてくださいゼロ回任意の数はゼロを与える.それで、私はゼロで2色を含むいくつかの組合せで私の運をためしました:
カラーピッカーからの読み

グリーンxオレンジ#055600 , or rgb(5, 86, 0)

ブルー×レッド#002f32 , or rgb(0, 47, 50)

ブルー×マジェンタ#00299f , or rgb(0, 41, 159)

それから、数学を行いました.

グリーンxオレンジ

r :( 5/255 )*( 255/255 )= 5/255
g :( 206/255 ) = 86/255
B :( 227/255 ) * ( 0/255 )= 0/255
私は得る.rgb(5, 86, 0) これは正確に交差点です!私はいくつかの組み合わせを試してみて、彼ら全員一致した.😱　私はちょうどたわごと運によって打たれましたか?
現在、中国語の用語が行くように.胆大心细 あなたは大胆であるが注意深くなければならないことを意味します.私はそれが本当に乗算されていることを確認する必要があります.
いくつかの詳細は裸の目だけでなく、簡単に簡単な数学で検証可能です.あなたが熱心であるならば、私は同様にCodepenの上にこのカラーパレットを持っています:
それは画面ではないので、0と色をスクリーニングするため、色を返すことができます.
それは色のドッジではないので、B?( x , 1 )は1を与えない.
カラーバーンではないので、B?( 1 , x )は1を与えない.
・・・結局私は結局多くの交差点がないと悟った.それらのすべては、実際のため、乗算されます.QEDしかし、それは将来の参照のために何も保証しません.デザイナーは心を変えるかもしれない🤷🏻‍♀️
掛け算と暗記
Darkenは簡単に論理によって排除されましたが、私は、このような状況でどのように乗算とdarkenは非常に似ていることに気づいた.そのcodepenの側の比較はあなたにアイデアを与えるかもしれません、そして、再びスクリーンショットをペーストさせてください.

単一の色で、darkenおよびmultiplyの両方が各々のカラーチャネルのより弱い値を生じるので、それらは非常によく非常に類似した結果として生じる色を生じることができる.どこで、彼らが異なるかは、写真、またはより複雑な輪郭とテクスチャーでどんなグラフィックスにでも適用されるときです.乗算は線形操作であるため、両方のグラフィックスのテクスチャを保持します.しかし、Darkenは単に各々のチャンネルのより小さな価値を選びます、そして、したがって、どんな側のテクスチャーも保存することができない保証がありません.

迂回路
この過程で迂回路があった.私はもともとChromeで遊んでいました.それらは閉じられていました、しかし、結果としての値は常にいくつかの整数によってありました.と遊ぶときmix-blend-mode: screen 彼らはしばしば2桁も離れていた😲
私はほとんど私はミックスブレンドモードを理解していないと思った.Aがあるとわかるbug 関連するかもしれないクロムで.決して自分自身を確認することは、あまりにも間違いがあなたの側にあることを確認することはありません😬. 一方、Firefoxは、私の結果を、単位の桁の上で丸くすることによって最もオフになっていたいくつかの例外によって、楽しく吐き出します.Firefoxが丸めているようで、伝統的な数学の丸めをやっています.

ブロック引用ボーダー

私は、フォントのデザインで私のスライドのテーマに合う何かをすると思いました.私は今、彼らの色の秘密を知っているので、なぜ自由人のためにその知識を使用しないでください.
私は私のブロック引用要素のためにブレンドされた境界線をつくりたかったです、そこで、私は境界をカバーするために色を使います、交差点のために合っている混合モードで互いを交差させます.
私は複数の背景画像を使用することにしたbackground-blend-mode: multiply .
最初に、私はいくつかの重なりで背景線形勾配イメージの配列を積み重ねている線に沿って考えていました.

blockquote {
  background-image: linear-gradient(
      to bottom,
      var(--magenta) 0,
      var(--magenta) 100%
    ), linear-gradient(to bottom, var(--blue) 0, var(--blue) 100%),
    linear-gradient(to bottom, var(--yellow) 0, var(--yellow) 100%),
    linear-gradient(to bottom, var(--orange) 0, var(--orange) 100%),
    linear-gradient(to bottom, var(--green) 0, var(--green) 100%),
    linear-gradient(to bottom, var(--red) 0, var(--red) 100%);
  background-size: 8px calc(100% / 4.5); /* to create the overlap */
  background-repeat: no-repeat;
  background-position-y: 0, calc(100% / 5), calc(200% / 5), calc(300% / 5), calc(
      400% / 5
    ), calc(500% / 5);
  background-blend-mode: multiply;
}

彼らは働いた.しかし、彼らはむしろ面白くないように見えました.

これは個人的です、しかし、私は私を本当に幸せにした勾配方向に微調整を加えました.最終結果は次のようになります.

このcodepenでの実装をチェックアウトしてください.色の部分は上でのみ動作しますbrowsers that support color font .

次回まで🤞

あなたが今月シンガポールに起こるならば、デザイナーまたはフロントエンドdevがお互いに興味があるならば、多分来てくださいTalk.CSS #38 このCSSプロパティをミックスブレンドモードと言うのを聞いてください.または、この小さな仕事に触発され、何か面白いものを作成してくださいshow and tell 米国👀
しかし、形で戻っているCodepenのために、指は交差しました.

参考文献

CSS Compositing and Blending Module Level 1

CSS Font Module Level 4

Talk.CSS

Type With Pride

Color Font