CSS3 box shadow only on top left and right corners -
i need create shadow effect client can't figure out how done:
is possible pure css?
edit: here current css:
box-shadow: 0 0px 0px #fff, 0 -1px 15px #ccc, 0 0px 0px #fff, 0 0px 0px #fff; -webkit-box-shadow: 0 0px 0px #fff, 0 -1px 15px #ccc, 0 0px 0px #fff, 0 0px 0px #fff; -moz-box-shadow: 0 0px 0px #fff, 0 -1px 15px #ccc, 0 0px 0px #fff, 0 0px 0px #fff;
this other answer stole another stack overflow question
use spread value...
box-shadow has following values
box-shadow: x y blur spread color;
so use like..
box-shadow: 0px -10px 10px -10px black;
here answer same question
you can give multiple values box-shadow property eg
-moz-box-shadow: 0px 10px 12px 0px #000, 0px -10px 12px 0px #000; -webkit-box-shadow: 0px 10px 12px 0px #000, 0px -10px 12px 0px #000; box-shadow: 0px 10px 12px 0px #000, 0px -10px 12px 0px #000;
it drop shadow left , right only, can adapt requirements
edit
i looking op's post , think if tried this,
box-shadow: 0 0px 0px #fff, 0 -1px 15px #ccc, 0 0px 0px #fff, 0 -1px 15px #ccc;
i think should show way thinking should.
i assume values go in clockwise order borders or margins or whatever,
attribute: top, right, bottom, left;
and should able add value left right. might have play around little bit though.
Comments
Post a Comment