Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Ah, drop shadows! What would designers be without drop shadows? While it's easy to fake drop shadows by creating images that already have them, what if you would like the freedom to apply drop shadows to any image you want regardless of size? Well, that would be great, and CSS allows us to do just that very thing. Now, as with every CSS based technique, there is always exceptions to the rules. The technique I'm going to show you is but one of multiple drop shadow techniques. For brevity's sake, this technique doesn't use true transparent drop shadows. Rather I have created a drop shadow graphic that blends into the existing background.
Alpha transparency is doable but requires the use of PNGs and GIFs, and that can get a little tricky in certain browsers. I first saw this technique demonstrated in a tutorial written by Dan Cederholm. Dan assures us that he got it from somebody else, so who really knows who thought of it first. That's really beside the point, because I'm going to show you my particular flavor of it, and because in almost every case you will have to tweak some of the specifics based on your particular design or needs. We will discuss both the base technique here, as well as what was done to tweak it in our particular layout.
Creating drop shadows via CSS requires a little extra work on your part. Each image that needs a drop shadow will be wrapped in a div tag that is assigned a class, and that class will handle all the drop shadow and positioning information for the graphic. The drop shadow graphic itself is going to be a large simple file that contains only the drop shadow. I have got our drop shadow open so that you can take a look at it. In this case, the graphic is around 900 pixels x 900 pixels and it contains a drop shadow that is 4 pixels wide on the right and bottom edges.
And this is important, so I'm going to zoom up on this so you can really see what I'm talking about. This is the top right edge right here. You can see that this drop shadow only lasts for 4 pixels, and on the bottom quarter, it's also 4 pixels that way. The top and left sides don't have any drop shadow applied to them at all, so this is designed to be a bottom right drop shadow, with a little bit offset. So why is this image so big? Well, we want to make sure that the drop shadow is bigger than any graphic that we might be using. That way we'll have plenty of drop shadow to reveal as images get larger.
The drop shadow will be applied to the wrapper div as a background graphic. Then we have to float the wrapper div, and this will call the wrapper to shrink wrap around the image, regardless of image size. Next, you set a position attribute to relative on the image, and move it in a negative direction away from the drop shadow. This will offset it by the width of the drop shadow. Now, if you have never worked with positioning or floating elements, don't worry, there is a whole chapter on layout in this title, but I think you can see how important it is that you understand all of those CSS techniques before you really tackle something like this.
So I'm going to switch back over to Dreamweaver, and I have my 06_07 file open. If you notice, something looks a little odd about my images. Well, more on that in just a moment. But if I click on this top image in the New York City article, I can see using the tag selector that there is a div tag around that with the class of shadow. If I go to my CSS Styles panel, if you browse all the way down to the bottom of your styles, so you can see we already have a class selector of shadow, and it's got a few things in it. For example, the float left that's going ahead and shrink-wrapping that down.
We have a relative position on it. That's going to allow us to move our image round inside of it relative to this. We have got some margins that are keeping elements away from it. Well, we need to go ahead and add our background graphics. So what I'm going to do is double-click on the shadow class, go to my Background property, and I'm going to browse for my background image. Go ahead and browse to the 06_07 folder, and open up the _images directory. What you are going to look for is you are going to look for the drop_shadow.gif. You want to make sure that that's around 900x900 pixels.
Mine says 895, so it's real close. It looks just like a big empty white graphic, although we know that it has that little drop shadow on the bottom right corner. I am going to go ahead and click OK, and where we position this is incredibly important. First off, I'm going to say no-repeat. The next thing I'm going to do is the Background-position (X) is going to be right, the Background- position (Y) is going to be bottom. Now, think about what that's going to do. It's going to take that bottom right hand corner where the drop shadow is and line that up with the bottom right hand corner of this shadow div tag.
By offsetting the image we are going to be able to see this. Now, I'm going to go ahead and click OK and save the file. Now, if we previewed this right now, you still really wouldn't see anything, and I'll show you. If I preview that in my browser, I can see there is my image, but there is no drop shadow. The reason is the drop shadow is being entirely covered up right now by this image. So if we can move the image out of the way slightly, we should be able to see the drop shadow. So next, I'm going to go into my CSS. So scroll up and find the #mainContent img rule.
Now, that is a generic rule that's targeting all the images inside the main content. So I don't really have something that's really specific here for only the images that I want to put drop shadows on. This rule is pretty much saying I'm going to apply drop shadows to all images in the main content. So I'm going to go ahead and double- click that and I'm going to go down to the Positioning attribute. I want to change this to relative. Now, most examples that I have seen of this technique use a negative margin to offset the image. I like using relative positioning offsets, because I found it to be more stable across multiple browsers.
The next thing I'm going to do is to give it a Left value of -4 pixels, and a Top value of -4 pixels. Now remember that's the width of our drop shadow, so we are moving our image to the left and up by 4 pixels. That should reveal just the drop shadow and nothing else. I am going to go ahead and click OK, do a Save All, and preview that in my browser. Sure enough, cool, there is our drop shadow on our image. Now, if I scroll down, I notice that not every image in here has a drop shadow. One of the benefits of this technique is that you can target any image that you want to have the drop shadow.
Now, in the case of our shadow class selector that we have written, it's also controlling a lot of the positioning of the image. I'll talk more about that in just a moment, and that's why this other image is not positioning properly. So at this point we have made the decision to have every image in here of a drop shadow and now we have tied in some positioning with it as well. So I'm going to go ahead and close that and let's see how easy it is to apply a drop shadow. I'm going to scroll down, find our second image and select that, so I'm just going to click on this Chicago image down here. Going up to my Insert toolbar, I'm going to go to my Common objects and I want to insert a div tag.
There is a reason that I selected the image beforehand, and if you have it selected, when you click the Insert Div Tag icon, it's going to default to wrapping around the selection. So it assumes you want to put a div tag around that element, and indeed we do. We also want to assign a class, so I'm going to go ahead and give this a class of shadow. As soon as I do that and click OK, you can see what happens. I'm going to save the file, preview that in my browser, and now its drop shadows is working as well. That's pretty simple, right? Well, not really. What I didn't show you is that due to the fact that we have to float the outer div tag, the entire layout had to change to accommodate that float.
The main content now floats to the right to contain the image float, and the h2 tags need clearing to prevent them from wrapping the images. The images are now being centered by positioning the wrapper div tag, not the more generic auto-margin technique. So again, if this doesn't really meaning anything to you, don't panic. In the chapter on layout we cover all those topics. What I'm trying to illustrate however is that most techniques don't work perfectly 100% of the time. You will need to learn to be flexible and plan ahead so that you don't have to choose between your original layout and your drop shadows.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.