Queer Eye Text Effect in HTML & CSS

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


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.


Looking at the logo above, it seems to be made of blue, pink, yellow and black, which the yellow and blue having some transparency to make a bright green. Let’s set up our color 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.

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.

     5vw 0 var(--pink), 
     10vw 0 var(--blue), 
     15vw 0 var(--yellow);


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 of, the X-coordinate, 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 overlaps, rearranging the order of the text-shadow properties, allows all the colors to show through.

            2vw 0 var(--pink),
            -2vw 0 var(--blue),
            -5vw 0 var(--yellow);


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 a 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);

Putting it all Together

And our end result looks like this.

See the Pen Queer Eye Text Effect by Shannon Crabill (@scrabill) on CodePen.


Antoni, Tan, Karamo, Bobby, and Johathan would be proud.


Switching from Sqlite3 to Postgres

Let me tell you, I had been avoiding making this update for months. It seemed hard and scary and I was afraid I would break something. But you know what?

It was kind of a mess, but not as much of a mess as I thought it would be.

There are a lot of tutorials on switching your Ruby on Rails (Rails) database from sqlite3 to postgres. However, I did run into problems that were not covered in the tutorial I was reading at the time and have to find another one or a one-off solution.

There may be others who run into issues like I have, so I wanted to document the issues I had and possible fixes.

Postgres just won’t install


The first step in most tutorials I followed was to remove the sqlite3 from the Gemfile in your backend and replace it with Postgres.

In my Gemfile, it looked like this.

gem 'sqlite3', '~> 1.4'

I’d replace it with this.

gem 'pg'

Then run bundle install to install the gem.

Except, it just wouldn’t install. I kept getting a wall or red or yellow console logs, starting with something like this.

Failed to build native extensions...


I tried doing a global install of the gem, but got a similar error.

After several months of avoiding trying to find a solution for this, I asked for help and got a link to a Stackoverflow question that echoed the same issue I was having.

Installing PG gem on OS X – failure to build native extension

And the most upvoted answer to install postgres with homebrew worked for me!

Here are the steps.

  • Install another build of Xcode Tools (typing brew update in the terminal will prompt you to update the Xcode build tools)
  • brew update
  • brew install postgresql

After that, running bundle install ran successfully.

Bundle complete! 13 Gemfile dependencies, 58 gems now installed.

Web Page Redirects with .htaccess and Apache

When I’m presenting at a conference, or sharing a project on social media, I like to have a short, easy to remember URL to share. 

While it may not be the easiest way, what works for me is creating a URL redirect with whatever short, easy to remember the link I want, to the long-form blog post, landing page, etc. 

For example, back when conferences were held in the physical space, I would host the slides for my talk, related resources, sample code, etc as a blog post on my website.

The slug or full URL for the blog post was usually the title of the talk plus the name of the conference or year. While this was a good idea from an SEO perspective, it sometimes made for a long URL that is difficult to fit onto a presentation slide. 

Instead, using a web page redirect, I could use shannoncrabill.com/conference-name in my presentation which would direct viewers to the full blog post or resource.

Here’s how I did it. 

Setting up the Redirect

With my current set up, I have access to the root directory where my personal website is hosted. This is where a .htaccess file will live, which allows the Apache webserver to do the work for us. 

The dot . at the front of the .htaccess file may mean you may have to turn on show hidden files in your FTP client. If one does not exist, you can create one. If you already have one, you can add new redirects to the same file. 

Creating the redirect has three parts. 

  1. The keyword Redirect and HTTP status code (301 in our case)
  2. The URL or domain that you want to redirect from
  3. The URL, domain, subdomain, folder, etc you want to redirect to

Let’s say, I wanted the URL shannoncrabill.com/poodle to redirect to a blog post with the URL shannoncrabill.com/why-poodles-are-the-best-and-worst-dogs-ever, I’d add a line to my .htaccess file that looks like this. 

Redirect 301 /poodle https://shannoncrabill.com/blog/why-poodles-are-the-best-and-worst-dogs-ever/

The HTTP status 301 signals to that the requested webpage has been moved permanently. It would be suitable to use if your entire site was moving from one domain to another or in this case if we want to redirect to a specific page.

Once the .htaccess has the updates you want, push it live to your webserver, and give it a test. 

What I like about this approach is that it gives me control over the URL’s that are getting shortened as opposed to using an external service. 

Social Media Preview Images for Your GitHub Projects

Did you know you can specify a social media preview image for your GitHub projects?

Neither did I

The social media preview image is different from any images you add to your repo’s folders or on your README. I was browsing the settings for one of my repositories when I came across this.

The social preview option is available under your project repo and settings.

I decided to test it out.

This is what the default social media preview looks like before uploading an image.

A GitHub repo link posted in Discord without a social media preview image

By default, if there’s no social media preview specified, a GitHub repo link will expand (if that is an option on the social media platform) to show the name of the project, description, and the user’s or organization’s avatar.

And with a social media preview image, this is what I would see in the expanded preview on Discord.

A GitHub repo link posted in Discord with a social media preview image


Visually, that looks so much better!

The relevant information is still there (project name and description) but the right image can help your project stand out on social media. Gifs are supported, although animated Gifs may not be animated by default.

Additional information on this feature can be found in GitHub’s documentation.

Customizing your repository’s social media preview