Start learning with our library of video tutorials taught by experts. Get started

CSS3 First Look

Creating box shadows


From:

CSS3 First Look

with James Williamson

Video: Creating box shadows

Earlier in the title we discussed how to create drop shadows on text. Now in this movie we're going to explore how to add drop shadows to element boxes through the use of the box-shadow property. And discuss some of the effects we can achieve through using variations of its syntax. So I have the index.htm opened. Let's talk a little bit about what we're going to be doing here. So I'm going to go ahead preview that in one of my browsers. And if I scroll down a little bit I can see that I have a couple of callout div tags and I have this Tour Spotlight element as well.
Expand all | Collapse all
  1. 3m 5s
    1. Welcome
      1m 20s
    2. Using the exercise files
      1m 45s
  2. 31m 30s
    1. What is CSS3?
      5m 26s
    2. The current status of CSS3
      3m 35s
    3. An overview of CSS3 capabilities
      2m 24s
    4. Can you use CSS3 now?
      5m 31s
    5. Detecting support for CSS3
      9m 0s
    6. Understanding vendor prefixes
      5m 34s
  3. 1h 9m
    1. An overview of child and sibling selectors
      3m 11s
    2. Using child and sibling selectors
      7m 17s
    3. An overview of attribute selectors
      3m 19s
    4. Using attribute selectors
      8m 32s
    5. Pseudo-class UI selectors
      5m 56s
    6. Negation pseudo-class selectors
      6m 48s
    7. Target pseudo-class selectors
      5m 39s
    8. Structural selectors
      3m 58s
    9. Nth-child selector syntax
      10m 0s
    10. First, last, and only structural selectors
      5m 39s
    11. Using structural selectors to write more efficient code
      8m 52s
  4. 45m 28s
    1. Color formats in CSS3
      7m 9s
    2. Transparency in CSS3
      9m 10s
    3. CSS3 gradients
      4m 11s
    4. Creating linear gradients
      13m 57s
    5. Creating radial gradients
      11m 1s
  5. 49m 8s
    1. Working with web fonts
      6m 38s
    2. @font-face syntax
      4m 52s
    3. Downloading sample fonts
      6m 5s
    4. Writing @font-face declarations
      7m 57s
    5. Using web fonts
      6m 42s
    6. Using text shadows
      7m 14s
    7. Creating multi-column text
      9m 40s
  6. 50m 55s
    1. An overview of the flexible box model
      4m 42s
    2. Controlling box orientation
      5m 2s
    3. Setting element flexibility
      12m 59s
    4. Distributing boxes
      7m 54s
    5. Controlling box alignment
      12m 38s
    6. Working with box-sizing
      7m 40s
  7. 1h 5m
    1. Using border-radius
      6m 20s
    2. Creating custom rounded corners
      10m 21s
    3. Understanding border images
      5m 15s
    4. Using border images
      8m 52s
    5. Creating box shadows
      8m 58s
    6. CSS3 backgrounds
      4m 55s
    7. Controlling background size
      8m 46s
    8. Creating multiple background images
      6m 4s
    9. Using background-origin
      3m 18s
    10. Clipping background content
      3m 2s
  8. 40m 8s
    1. An overview of CSS3 2D transforms
      4m 26s
    2. Using 2D transforms
      8m 16s
    3. Setting transform origins
      5m 24s
    4. An overview of CSS3 transitions
      5m 0s
    5. Animating CSS properties
      6m 12s
    6. Using easing in animations
      5m 41s
    7. An overview of 3D transforms
      5m 9s
  9. 37m 56s
    1. Understanding media queries
      6m 18s
    2. Strategies for targeting multiple devices
      6m 4s
    3. Writing styles for target screen sizes
      12m 11s
    4. Deploying styles through media queries
      3m 55s
    5. Basing media queries on page orientation
      2m 24s
    6. Targeting media queries for iOS devices
      7m 4s
  10. 1m 6s
    1. Goodbye
      1m 6s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
CSS3 First Look
6h 34m Appropriate for all Nov 29, 2010

Viewers: in countries Watching now:

In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.

Topics include:
  • Understanding the history of CSS3
  • Working with the new selectors
  • Adding transparency and gradients
  • Specifying web fonts with @font-face
  • Understanding the advances to page layout
  • Looking at CSS3 box model capabilities
  • Using 2D and 3D transforms
  • Understanding media queries
Subject:
Web
Software:
CSS
Author:
James Williamson

Creating box shadows

Earlier in the title we discussed how to create drop shadows on text. Now in this movie we're going to explore how to add drop shadows to element boxes through the use of the box-shadow property. And discuss some of the effects we can achieve through using variations of its syntax. So I have the index.htm opened. Let's talk a little bit about what we're going to be doing here. So I'm going to go ahead preview that in one of my browsers. And if I scroll down a little bit I can see that I have a couple of callout div tags and I have this Tour Spotlight element as well.

We're going to add box shadows to all of those. However, we're going to do something kind of, little different with the Tour Spotlight. In addition to having sort of an outside drop shadow, I am going to show you guys how you can simulate doing an inner shadow inside this element as well and that can create some really cool effects for your sites. So I am going to go back to my code and I am going to switch over to main.css. Again that can be found in the 06_05 _css directory as well. The first thing I want to find is my callOut selectors and that controls those div tags that are in the sidebar, those callOut divs, and it's found on about line 103 or so. There it is.

So the syntax is extremely easy to use. Let me show you how this works. But I'll just do WebKit first. So -webkit-. So we're still doing the vendor prefixes on these. So -webkit-box-shadow, box-shadow, and then we just need to pass a couple of values. I am going to do 2px 2px 5px #000. Now I'm guessing that if you've worked with drop shadows for a while, you can probably guess what this syntax is doing.

Essentially, we're passing in an X offset, a Y offset, a blur value, and then a color. So essentially, you're moving the drop shadow over, in this case 2 pixels to the right, and then you're usually moving it down, in this case 2 pixels down. Negative values would move you the other way. So if you wanted to change your light source so that it was to the left and up you would do -2 and -2 there. Now the 5 pixels is the blur value on a drop shadow. Now obviously, the lower that value is the sharper the shadow is, the higher the value is, the more blur it gets.

So it's very much like the text shadow values we were using earlier. And the #00 course is the color. In this case it's black. And I remember I had a art professor one time who yelled at me in one of my paintings he was looking at. He said, "Shadows aren't black!" Now well, they are here. All right, so I'm now going to change the prefix to Mozilla and just go ahead and give the default box-shadow as well. So I am going to go ahead and save that and preview this in one of my browsers. So I'll just look at this in Firefox for the time-being and if I scroll down, look at that lovely little drop shadows.

And of course I have found that with drop shadows a little bit goes a long, long way. All right, so I am going to go ahead and close that and I'm just going to copy this. Now the reason I am going to copy this is one of the great mistakes that I see a lot of designers make is in using different types of drop shadows for different regions on your page, even changing the offset values. Number one, you want the light source to be consistent, and number two, the distance of the shadow and the blurriness of the shadow indicates the depth of the shadow, how far away is the object from the surface that's guessing the shadow upon.

If you use various drop shadows for all these different elements, it's really going to confuse the user. You're going to have this weird stacking order going on. So unless you really intend to make something look like it's floating much further off the surface than the other elements, you want to stay consistent here. Okay, now with that being said I am going to scroll down to about line 682. So we need to go down a ways. And I'm going to find that spotlight region, so it's actually for me on line 670. So I guess I lied to you, but it's around 682.

So on line 670 find that spotlight selector and I'm just going to go ahead and paste those same values. So if I save this and again preview that in my browser now our Spotlight has exactly the same drop shadow, nice! And so we get some consistency in the design. It's not overwhelming. The drop shadow isn't so large and so blurry that it's annoying or even distracting. It's really enhancing the design at this point. Now, I mentioned that we could modify the syntax and I specifically mentioned that we could modify the syntax to make it look like there is an inner shadow going on.

Well if you remember in the movie that we did on text shadows, I showed you how you could pass multiple shadows for the same object and just sort of layer those shadows to create really interesting like glow effects. You can do exactly the same thing for your box shadows and we have an inset keyword that allows us to take the box- shadow and move it inside the element as well, which is really cool. Okay, so going back to our code and staying with our spotlight element what I'm going to do is I'm just going to go ahead and pass a couple of shadows prior to our last drop shadow here.

So what I'm going to do is type in inset, so the keyword inset, and then a space, 2px 2px 3px, and then the color is going to be #999, so sort of a ray value and then a comma. Now, I want to show you what a single inset will do and this is what we're working on the WebKit vendor prefix without having to type this over again I'm just going to preview this say in Safari. I am going to scroll down and you can see that we now have that inset drop shadow and currently right on the inside edge.

Now, because of the offset that we gave it, 2 pixels and 2 pixels, we really only have it in this upper left-hand corner so we wanted that inner shadow all the way around it to make it look like there was a little bit of an emboss to this, then all we have to do is pass another inset shadow and simply reverse those values. So I am going to go ahead and do that next. So I am going to go back into my code and right after my first comma separated drop shadow I'm going to do another inset. And then this time I'm going to do -2px -2px, and I still want to do a 3px blur and still #999 for the color.

Once again I need to put a comma in order to separate these drop shadows. So I can save that, try that again in Safari, and now notice that I have that sort of inset shadow going all the way around giving a sort of this nice sort of embossed look, almost like a pillow embossed on this. So I am going to close that and I am going to simply copy and paste these guys into the other shadows. Now make sure that you maintain that comma separation between those drop shadows so the browsers know that you're actually asking for three separate shadows.

So if I save that and try that in say Firefox, there we go. It works perfectly. Now, I am definitely not one of those instructors that never reveals the man behind the curtain if you will. You'll notice that I tested in Safari, you'll notice I tested in Firefox, and all throughout this movie I've been doing a lot in Chrome, but I didn't test this in Chrome. Why not? Because I wanted you to see this is. This is what happens when we use experimental properties. So everything is working out just fantastic until we get here and here in Chrome.

Chrome on the PC is having trouble with the border radius and the inset shadow at the same time. It's having a little bit of issue with that. It's not clipping it properly. Now I want to say that in testing this on the Mac I did not have that problem in Chrome on the Mac. It's only a problem on Chrome on the PC. And this is something that can really come up and bite designers if you're not testing cross-platform. If I were working on a Mac only and I tested that on Chrome, Safari, Firefox, you might start to feel pretty good about it and probably release it out into the wild. Then if somebody emailed me and say, "Hey! I'm looking to this in Chrome and it looks bad. Why is this?", I really wouldn't have an answer for him.

So make sure you test thoroughly so that you understand when techniques work in certain instances and when they don't, even if it's from one browser to another. Now with that in mind, support for box- shadow is fairly broad. WebKit and Firefox require the use of the vendor prefixes, as we have been using, but with Firefox they have dropped the prefix for version 4. Now, because box shadows are so easy to add I do feel the need to point out and I've said it before they are so easy to abuse. Drop shadows have long been the butt of a bunch of designer jokes based on their occasionally overeager use.

Still if you use them thoughtfully, box shadows do give us one more tool in CSS3 that's going to assist you in creating really visually compelling content, but again be sure to test thoroughly so that you know that the techniques that you're using are going to work cross-browser and cross-platform.

Find answers to the most frequently asked questions about CSS3 First Look.


Expand all | Collapse all
Please wait...
Q: I'm following along with the video "Transparency in CSS3".  James shows us how to achieve transparency in Internet Explorer by going to Kimili.com and entering a HSLA value to generate code for transparency.

Here that code:

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B); /* IE6 & 7 */ zoom: 1;

When this code is added to my HTML file it removes transparency on browsers that do in fact support it. So I'm left with NO transparency. Why?
A: The problem is in the filter code. If the IE background is called last, the first "transparent" declaration will remove all previous colors, regardless of browser. To resolve this, place the rule inside a conditional comment for IE or remove the "transparent" declaration at the front of the rule.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS3 First Look.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

CSS3 First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked