Adobe Dreamweaver CS6 Creating Drop Shadows

We are now going to add the drop shadow effect to this box on the page, and we are going to walk through these CSS3 properties one at a time, so you can get a feel for how each of them works, because the homepage for our website has all of those properties combined on a few different objects on the page.0000

It is a little bit harder, using that type of a page, to show you what is actually happening with each of these properties.0022

Right now, I have drop-shadow.html open, and that is a part of the course files for this chapter; and if I open up this CSS Styles panel, I have a single box called css3props on the page.0030

I'll close up my Files panel; and now, what I am going to do is add the box-shadow property.0047

Now, that is a property that adds the little drop shadow around the box; and we can customize it a little bit.0054

I'm going to click the Add Property link in the Properties area of my CSS Styles panel; and if I use the dropdown and scroll down, you can see, I do have a box-shadow property listed.0062

I am going to click on that; now, if you want to do this the easy way, what you do is click this little icon; but what is nice about this is: you can see that it gives you the information.0080

First, it says "offset blur-radius spread-radius color"; so let's click on that, and you will be able to see the options available.0092

You can see, I have an inset; by default, it is offset; my X-Offset--I'll go ahead and raise that; and usually you don't want too much, but if you are unsure what to add, just add something and go from there.0102

I'll add 5 for X and Y; and my Blur and Spread, I can also add; so let's add a little bit of blur, and I'll add a little bit of spread and choose a color.0117

I'm going to make this a much darker blue here, so it's fairly obvious; let me go even darker than that--that will be my drop shadow for this lighter blue box.0132

I'll go ahead and click on that; when I click off, you can see, Dreamweaver has set up that property for me, and I can move this over just a little bit so you can see a little bit more.0144

Now, nothing has changed in Dreamweaver; we'll go ahead and save this.0156

If I go into Live View, you can also see: nothing has changed--these are definitely browser features, and what we are going to do is go through the browsers and take a look at them.0161

I'll start with Chrome; and when I open up Chrome, you can see, I do have a drop shadow effect.0174

It's a rather substantial one, actually; so that is why it's very quick to figure out how much drop shadow you want.0181

It is square, because I haven't rounded corners yet--that is another CSS property.0189

But this one is a little bit large: so it is working in Chrome, but it is a little too big; so what I can do is click this to edit it.0195

The X-Offset is a little wide, so I'll drop it down to 3; and my Y is, as well.0205

Now, the other thing I want to add is the blur radius: I'm going to blur it out a little bit more, so it's a little bit softer.0213

I'll click off of that, and we'll save, and take a look at that in Chrome...so here it is in Chrome, and you can see, that looks much nicer.0221

Now, I may want to drop that down a little bit more, depending upon what I want; I could also lighten or change the color; I could do whatever I wanted--you can see the properties that are available for this feature.0232

If I wanted it a lot more subtle (which I definitely think I would), I could play with that; so feel free to go ahead and play with some of this.0245

Let me change the Spread property; so I'll click this one more time, and the Spread radius I am going to drop down to 2; let's take a look at how that ends up working.0255

I'll go back out into Chrome and save my changes, and we'll take a look.0268

That is getting a little bit softer--I think that is a little bit better.0275

Now, that was Google Chrome; let's take a look at this in Firefox and see what Firefox does to it.0279

You can see, it does look a little bit different in Firefox--it's a little bit softer; so it's accepting those properties quite well in Firefox: my blur is kind of feathering out the color.0288

Chrome and Firefox--so far, so good; let me go down to Safari and see what happens...and this is an expandable box, so it will change depending upon the size of your browser window; but Safari looks fine, also.0303

What I mean by "looks fine" is: it is pretty consistent across those three browsers.0319

What happens if we get to a very old browser and take a look?--as I said, a lot of the people I work with--my clients who are at larger companies--are still using I.E. 8; and notice, it doesn't mess up the box--it just doesn't show.0326

There is nothing we can really do about Internet Explorer 8; there are some games and frameworks you can pull in, and those types of things, to try and get it to work; but I am not going to worry too much.0345

As long as that box looks OK, and I can still see the outline of the box in Internet Explorer 8, I am fine.0357

There are some proprietary prefixes that are available for box shadow; but based on what I am viewing in Safari, Firefox, and Chrome, it doesn't appear that...if I am going to test for these specific browsers in the versions I'm looking at, it's all working correctly without a proprietary prefix.0366

If I needed to add one, I'll show you where you do that: down at the bottom (let me open up my Files panel a little bit here) of the CSS Styles panel...I always keep it in this one, Show Only Set Properties, because it only shows me what I have added in terms of properties.0389

But if you click on the A to Z and scroll down, you will see: here are all those proprietary options for the different items.0411

We were using box-shadow for our drop shadow; and here it is: in case it's a version of Firefox that doesn't support it, I can always add this.0424

And notice, if I click on this, it's identical to the non-proprietary version, in terms of the Dreamweaver interface.0439

So, if you ever need to work with the proprietary prefixes, feel free to move over to this A to Z, and they will be listed: -moz is listed; ms for Microsoft; o for Opera; webkit for Safari and Chrome.0448

But we were able to get our box shadow to work without needing any of those proprietary prefixes.0468

That is the box-shadow property within CSS3, and also how you can apply the proprietary box-shadow prefixes (should you need to) from within the CSS Styles panel in Dreamweaver.0476