Summary:

Rounded divs with Drop Shadow 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 Home Sweet Home Portfolio Projects.

 

Other People's Work:

Here are examples of work inspired by this tutorial.


 


Step #1: Open your Work in Dreamweaver ~

Make sure your index page is open in Dreamweaver.

open-index-page.png


Step #2: CSS Styles Panel ~

Create a new CSS rule …

new rule

… make it a class …

… 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 #3: Open your Styles Sheet ~

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 #4: CSS Styles Panel ~

Copy and paste 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;     
	border-radius: 20px; 
	-webkit-border-radius: 20px; 
	-moz-border-radius: 20px; 

… like this:


Step #5: Attach the class to the div ~

Go back to the Source code of your HTML document …

source code

… find your #container or #header div - WHATEVER DIV YOU'RE WORKING ON …

container id

… and add the shadow class to the div.

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


Step #6: See if it Works ~

Hit small to view your work.

preview

Hopefully it looks something like this …

drop shadow div


Step #7: 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 and http://www.css3.info/preview/rounded-border/

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