Gradients Sure Are Colorful

I had a code challenge this week for a digital agency.

The challenge involved using a design in a Photoshop file as a guide to create an HTML page using Bootstrap.

I’ve been focused on React apps for the past few weeks, so it was fun to switch back to coding in jQuery, and Bootstrap is a really cool framework.

The Javascript parts of the challenge weren’t too hard. I found the biggest challenge was getting a gradient over an image to look just right. I had a raw image that I wanted to match with a doctored image, and after a lot of googling for how to replicate a gradient, I ended up just eyeballing it and doing my best to make it look the same. I’m sure there’s a better way, and I hope to learn it eventually, but I’m glad I was able to at least get something done in my crude, non-programmatic way.

Now let’s have some fun with gradients.

Here’s a picture of a cat:

cat

Everyone on the internet loves cats.

Here’s a cat with a gradient:

cat on a hot tin roof

Why’s the gradient going from yellow at the top to red at the bottom?

I don’t know. I guess it’s a cat on a hot tin roof.

Here’s that cat in HTML:

<div class="cat-gradient img-responsive">
</div>

And how we’re making the gradient over the image using CSS:

.cat-gradient {
     width: 550px;
     height: 300px;
     background: linear-gradient(to bottom, 
      rgba(255,255,0, .5),
      /*yellow*/
      rgba(255, 0, 0, .9)
      /*red*/
      ), url("http://www.findcatnames.com/wp-content/uploads/2017/01/tabby-cat-names.jpg"); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    color: white;
}

Feel free to play with that code above on this jsfiddle.

Note the background property of this .cat-gradient class in our CSS.

The syntax goes:

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

The above syntax is via Mozilla’s documentation for linear gradients.

Also note the RGBA color codes for the colors.

RGBA stands for: red, green, blue, alpha.

Any color can be made up of a combination of good old R, G, and B.

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Let’s play with our cat, and make it go from hot yellow and red to cool white and blue.

snow cat

Cool. Now our cat’s in a blizzard.

Here’s the fiddle for the above.

All I did was change the colors.

.cat-gradient {
     width: 550px;
     height: 300px;
     background: linear-gradient(to bottom, 
      rgba(0,0,255,.6),
      /*blue*/
      rgba(255, 255, 255, .9)
      /*white*/
      ), url("http://www.findcatnames.com/wp-content/uploads/2017/01/tabby-cat-names.jpg"); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    color: white;
}

Let’s change the direction.

Perhaps that blizzard is blowing in from the northeast.

winter is coming

And it’s not a blizzard at all.

It’s actually an Airborne Toxic Event.

airborne toxic event

Poor kitty. Things aren’t looking good.

Don’t worry, cat.

hang in there

Here’s our CSS for the above toxic airborne gradient:

.cat-gradient {
     width: 550px;
     height: 300px;
     background: linear-gradient(to top right, 
      rgba(255,153,0, .8),
      /*orange*/
      rgba(0,128,0, .9) 70%
      /*green*/
      ), url("http://www.findcatnames.com/wp-content/uploads/2017/01/tabby-cat-names.jpg"); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    color: white;
}

But of course, we don’t need to limit ourselves to two colors.

We can have as many as we’d like.

We don’t need to limit ourselves to linear gradients either.

We can make a radial gradient.

This is our code.

We can do whatever the hell we want.

cat party

Oh yeah, meow that’s a party. This cat is ZOOMING.

Here’s our code for this cat party, which is also here.

.cat-gradient {
     width: 400px;
     height: 400px;
     background: radial-gradient(
      rgba(255,0,0,.5),
      rgba(255,255,0,.6),
      rgba(0,128,0,.7),
      rgba(0,0,255,.7),
      rgba(75,0,130,.8),
      rgba(238,130,238,.9),
      rgba(255,0,0,1)
      ), url("http://www.findcatnames.com/wp-content/uploads/2017/01/tabby-cat-names.jpg"); 
    background-repeat: repeat;
    background-position: center center;
    background-size: contain;
    color: white;
}

This cat’s had a long day. Hot and cold, toxic events and strange acid trips.

Time to put this kitty to bed.

catnap

Goodnight kitty cat.

Thanks for teaching us about making gradients with CSS!