Menu
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
899
#2 CSS Rules Specific to Explorer (IE CSS hacks) IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 ( \9 ) at the end before the semicolon. IE7 or below: add an asterisk ( * ) before the CSS property. IE6: add an underscore ( _ ) before the property.
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
124
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 */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
