From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Adding drop shadows

Adding drop shadows - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Adding drop shadows

Drop shadows are another design element that has eluded designers, in terms of having a pure CSS solution. Over the years, designers would use images, customized borders, sometimes they would even layer multiple elements on top of each other, just to achieve the look of drop shadows. Recent additions to CSS allow us to apply drop shadows directly on elements and text, using the box shadow and text shadow properties respectively. Now, before we get into this exercise and working on these values ourselves, I want to go over the syntax just for a moment. And you can see in our code block, right there we have an example of box-shadow. It's got four values separated by white space, and then a color declaration after that. Now, those four values in order. The first value is the horizontal offset; the second value is vertical offset; the third value is the blur or how sharp the shadow should be; and then the fourth value is the spread, or how big the shadow is going to be. Now, as far as the…

Contents