common object example

Summary:

Drop Shadow divs in Dreamweaver

    ●   Learn how to add drop shadows and rounded corners to your divs.


Learn About:

Code Hints Drop Shadow Rounded Corners ID vs. CLASS

 •   This tutorial is part of the Art Genre , What in the World?, and Portfolio Projects.

Other People's Work:

Here are examples of work inspired by this tutorial.

drop shadow example

Step #1: Open your Work in Dreamweaver ~

Open your index page.

open-index-page.png

Create a new CSS rule …

new rule

… make it a class …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… and call it shadow

shadow class tag

Press OK and a new screen pops up - just hit OK for now …

just hit ok for now


Step #2: CSS Styles Panel ~

Double-Click to open your styles sheet …

open your styles sheet

Scroll down and find the shadow class you just made …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #3: CSS Styles Panel ~

Copy and paste this code …

         box-shadow:  7px 0px 10px -5px #000, -7px 0px 10px -5px #000; 

      

… like this:

shadow code


Step #4: Attach the class to the div ~

Go back to the Source code of your HTML document …

source code

Find your container div …

container id

… and add the shadow class to the container div.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Notice you now have an #ID and a .CLASS applied to the same div

image


Step #5: See if it Works ~

Hit small to view your work.

preview

Hopefully it looks something like this …

drop shadow div


Step #6: What the code is doing ~

The positive numbers are for the right side, and the negative values are for the left.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #7: You're not done yet ~

Not all browsers support box-shadow so you must copy this code …

box-shadow:  7px 0px 10px -5px #000, -7px 0px 10px -5px #000; 
-webkit-box-shadow:  7px 0px 10px -5px #000, -7px 0px 10px -5px #000;
-moz-box-shadow:  7px 0px 10px -5px #000, -7px 0px 10px -5px #000;     
        

… and paste it here:

complete shadow code


Step #8: Rounded Corders ~

You may also want to add rounded corners to your div like this:

box-shadow:  7px 0px 10px -5px #000, -7px 0px 10px -5px #000; 
-webkit-box-shadow:  7px 0px 10px -5px #000, -7px 0px 10px -5px #000; 
-moz-box-shadow:  7px 0px 10px -5px #000, -7px 0px 10px -5px #000;     
border-radius:  20px; 
-webkit-border-radius:  20px; 
-moz-border-radius:  20px; 

More variations can be found here: http://www.css3.info/preview/rounded-border/


Step #9: Padding the container div ~

Also add padding and experiment with distances in pixels …

         
box-shadow:  7px 0px 10px -5px #000, -7px 0px 10px -5px #000; 
-webkit-box-shadow:  7px 0px 10px -5px #000, -7px 0px 10px -5px #000; 
-moz-box-shadow:  7px 0px 10px -5px #000, -7px 0px 10px -5px #000;     
border-radius:  20px; 
-webkit-border-radius:  20px; 
-moz-border-radius:  20px; 
padding: 25px; 

Step #10: Borders ~

Try adding borders to your div …

Here are examples of the many kinds of borders you can try: http://azizlove.hexat.com/file/hexat/div

Check how your web page reacts to these changes!


Last Step: Upload your Site ~

Save and upload your files with the completed code.

upload your site

Attach the URL of your site, and continue working…


Other Resources: http://www.css3.info/preview/rounded-border/ and http://www.impressivewebs.com/multiple-borders-css/ and http://azizlove.hexat.com/file/hexat/div