[HD] Website Drop Shadow with CSS Dreamweaver Tutorial!

Let’s learn how to create a drop shadow that runs along your site, and, if your site expands, expands with it! We will start in Photoshop where we will create a nice little drop shadow graphic and then it’s off to Dreamweaver for some CSS and Div-tacular fun… yep that was certifiably lame, but enjoy the video anyway!

Be sure to check out http://www.tutvid.com
Check out the blog @ http://tutvid.wordpress.com

Duration : 0:10:0


Technorati Tags: , , , , , , , , , , , , , , , , ,

This entry was posted in making a website and tagged , , , , , , , , , , , , , , , , , . Bookmark the permalink.

25 Responses to [HD] Website Drop Shadow with CSS Dreamweaver Tutorial!

  1. geezermeezer says:

    @meggles48

    its …
    @meggles48

    its ok, i think i worked it out.

    by the way..ive created a drop down menu in css and html, but everytime i hover over the button, the dropdown menu comes down and pushes all my other content down the page, would you know why by any chance. I didnt use absolute positioning, just margins. thanks

  2. meggles48 says:

    @geezermeezer Would …
    @geezermeezer Would that be in your code view? Would the css not align the coding for you?

  3. psfrancogalerie says:

    I have to echo a …
    I have to echo a comment made about 7 months ago….gaps occur (not all the time) in between the slices once imported into Dreamweaver so the shadow doesn’t appear smooth…how do I troubleshoot that?

  4. thefreezecopper says:

    thanks :)
    thanks :)

  5. JDub2k9 says:

    thanks, helped me a …
    thanks, helped me a lot

  6. geezermeezer says:

    i need your help …
    i need your help with sumtin, you know the 2 dropshadows on both sides of the webpage, how do you code it up using html? and where do you position that coding? for example, which div id or is it within the body section or outside. Thanks =)

  7. mohsahhzad says:

    Awesome, Awesome …
    Awesome, Awesome Thanx

    Regards

  8. MrMartivdz says:

    @XclusiveMusik you …
    @XclusiveMusik you just have to delete the background then so you only see the shadow and the rest is transparant and then save for web and devices and then PNG-24 and make sure transparancy is checked. and then you have it! on your gradient.

  9. MrCheneque says:

    @inbornfilms the …
    @inbornfilms the same happens to me… donĀ“t know why…when I preview it works fine on Firefox and Chrome but it changes on IE

  10. MrNuun says:

    I Love you O_O <3 …
    I Love you O_O <3 You’re so amazing! Really good job. :)

  11. Preeemo says:

    great tutorial
    great tutorial

  12. gregorygroupnet says:

    tutvid, Another …
    tutvid, Another point to consider.

  13. willzurmacht says:

    Perfect! thank you …
    Perfect! thank you so much

  14. ohgarden says:

    I always learn so …
    I always learn so MUCH with the tutvid tutorials! THANK YOU!!! I hope to have my site up soon to share with you what I have learned!

  15. ikristher says:

    thanks men
    thanks men

  16. inbornfilms says:

    when i set left a …
    when i set left a right margin to auto it dosent change anything it worked once a while ago but not anymore… how do i fix this

  17. piccolodick69 says:

    Very useful, thanks …
    Very useful, thanks a lot man.

  18. DaedalusIV says:

    superb tutorial!
    superb tutorial!

  19. double1912 says:

    Thanks for the …
    Thanks for the tutorial.But there is only a small problem with it as it leaves a small gap each time dreamweaver repeat the picture.

  20. khuram855 says:

    Hello Please help …
    Hello Please help me when you open photoshop and create a new document i can see a dropshadow on photoshop white page like you didn’t have transparent background you have white and dropshadow on it so can i make for my photoshop to get dropshadow

  21. momo1tm says:

    cs4
    cs4

  22. proverbs271 says:

    DUDE! thankyou very …
    DUDE! thankyou very much for this guide! it was so helpfull!

    ty ^^

  23. cmtmusik says:

    Thank you!

    You …
    Thank you!

    You don’t lose time for speaking, that’s great!

  24. pcgod8 says:

    Yes, but you’ll …
    Yes, but you’ll need to save it as a PNG file and delete the background layer leaving a transparent background.

  25. eternity899 says:

    hmm since we’re …
    hmm since we’re talking efficiency u can simply leave the left most 20 pixels and the right most reducing the size of the shadow greatly since the rest isn’t visible anyway

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>