Jacob
Dubail

Web
Consultant

Big agency reliability. Small team flexibility. We do more than show up. We get the job done on time and on budget all while providing the best solutions available.
Find out more about Jacob, our services, or get in touch.

 

 

Box Shadow Color Hack

Working modularly in CSS is smart. It allows us to be DRY in our approach to styling a page or element. What does that have to do with box-shadow? Let’s look at an example to see how we can avoid duplicating lines of code with this simple box-shadow color hack.

First, let’s look at the syntax for the box-shadow components so we’re all on the same page.

box-shadow: 
  x offset, 
  y offset, 
  blur radius, 
  spread distance, 
  color, 
  inset keyword;

The piece we’re concerned with today is the color component.

According to the W3C CSS Specification for box-shadow, “If the color is absent, the used color is taken from the ‘color’ property.”

So, what?

If I have a base module that looks like this:

.my-module {
background: pink;
color: orange;
padding: .5em;
box-shadow: 0 0 0 10px orange;
}

And variations of this module that looks like this:

.my-module.brand-hilite {
color: green;
box-shadow: 0 0 0 10px green;
}
.my-module.brand-secondary-hilite {
color: blue;
box-shadow: 0 0 0 10px blue;
}
.my-module.hero {
box-shadow: 0 0 0 20px green;
}

What happens when I want to change the color of the shadow on my .hero sub-module? Do I duplicate each sub-module combining the hilite and hero variations? That would be a mess!

.my-module.brand-hilite {
color: green;
box-shadow: 0 0 0 10px green;
}
.my-module.brand-secondary-hilite {
color: blue;
box-shadow: 0 0 0 10px blue;
}
.my-module.hero {
box-shadow: 0 0 0 20px green;
}
.my-module.brand-secondary-hilite.hero {
color: blue;
box-shadow: 0 0 0 20px blue;
}
.my-module.brand-hilite.hero {
color: green;
box-shadow: 0 0 0 20px green;
}

That’s a crap load of extra code to achieve something very minor, right? Check this out. Our box-shadow color matches our text color in each module variation. So, let’s drop the color component from the box-shadow declaration all together and let the module inherit it, like so.

.my-module {
background: pink;
color: orange;
padding: .5em;
box-shadow: 0 0 0 10px;
}
.my-module.brand-hilite {
color: green;
box-shadow: 0 0 0 10px;
}
.my-module.brand-secondary-hilite {
color: blue;
box-shadow: 0 0 0 10px;
}
.my-module.hero {
box-shadow: 0 0 0 20px;
}

Those 25 lines of code refactor to 17 lines in this theoretical example. If we use Sass or another CSS pre-compiler, we can refactor it further.

But what about the real world?

A recent project called for a series of “halos”, at least that’s how I refer to them. Each halo receives a different color based on the context, be that WordPress post category or otherwise. I wrote a simple Sass mixin to do most of the dirty work:

$colors: green $green, blue $blue, grey $grey;

@each $i in $colors {
  .halo-#{nth($i, 1)} { 
    background: nth($i, 2);
    color: rgba( nth($i, 2), .33 );
  }
}

We simply loop over our color keywords, which represent a css class name, and set the color property to the variable associated with each color keyword. Easy enough.

Here’s an example on CodePen:

See the Pen Box Shadow Color Hack by Jacob Dubail (@jacobdubail) on CodePen

 
Comments

Leave a Reply