CODEWITHSUNDEEP
css
meo
meo

Reputation: 31259

CSS3 Gradients image to transparent

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.

Upvotes: 5

Views: 981

Answers (4)

Blair Anderson
Blair Anderson

Reputation: 20181

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

Upvotes: 1

Jeff Ogata
Jeff Ogata

Reputation: 57823

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!).

Upvotes: 2

methodofaction
methodofaction

Reputation: 72455

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

Upvotes: 2

Greg
Greg

Reputation: 21909

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));
}

Upvotes: 3

Related Questions