CSS3 box shadow only on top left and right corners -


i need create shadow effect client can't figure out how done:

enter image description here

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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -