Understanding The CSS Box Shadow

By July 3, 2012 Tutorial No Comments

Well, its all downhill from here…

I say that with my tongue firmly planted in my cheek of course, however that is exactly what I felt when I was learning CSS over four years ago. You see, when I first began in web design, I had learned how to create a few regions, fill them with static content and upload them to a server hoping that my kind clients enjoyed the result. When I found the box shadow property something clicked for me. CSS could go beyond solid colors and rote layouts; using newer CSS3 techniques I could accomplish effects that I thought only existed deep down in a photoshop document.

Simple? Maybe, but a keen knowledge of the box-shadow property can take a design from “C+” to “A” quality quickly. The key is simple… “ABS” or “Always Be Subtle.” In this tutorial, I would like to take you through a few of my favorite uses, techniques and tips.


Getting Started:


So let’s get started with the basics, a simple box shadow on a “<div>” element.

<div class="shadow"> <h2>Call Me Content!</h2> </div>​

 

Perfect! Notice how the numbers in the CSS code control the outcome of the shadow.

  • First Number: Direction Left or Right
  • Second Number: Direction Up or Down
  • Third Number: Blur
  • Fourth Number: Spread Radius ( We’ll talk about that one later.)


Integrate RGBA:


Remember, it is not often that a real shadow completely obscured the object behind or under it. So, with that in mind it would make sense for us to integrate the RGBA color property since the “A” stands for “Alpha” or “Alpha Transparency”.

<div class="shadow"> <h2>Call Me Content!</h2> </div>​

The Floating Box!


Now that we have covered the basic box shadow and integrated RGBA, let’s pull the shadow off to one single side of our element achieving the floating or hovering effect (just imagine the rumble of the enterprise warp core on the div) ((Too nerdy?))

<div class="shadow">

<h2>Call Me Content!</h2>

</div>​


Conclusion


There you have it. A basic understanding of the box-shadow property that you can use right now in your projects. Remember, an eye towards subtlety is key with shadows. Late at night it can become tempting to just want to put box-shadows on every element on the page. Resist!

About Brock Nunn

Brock Nunn is a web designer and developer specializing in building custom WordPress for over three years. Brock operates through his company Brock Nunn Web Design offering clients personal service with outstanding results. You can follow Brock on twitter @banunn.

Leave a Reply

What is 3 + 12 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)
Start planning your project today. Get Started