reflect in firefox and IE

2018-07-02 01:05:09

I'm still new to Reflections in CSS and so on, so having some issue with this. For the home page I have been told I need to reflect text and then an image (as well as a complicated shadow behind but that's on my to-do list).

For chrome/safari (webkit) I have got

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255,255,255,0.2)));

Looks very nice... However... obviously it only works with chrome/safari. How would I go about getting the same effect in Internet explorer (7/8/9 if possible) and Firefox?

Thanks, Nicholas Carter

You should use the -moz-element attribute for firefox..

For reflection it will be :

#reflection {
  /* It's 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);
}

What is -moz-element?

Reference

Maybe you can provide a jQuery fallback with this plugin.

This tutorial also talks about cross-browser reflection.

To target browsers not supporting reflections you can use Modernizr.

This build: http://modernizr.com/download/#-cssreflections-cssclasses-testprop-testallprops-domprefixes will add a no-cssreflections class to your page <html> tag.

Then, you can add a specific CSS rule:

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

or via JavaScript:

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

链接地址: http://www.djcxy.com/p/89334.html

上一篇: 如何禁用index.html中的滚动而不是其他页面

下一篇: 体现在Firefox和IE中