Geek asks and answers

-webkit-box-reflect in firefox and IE - CSS

I'm still new to Reflections in CSS, etc., so with some problems with this. For the homepage, I was told that I need to reflect the text and then the image (as well as the complex shadow behind, but this is on my to-do list).

For chrome / safari (webkit) I have

-webkit-box-reflection: below 0px -webkit-gradient (linear, upper left, lower left, from (transparent), brake light (70%, transparent) to (rgba (255,255,255,0.2)));

It looks very nice ... However ... it is obvious that it only works with chrome / safari. How can I get the same effect in Internet Explorer (7/8/9 if possible) and Firefox?

Thanks Nicholas Carter

+5
source share
2 answers

-moz-element firefox..

:

#reflection {
  /* It a copy of the original element... */
  background: -moz-element(#reflected-element)
              bottom left no-repeat;

  /* ... turned upside down ... */
  -moz-transform: scaleY(-1);

  /* ... with a gradual fade-out effect towards the bottom. */
  mask: url(#reflection-mask);
}

-moz-element?

+3

, jQuery .

- .

, , Modernizr.

: http://modernizr.com/download/#-cssreflections-cssclasses-testprop-testallprops-domprefixes no-cssreflections <html>.

CSS:

.no-cssreflections #element-id {
    /* custom CSS rule */
}

JavaScript:

if(!Modernizr.cssreflections){
    /* run plugin or whatever */
}
+2

More articles:


All Articles