HTMLとCSSの奇妙なアイテキスト効果

奇妙な目の十分なエピソードはありません.
😭
次のシーズンまで私を抱かせるために、私はロゴを再訪したいです、そして、私がそれをHTMLとCSSで再現することができるかどうか見てください.

ロゴ

ロゴの効果は、私が把握する必要があるいくつかの異なる要素を持っています.

フォントのマッチング

色を選ぶ

色を相殺する

フォント

使用されるフォントは、カスタム、sserserifフォントです.何が面白いのかe 文字通り小文字を区別するe とQ は大文字です.しかし、視覚的に同じ重み、ストロークの厚さなどを持っているので、難しいかもしれないが一致するフリーフォントを見つけるので、私は同じバイブを持っている書体を見つけることに集中します.
Kumbh Sans Googleのフォントでは、私は行くので、私たちはそれをロールバックし、修正するe 後でできるならば.我々の「QE」で<h1> 私たちのCSSはこのように見えます.

h1 {
     font-family: 'Kumbh Sans', sans-serif;
     font-weight: 300;
}

これは、このようなものをレンダリングします.

色

上記のロゴを見て、それは黄色、青、明るい緑を作るいくつかの透明性を持つ青、ピンク、黄色と黒で作られているようです.
CSS変数として色を設定しましょう.

 :root {
     --blue: rgb(0, 191, 255);
     --pink: rgb(255, 20, 147);
     --yellow: rgb(255, 255, 0);
     --black: rgb(0,0,0);
 }

色変数を使用すると、このように参照できますcolor: --var(yellow) .

色を相殺する

楽しい部分!
各色は、メインテキストから少しだけオフセットが、左と右にのみです.我々は、この効果を得ることができますtext-shadow .
最初の色をしましょう.

h1 {
     ...
     text-shadow: 5vw 0 var(--pink);
}

さて、他の色.
複数指定できますtext-shadow すぐに効果をコンマでそれらを分離することによって.
我々の色の残りを加えて、それがどのように見えるかについて見ましょう.

h1 {
     ...
     text-shadow: 
          5vw 0 var(--pink), 
          10vw 0 var(--blue), 
          15vw 0 var(--yellow);
}

些細なこと.
あまり効果的ではないが、近づいている.少し調整しましょうtext-shadow 引数は、彼らが黒いテキストの左と右にシフトするように、遠く離れてstrelessことなく.
デフォルトでは、最初の値、x座標はtext-shadow スタート影が左に始まるように、負の値を使用することができます.
そして、我々の色の大部分が重なっているので、text-shadow プロパティは、すべての色が表示されることができます.

h1 {
     ...
     text-shadow: 
          2vw 0 var(--pink),
          -2vw 0 var(--blue),
          -5vw 0 var(--yellow);
}

いいね
この時点で、我々はいくつかの緑は、半透明の青色と黄色のブレンド一緒に作成されて行方不明です.不透明度はいくつかの調整を行うことがありますので、私はそれを参照することができます別のCSSの変数として--blue 変数.

:root {
    --opacity: .75;
    --blue: rgb(0, 191, 255, var(--opacity));
    --pink: rgb(255, 20, 147);
    --yellow: rgb(255, 255, 0);
    --black: rgb(0,0,0);
}

すべてをまとめる

そして、我々の最終結果はこのように見えます.
デフォルトタブ
ヤツ!
アントニオ、タン、Karamo、ボビーとヨハタンは、誇りに思います.

資源

https://htmlcolorcodes.com/color-names/

https://stackoverflow.com/questions/14492695/css-color-names-alpha-transparency

https://css-tricks.com/snippets/css/css-text-shadow/

郵便Queer Eye Text Effect in HTML & CSS 最初に現れたShannon Crabill — Front End Software Engineer .