- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I’m trying to add a css drop shadow to the header, but I’m not getting any change in the appearance.
html:
The Elements | About | Work | Contact | Home
css:
div.shadow {
-moz-box-shadow: 5px 15px 5px 0px #000;
-webkit-box-shadow: 5px 15px 5px 0px #000;
box-shadow: 5px 15px 5px 0px #000;
}
div#header {
background-color: #5c5d60;
position: absolute;
margin-bottom: 10px;
top: 0px;
left: 0px;
width: 960px;
height: 83px;
}
I appreciate your help!
And i already changed
to
you have too many numbers in the value of your box-shadow property.
Also your navigation is in a paragraph tag…
Where does
go in relation to
?
I believe the shadow didn’t work because you did not have a set width on the shadow div. You are using extra markup than needed so I condensed and applied the code below for you.
HTML
CSS
#header {
background-color: #5c5d60;
width: 960px;
height: 83px;
-moz-box-shadow: 5px 15px 5px 0px #000;
-webkit-box-shadow: 5px 15px 5px 0px #000;
box-shadow: 5px 15px 5px 0px #000;
margin-bottom: 10px;
}
@Dogsghost, this person does not have too many “numbers” inside the shadow.
box-shadow is applied like this:
horizontal shadow
vertical shadow
blur
spread
color
inset
Adding a width will not fix the issue @ChristopherBurton
@ChristopherBurton Has it right: http://codepen.io/anon/pen/jeycp