5

Is there any way i could do an image to transparent gradient in a Background Image in CSS3?

I have tried this: http://jsfiddle.net/meo/e95pw/3/

The goal is to do a mirroring effect in CSS3.

I can not find out the background color behind the reflection, because it could be that there is a background image or pattern.

Any input is welcome.

edit what i need is Photoshop Image Mask but in CSS.

meo
  • 28,823
  • 17
  • 81
  • 121

4 Answers4

3

You can achieve this in pure CSS3:

http://jsfiddle.net/g105b/xaX6r/

/* Example for webkit only */
img{
    margin: 0;
    padding: 0;
    -webkit-box-reflect: below 1px
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.4, transparent), to(white));
}
Greg
  • 19,156
  • 15
  • 75
  • 100
  • i had this solution before, but i need it to work in FF to this is why i wated to use the gradients... +1 – meo Nov 30 '10 at 12:54
2

Here is a demo that shows it can be done, http://duopixel.com/stack/test.html, check in webkit and Firefox.

Explanation: the only way to mask an image in Firefox is through svg masks: https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content,

It can be done more elegantly (with an svg from an external source) but this makes it easier to understand.

The actual code is pretty simple, just...

mask: url(#id);

Or if you want to reference an external source:

mask: url(test.html#id);

Also, the code is on my server because you must serve the html as xhtml, otherwise Firefox ignores the mask. This can be done through .htaccess like this:

RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - [T=application/xhtml+xml]

jsfiddle is not serving xhtml/application

methodofaction
  • 64,987
  • 20
  • 140
  • 158
  • +1 i like this solution. But i want to do a JQ plugin with it, so ots not a good option that the pages has to be served as xhtml/application :( I hoped for a CSS Solution. – meo Dec 03 '10 at 07:32
2

This is not CSS3, but might help: Reflection.js for jQuery

This script works in all browsers supporting the canvas tag: Firefox 1.5+, Opera 9+, Safari 2+, Camino and Google Chrome. It also works in Internet Explorer 6+ by using an alternative drawing technique.

Reflections can be added to any image tag over any kind of background (even image backgrounds!).

Community
  • 1
  • 1
Jeff Ogata
  • 52,923
  • 17
  • 108
  • 124
  • they to it with canvas to :/ i would like a solution with CSS – meo Dec 06 '10 at 10:03
  • @meo, just curious in case I want to do this in the future... from your comment, it sounded like this wouldn't work for you. Did it turn out that you could use it, or that it helped you figure out how to do it? – Jeff Ogata Dec 08 '10 at 16:24
  • exactly the solution with the canvas seams the best. Even if i would prefer a CSS3 only solution that works in all browsers – meo Dec 08 '10 at 22:05
1

You can stack backgrounds!

Example below background-image stacks an image url beneath a linear gradient from white to transparent.

I found that the gradient should repeat while the url should no-repeat

.multi_bg_example {
  background-image   :  linear-gradient(to right, rgb(255,255,255),  rgba(255, 255, 255, 0)),
                        url(http://i.imgur.com/wrRgmR7.jpg);

  background-repeat  : repeat,
                       no-repeat;

  background-position: right,
                       right;
}

documentation: Mozilla.org using CSS Multiple Backgrounds

Blair Anderson
  • 17,040
  • 7
  • 64
  • 96