From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Adding drop shadows - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
(Locked)
Creating multi-column text6m 36s
-
(Locked)
Using borders to enhance design13m 59s
-
(Locked)
Rounding corners6m 56s
-
(Locked)
Adding drop shadows10m 35s
-
(Locked)
Working with opacity6m 8s
-
(Locked)
Utilizing the background property15m 5s
-
(Locked)
Working with CSS sprites7m 58s
-
(Locked)
Enhancing page design: Lab6m 22s
-
(Locked)
Enhancing page design: Solution8m 38s
-
(Locked)
-