[HD] Website Drop Shadow with CSS Dreamweaver Tutorial!

[Kankerzwijn]

Very very good! Maybe there are quicker ways, but still this is extremely helpfull!

Thanks sir!!

[BluejayWebDesign]

Good video!... but is there a decaffeinated version?

[wirizu]

thank you very much for this sir... it is very easy for beginners.

[ricawashington]

thank you a lot. very informative and easy to understand. exactly what i needed. yeah, maybe slow down so we can follow along without having to rewind. overall, nice vid and thank u so much

[anacuteangle]

@DirtyNineDJ, You're referring to a CSS3 technique which is not 'web-standards' recognised... yet. IE can't handle the code.

[DirtyNineDJ]

or you put this in your cointainer and ur done in 5 sec : box-shadow:0px 5px 23px #000;

[Koopa362]

@DirtyNineDJ not working in older or crappy browsers (IE,Opera)

[in2universe]

@DirtyNineDJ this made me laugh because this is a 10 minutes video on how to add shadows = too long.

[mrrobville]

@DirtyNineDJ Haha, Genius, it works like a charm!

[rhemax8]

or you could just click on your css and look to see how wide your wrapper is....

[glennwih]

Good video! Go slower next time.

[blackisredandblue]

That really looks better.

[novapixelsdesigns]

Amazing tutorial! Thank you! I've always known how to add a drop shadow by just using one simple color or a large file size image for the content-background, but not one for a background with multiply horizontal colors and images. Thank you so much for showing me this. My site looks even sexier now!

[nfox2206]

thank you so much for your videos, they are a huge help to me

[Crosstone123]

At first i thought tutvids were useless.. BUT I WAS WRONG!!!

[Montahue]

This and others of your tutorials is SO perfect for someone that learned pure html and dreamweaver once up on a time but when taking up webdesign again realised the old skills just don't cut it anymore.

Besides that your voice and and tempo is fantastic. There are zillions of dvd and/or commercial tutorial vids that dont come even close. I understand every thing you say, You dont spend even a second mumbling and that is something very important, especially if one dont speak english natively!

[delld600man]

phindservices . com for flash, php , web design, seo, web programming , ajax, html

[ZenCartEasyHelp]

Great video! Set up your ecommerce business for free with our Easy Help Zen Cart Tutorials:

[Pjgrimshaw]

Great video, and everything is explained very well. However, I would like to point out that it is far easier to apply a drop shadow, outer glow, or curved borders with CSS. The whole process takes about five minutes if you utilize the following code:

box-shadow: 0px 0px 50px #FFF; -moz-box-shadow: 0px 0px 50px #FFF; -webkit-box-shadow: 0px 0px 50px #FFF;

[Montahue]

@Pjgrimshaw But i think you talk about the new webkit stuff  (the absolutely latest browsers) and not what works with slightly old versions of IE or firefox? As much as i want to use the latest stuff i need my webpage to look good in a three years old browser

[novapixelsdesigns]

@Pjgrimshaw How browser-friendly is that code?

[Pjgrimshaw]

@novapixelsdesigns I have found that it is surprisingly stable along a pretty wide range of browsers, and honestly, I think you would have better luck using CSS, since in the long run it will be infinitely more efficient on the design end.

[audiman2009]

Thank you! Instead of doing a drop shadow I used this to create a white outer glow!

[Kamalyzz]

I had a quistion plz pm me :)

[jarel101]

For some reason when I apply my drop shadow I get small gaps within it, If someone knows the solution to my problem please let me know

[bjammin2188]

@jarel101

I get the same problem. I NEED a solution please help!

[Pop2Lock]

@bjammin2188 It's weird. If you placed it right and applied the repeat-y correctly, you shouldn't be facing any kind of problem.

[GamesForLifes999]

@jarel101 hmmm. Mybe beacause of Color profile. When you made new in photoshop ---> NEW---> click there down Advanced and try to change color profile to Adobe rgb (1998)

[GamesForLifes999]

@jarel101 Hope it works =P

[aobujor]

you're great with this tutorials ... 

[Pjiggy]

So let's say I want something IN my wrap, my viewer, to have a drop shadow on the sides and under it. how would I do that? Any suggestions? Help? PLEASE?!

[fabweightloss]

Hi, can I create the same thing with adobe photoshop and arachnophilia?

thx.

[XxCrazyxXxBoyxX]

Can I make the website without those edges ?? I mean I need to make the website to fit the screen

[nokhazali]

Visit for create your own free Website domain hosting step by step training Dreamweavercstutorials.co.cc

[afk4dyz]

I can't get mine to work. could you help? I followed you step by step and it didn't work. Please help.



[BABURAOIU]

what if my site has a gradient background.... or some image??

[MakePeacenotVVar]

@BABURAOIU

set your background transparent instead of a color and save it as png

[BABURAOIU]

@MakePeacenotVVar i dont want a transparent bg, i want to keep the gradient...

[MakePeacenotVVar]

@BABURAOIU

sure. i ment, set the background of the photoshop file (shadow) transparent instead of grey. If you did so, you can put the shadow on gradient backgrounds

[BABURAOIU]

@MakePeacenotVVar yeah i did that right after my first comment, but that wasn't that effective :(

[boogybass]

Your technique works very well. I tried it out and it works perfectly! Thank you!

[MILLIEGAIL]

Try to make a profile free and find Naughty women mworld5.info

[AndTen061]

Or I could just find another tutorial which is what I did  ;P

[AndTen061]

WAY Too Fast! ppl are watching this because they want to learn how to make a drop shadow not be awe struck by how fast you do it.

[syn2142]

@AndTen061 this is a video. just hit the pause button :) or rewatch it.

[adoptionhood]

How would I apply the drop shadow feature to a php site?

[ChainsawCastration]

@adoptionhood Same way.

[gazcom]

That was amazing, been trying to do this for a few days . . .and now I know. Thanx

[Flain33]

and in CSS 3...

-webkit-box-shadow { 5px 5px 7px #888; }

-moz-box-shadow { 5px 5px 7px #888; }

[Gamebattles170]

You Sound Like A Fucking Prick 

[wasimsworld]

@Gamebattles170 WHAT was the point of that comment. haven't you got any respect for people who teach? I don't about you but I always have respect for people that i learn from.

[7ofSpades]

Thanks, that was a very clear and easy-to-follow tuorial. Really appreciate it :)

[negociosmillonarios]

Speaking of website, the best deal you can have is: a website and a business of unlimited income. You have 7-day trial now!

[HiddenAbilities]

Make things smipler: use gimp xD Or any other art program :P (No smart-a$* intended) lol

Great tutorial, though :D Thanks

[dnfoss85]

Nice! Easiest method I've seen, with a descriptive and articulate presentation. Im gonna try to make the drop shadow onto a transparent background in fw so the shadow accommodates whatever background i have.

[RKMultiMedia87]

you are very helpful and very detailed and specific, most people need that even the ones who know everything or think they know everything, they still miss a thing or two. I always watch your videos in full before even working on things step by step with your instructions, i enjoy your tut vid's very much!. much appreciated..Thanks!

[nicorap74]

Thank you! It was very usefull to me.

[SleepingPeace]

Nice tutorial, always wondered how they did that.

[allarajkiran]

very nice tutorial

[Fatimah1205]

He is greattttt

thank you so much I learn alot from you

[freshymind]

Awesome guy! I'ad been searching for this! You made CSS easier as well as my life!

[nicorap74]

I love it!

[stormyweathers08]

What it fails to mention is if this effect right from the start, you'll have to go around referencing all other tags in relation to the shadow effect, which replaces the wrapper a the parent div tag!!!!!

[thetechall]

thats not the best way to do it

[shankhan10]

@thetechall it's very easy to find error in others

so it's not enoough to sya that other way of doing is not good

if u realy thik it's not best then upload a video like this in whihc u show the best way

otherwise it's not good to jsut say "it's not the best way'

[thetechall]

@shankhan10 actually its perfectly well to say its not the best way,

1st thing: it isnt theres a better way (looks better and loads faster)

and secondly, free country = freedom of speach

[shankhan10]

@thetechall

about 1'st part : is it perfect to say somting or not is always based on what u believe.

well i belive on constuctive criticism not districtive one

that says

that if someone know a better solution then other one then it's not enough to tell other "hey man u r wrong".

one must also provide the solution which he think is better

so if u realy belive on contructive critism then thats not perfect

or if u have ur own defination of contructive critism then comeon share with me

[shankhan10]

@thetechall about second part:

comeon man this is not an issue of freedom of speech.

ofcourse u can way what u wants

but other can also have their opnion about what u said

and that's all what i did

[dazmont13]

Hey i need to ask. I have a problem. How can i edit every each buttons? For expample what if i want 'home' button to have itself background, the same for other buttons. How to place background to each buttons? Plz HELP

[atrainhxdotcom]

Very, very helpful. Like your style, man. Thanks for sharing this!

[MrRichiesixx]

You rock man, thanks for these tuts. I seriously appreciate the time you spend making these videos.

[psfrancogalerie]

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?

[thefreezecopper]

thanks :)

[JDub2k9]

thanks, helped me a lot

[geezermeezer]

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 =)

[meggles48]

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

[geezermeezer]

@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

[meggles48]

@geezermeezer sorry, i dont. i'm just a beginner! :)

[mohsahhzad]

Awesome, Awesome Thanx

Regards

[MrNuun]

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

[Preeemo]

great tutorial

[gregorygroupnet]

tutvid, Another point to consider.

[willzurmacht]

Perfect! thank you so much

[ohgarden]

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!

[ikristher]

thanks men

[inbornfilms]

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

[MrCheneque]

@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

[DaedalusIV]

superb tutorial!

[double1912]

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.

[khuram855]

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

[proverbs271]

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

ty ^^

[cmtmusik]

Thank you!

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

[eternity899]

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

[XclusiveMusik]

thanks man rlly good tutorial... but can u also do this shadow effect if u have a gradient background ???

[pcgod8]

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

[MrMartivdz]

@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.

[michaelandtristan]

what version of dream weaver is that? cs3 or cs4?

[momo1tm]

cs4

[gatikonice]

Thanks, great stuff.

[under9stars]

Thank you! Thank you! Thank you!

[DrTadych]

Thanks! great job!!

[akeu08]

as usual, great tut. Very fast but clear explanation for non English native :) Thanks man

[clocktowerlodger]

Nice tut. But what about the bottom edge of the page?

[JohnyFront]

@clocktowerlodger do it the same way you did with the left and right shadows.

Simple eh?

[mbwinther]

@clocktowerlodger Just tilt your screen 90 degrees.

[jomann18]

Just a question... how many times are you going to change the video thumbnail before your happy with it? hehe

[ChaosmanOne]

All that just to make a little gray outline...

[downe74]

lol it wouldn't take 10 mins to do it. just to teach it. would only take about 2 minutes if u know what your doing.

[MmansoorM]

please make another tutorial and add search bar next to "MISC links".

[willzurmacht]

nice thank you very much. wew! what a hero, this vid showed on my subscriptions and I really nid it now for my project. thanks :)

[blackcat2enterprises]

This is great. I enjoy your videos about anything with photoshop in it because I always learn new tricks from them. =)

I don't use dreamweaver. I hand code instead but I can still use these tips so I am very glad I watched this for all the great tips. =)

- Heidi

[maimingbetty]

Thanks so much again! You do great tutorials!

[iseebathtubs]

great tut, thanks :)

[CMDProductionsTM]

tutvid ftw!

[sNyoNz]

nice men.. u are the best

I love your tuts 5*

[ha2360]

win

[thegeekproductions]

KEWL

[JamieJWSmith]

Great! :-D

[FlStudioo]

10th comment!

[Overage2000]

WOW your just fucking special

[ha2360]

he is

[actingzach]

ha yeah really

[McItano]

Yes I learned something :D

Great tut man you´re the best

[WizardShroom]

Thanks again! Great tutorial.

[TAAANEX]

thanks

[DigitalPhantomFX]

really cool 5/5. very helpful

[SfumatoMusic]

nice man!

[RivalTech]

Awesome!

3rd comment ;D

XD

Nobody cares.. buht whatever

hehe

[lorik1641]

Nice Video!

[Omeguis]

GREAT! thanks!!