62 - Drop Shadow divs in Dreamweaver ~
✓ Code Hints
✓ Drop Shadow
✓ Rounded Corners
✓ ID vs. CLASS
• Learn how to add drop shadows and rounded corners to your divs.
• This tutorial is part of the Art Genre Project.
Other People's Work:
Here are examples of work inspired by this tutorial.
Step #1: Open your Work in Dreamweaver ~
✓ Open your index page.
✓ Create a new CSS rule …
✓ … make it a class …
✓ … and call it shadow
✓ Press OK and a new screen pops up - just hit OK for now …
Step #2: CSS Styles Panel ~
✓ Double-Click to open your styles sheet …
✓ Scroll down and find the shadow class you just made …
Step #3: CSS Styles Panel ~
✓ Copy and paste this code …
✓ … like this:
Step #4: Attach the class to the div ~
✓ Go back to the Source code of your HTML document …
✓ Find your container div …
✓ … and add the shadow class to the container div.
✓ Notice you now have an #ID and a .CLASS applied to the same div
Step #5: See if it Works ~
✓ Hit to view your work.
✓ Hopefully it looks something like this …
Step #6: What the code is doing ~
✓ The positive numbers are for the right side, and the negative values are for the left.
Step #7: You're not done yet ~
✓ Not all browsers support box-shadow so you must copy this code …
✓ … and paste it here:
Step #8: Rounded Corders ~
✓ You may also want to add rounded corners to your div like this:
✓ 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 …
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: Save & Attach ~
✓ Upload your site with the work you completed, attach the link to your site where the work is located, and continue working …
Other Resources: http://www.css3.info/preview/rounded-border/