Shannon Crabill

Posted on Sep 27, 2020 • Originally published at shannoncrabill.com on Sep 20, 2020

Queer Eye Text Effect in HTML & CSS

#css #html #showdev #tutorial

There’s never enough episodes of Queer Eye.

😭

To hold me over until the next season airs, I wanted to revisit the logo and see if I could recreate it in HTML and CSS.

The Logo

The logo effect has a couple of different elements that I need to figure out.

Matching the font
Picking the colors
Offsetting the colors

Fonts

The font used is likely, a custom, sans-serif font. What makes it interesting is that the e is stylistically a lowercase e and the Q is uppercase. Yet, visually have the same weight, stroke thickness, etc. Finding a free font that matches that may be difficult, so for now, I’ll focus on finding a typeface that has the same vibe.

Kumbh Sans in Google Fonts has the modern look that I’m going for, so we’ll roll with it and fix the e later if I can. With our “QE” in an <h1> tag, our CSS will look something like this.

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

Which renders something like this.

Colors

Looking at the logo above, it seems to be made of blue, pink, yellow and black, with the yellow and blue having some transparency to make a bright green.

Let’s set up our colors as CSS variables.

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

With color variables, we can reference them like this color: --var(yellow).

Offsetting The Colors

The fun part!

Each of the colors is offset a little from the main text, but only to the left and right. We can get this effect by using a text-shadow.

Let’s do the first color.

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

Now, for the other colors.

You can specify multiple text-shadow effects at once, by separating them with a comma.

Let’s add the rest of our colors and see how it looks.

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

Trippy.

Not quite the effect we are going for, but it’s getting close. I’ll make some adjustments to the text-shadow arguments, so that they shift to the left and right of the black text, without straying so far away.

By default, the first value, the X-coordinate, denotes how far to the right the text-shadow starts. A negative value can be used so that the shadow starts to the left.

And since most of our colors overlap, rearranging the order of the text-shadow properties, allows all the colors to be seen.

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

Nice!

At this point, we’re only missing some green, created by a semi-transparent blue and yellow blending together. The opacity may take some tweaking, so I’ll add that as another CSS variable that I can then reference in the --blue variable.

: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);
}