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!
