Here is a CSS code to create shadows only on the left and right of a box which wasn't too easy to find. I found this one on a forum so I thought it might be useful for someone else. All the values can be changed to your liking but below is a sample.
div { width: 400px; height: 400px;
box-shadow: 6px 0 4px -4px #222 , -6px 0 4px -4px #222;
-moz-box-shadow: 6px 0 4px -4px #222, -6px 0 4px -4px #222;
-webkit-box-shadow: 6px 0 4px -4px #222, -6px 0 4px -4px #222;}
Understanding the code goes a bit like like this:
x-offset (right[+] or left[-])
y-offset (bottom[+] or top[-])
blur
spread
colour
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Update:
Since this seems to be a post that is viewed a lot, I thought I'd add a pen as well. I changed the values a little from the code above.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Update:
Since this seems to be a post that is viewed a lot, I thought I'd add a pen as well. I changed the values a little from the code above.
6 comments:
Nice blog with useful articles.... Thanks for sharing
Thanks! Glad you found it useful.
Thanks a lot!
very nice blog.
but when we increase its blurness or spread it rather then taking for 2 side it show the shadow form all the side.
regs/Deepa
div {
border:5px solid #4FFFA1;
padding:30px;
background:#F6FFA1;
width:100px;
box-shadow: 5px 0 2px black;
}
shadow on one side
http://www.corelangs.com/css/box/round.html
css shadow
ling
Thanq...
Post a Comment