Progressively transparent image with CSS3?

Posted by Teiviere on Stack Overflow See other posts from Stack Overflow or by Teiviere
Published on 2012-04-10T05:25:10Z Indexed on 2012/04/10 5:29 UTC
Read the original article Hit count: 160

Filed under:

css3

I want images that gradually "gradient" to blend in with the background color (white/transparent) as it gets to the bottom. Is there a way I can apply a CSS3 gradient or some sort of gradual transparency using CSS3 to the bottom edges of the image so it looks like its fading into the background color? I know I can make images with some photoeditor to achieve that effect, but I am curious to know if CSS3 can accomplish it.

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

Developer IT

Progressively transparent image with CSS3? - Developer IT

Progressively transparent image with CSS3?

css3

Related posts about css3

A Few of My Favorite HTML5 and CSS3 Online Tools

CSS3 - Validator - RGBA wrong?

CSS3 webkit fading in a tooltip.

Poll: CSS3 color transparency

Webkit CSS3 for Mozilla

Categories cloud