CSS3 Box Shadow Fade Out Effect

Posted by Eric Bergman on Stack Overflow See other posts from Stack Overflow or by Eric Bergman
Published on 2012-09-17T03:35:06Z Indexed on 2012/09/17 3:37 UTC
Read the original article Hit count: 256

Filed under:

css3

|

box-shadow

|

insets

Is it possible to achieve a Fadeout effect with CSS3 Box Shadow?

Here's what I have so far? This only adds inset shadow to the vertical sides but I need to achieve a fade out effect at the top.

-moz-box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;
-webkit-box-shadow: inset 5px 0 5px -5px #a4a4a4, inset -5px 0 5px -5px #a4a4a4;
box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;

See the image below to see the Expected Results and what I currently have.

Expected and Current Results

© Stack Overflow or respective owner

Related posts about css3

A Few of My Favorite HTML5 and CSS3 Online Tools

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
I really enjoy coding up HTML5, CSS3, and JavaScript applications but there are some things that I’m better off writing with the help of a development tool. For example, CSS3 gradients aren’t exactly the most fun thing to write by hand and the same could be said for animations, transforms, or styles… >>> More
CSS3 - Validator - RGBA wrong?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using the W3C CSS Validator with the Profile CSS3 but the validator says that my CSS rgba()'s are wrong. I looked up the Color Module Level 3, and the syntax is the same as mine. I also tried the Dev-Validator, same result. Example input: div.class { border: 1px solid rgba(0, 0, 0, 0.5); } Am… >>> More
CSS3 webkit fading in a tooltip.

as seen on Stack Overflow - Search for 'Stack Overflow'
HI, I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's positioned left:-999px;. So basically, what am I doing wrong/is what I was… >>> More
Poll: CSS3 color transparency

as seen on Stack Overflow - Search for 'Stack Overflow'
Many of you already know that you can express colors in your stylesheets like: color: #FFF; color: #FFFFFF; color: rgb(255,255,255); color: hsl(100%,100%,100%); and that you can use rgba() and hsla() to express color transparency. Do you think it would be a good idea to be able to express color… >>> More
Webkit CSS3 for Mozilla

as seen on Stack Overflow - Search for 'Stack Overflow'
What is the equivalent of -webkit-transition: opacity 0.6s linear; in -moz? I tried replacing -webkit with -moz but nothing happened. I even tried extending it to -moz-transition-property/duration but with no success. >>> More

Related posts about box-shadow

box-shadow : is there a "box-shadow-color" ?

as seen on Stack Overflow - Search for 'Stack Overflow'
Note: CSS novice here. Be gentle. ;-) I have the following CSS: ... -webkit-box-shadow: inset 0px 0px 2px #a00; -moz-box-shadow: inset 0px 0px 2px #a00; ... Now I am trying to extract that color to make the page colors "skinnable". Is there any way of doing this? Simply removing the color… >>> More
Twitter Bootstrap styling conflicts with plug-ins like jqGrid and other third part libraries

as seen on Geeks with Blogs - Search for 'Geeks with Blogs'
Issues:The concern is that the Twitter Bootstrap framework is that some of their css selectors are simply too generic and have incompatibility issues and conflicts with most third party plug-ins and css libraries, like jQuery-UI and jqGrid.My most pressing concern is only with the generic selector… >>> More
Box-shadow not working on Webkit?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I'm creating multiple borders to element using box-shadow, but they don't show at Webkit. What's wrong with this code? I'm using this four times to create shadow on each side, then border for extra border box-shadow: 1px 1px 0px rgba(0,0,0,0.1); Martti Laine >>> More
Emulating CSS3 border-radius and box-shadow in IE7/8

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm working on HTML for a small web application; the design calls for a content area with rounded corners and a drop shadow. I've been able to produce this with CSS3, and it works flawlessly on Firefox and Chrome: However, Internet Explorer 7 and 8 (not supporting CSS3) is a different story: Is… >>> More
Progressive Enhancement with box-shadow

as seen on Stack Overflow - Search for 'Stack Overflow'
I would like to use WebKit's box-shadow css property for a little drop-down. The code would look like: .drop_down{ -webkit-box-shadow: 1px 1px 4px #888; box-shadow: 1px 1px 4px #888; } However, for browsers that do not have this capability, I would like to use borders to approximate this drop… >>> More