I have this :
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(210,210,210,1)));
Its working for all browsers and for IE9 , but not working for IE6
Can someone tell me what to use else
Regards
You need to use IE's old filter rules, the rule you mentioned in the question has a vendor prefix which is targeting webkit (chrome, safari etc) browsers only. - there's a neat generator here which will help you out in making cross-platform gradients. IE6-9's rules look like this:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 *
The webkit prefix only works in Webkit browsers, which are Chrome, Safari, and Android and iPhone. For example, you'd need to use -moz for Firefox, and -o for Opera.
IE6 doesn't have any gradient support at all, so you'll need to use an image instead, or drop IE6 support, which is probably a good choice; not many users are still on IE6. (Unless this is meant for use specifically in for example governments, they're often stuck.)
Internet Explorer gradient filter doesn't support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.
Internet Explorer 8 and lower aren't the only browsers that don't support gradients, so using filters won't catch all browsers.
Another approach is to use Modernizr to feature detect support and use a fallback image or solid colour.
For example:
#box {
// Normal gradient syntax
}
.no-cssgradients #box {
// Fallback image
}
Related
A couple of previous post seems to indicate that -moz-background-clip: text is not available in Mozilla.
-moz-background-clip: *text* in Mozilla
Is it possible to hide what appears to be a proprietary WebKit only CSS feature from Firefox and other browsers? I would like to hide the pseudo "after" rule which adds text content to the page to achieve the desired effect from Firefox and IE, etc.
Here is my site, the text clearly renders badly in Firefox but fine in Chrome
http://sandpit.jonathanbeech.co.uk/
Yes, while background-clip is a valid CSS3 property, the text value in non-standard. As such no other browser supports it, and you do not need the other prefixes.
The problem you are seeing is that this feature does not fallback gracefully. Browsers that do not support it will show the background for the entire element.
To avoid this you need to hide the background from other browsers. The best way to do this is to use a webkit prefix. WebKit does not support this for the background property, but it does for CSS gradients. Thus you can specify a transparent gradient, and then specify your background image, by taking advantage of multiple background images:
background: -webkit-linear-gradient(transparent, transparent), url("http://sandpit.jonathanbeech.co.uk/wp-content/themes/jontheme/images/crosshatch.png") transparent;
The main problem here is that Opera supports this -webkit- prefix for compatibility reasons. So you just need to specify a -o- gradient afterwards to cancel that out:
background-image: -o-linear-gradient(transparent, transparent);
You then need to make the text transparent, so that other browsers do not see it:
color: transparent;
See this fiddle to see it in action:
http://jsfiddle.net/dstorey/2dhNM/
As an aside, you can remove the z-index, as this only works on positioned (or not fully opaque) elements. As you've not set opacity or a position other than static on the ::after, this will not apply.
The solutions here have some different methods, which you could use to hide specific CSS properties from FF and other browsers. A bit messy/hacky though.
You could keep the CSS the same and just add
#-moz-document url-prefix() {
.css:after, .hoo:after, .prof:after{ display: none; }
}
to remove the background pattern.
Using SVGs as recommended by the original post answers, would be a more elegant way to illustrate the text background cross-browser.
The CSS-Tricks article "Show Image Under Text (with Acceptable Fallback)" presents a nice solution. With it, -webkit-background-clip:text styled elements look ok-ish in other browsers (solid text on solid background).
Essentially, they use Modernizr to detect if the browser supports -webkit-background-clip:text, and only apply it if yes. Modernizr has to be extended with a custom test to make this possible:
<script src="modernizr-1.6.min.js"></script>
<script>
Modernizr.addTest('backgroundclip',function() {
var div = document.createElement('div');
if ('backgroundClip' in div.style)
return true;
'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val) {
if (val+'BackgroundClip' in div.style) return true;
});
});
</script>
How do I use a CSS linear gradient with Netscape?
I am trying this code:
#gr {
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000));
background: -moz-linear-gradient(top, #ffffff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000');
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000');
}
It works with IE, Firefox, and Chrome but it does not work with Netscape.
Netscape Navigator 9, last updated between 2006 and 2008 as a Firefox derivative, does not offer any real support for CSS beyond a large subset of the CSS2.1 spec. It does not support CSS3 gradients, or most any other CSS3 feature.
Netscape Navigator/Communicator 4.x and older don't have a lot of CSS support at all.
If you really need a gradient, you're better off using a background image. That's the traditional, tried and tested method designers have been using for the past 10 years, with great cross-browser compatibility yet very little friction.
If you're trying to support Netscape only because you are a Netscape user, stop wasting your time. Switch to Firefox. No serious web designer uses Netscape anymore in this day and age.
Netscape is no longer supported and is very rarely used by anyone.
But if you still want to use a linear gradient on your site, you can create an image using Photoshop or any other graphic editor, and then use it as:
background-image: url('url-of-img.jpg');
I want to rotate the DIV to a certain degree. In FF it functions but in IE I am facing a problem.
For example in the following style I can set rotation=1 to 4
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
This means that the DIV will be rotated to 90 or 180 or 270 or 360 degree. But if I need to rotate the DIV only 20 degrees, then it doesn't work anymore.
How may I solve this problem in IE?
To rotate by 45 degrees in IE, you need the following code in your stylesheet:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
You’ll note from the above that IE8 has different syntax to IE6/7. You need to supply both lines of code if you want to support all versions of IE.
The horrible numbers there are in Radians; you’ll need to work out the figures for yourself if you want to use an angle other than 45 degrees (there are tutorials on the internet if you look for them).
Also note that the IE6/7 syntax causes problems for other browsers due to the unescaped colon symbol in the filter string, meaning that it is invalid CSS. In my tests, this causes Firefox to ignore all CSS code after the filter. This is something you need to be aware of as it can cause hours of confusion if you get caught out by it. I solved this by having the IE-specific stuff in a separate stylesheet which other browsers didn’t load.
All other current browsers (including IE9 and IE10 — yay!) support the CSS3 transform style (albeit often with vendor prefixes), so you can use the following code to achieve the same effect in all other browsers:
-moz-transform: rotate(45deg); /* FF3.5/3.6 */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+ */
transform: rotate(45deg); /* Newer browsers (incl IE9) */
Edit
Since this answer is still getting up-votes, I feel I should update it with information about a JavaScript library called CSS Sandpaper that allows you to use (near) standard CSS code for rotations even in older IE versions.
Once you’ve added CSS Sandpaper to your site, you should then be able to write the following CSS code for IE6–8:
-sand-transform: rotate(40deg);
Much easier than the traditional filter style you'd normally need to use in IE.
Edit
Also note an additional quirk specifically with IE9 (and only IE9), which supports both the standard transform and the old style IE -ms-filter. If you have both of them specified, this can result in IE9 getting completely confused and rendering just a solid black box where the element would have been. The best solution to this is to avoid the filter style by using the Sandpaper polyfill mentioned above.
You'll need to do a matrix transform as follows:
filter: progid:DXImageTransform.Microsoft.Matrix(
M11 = COS_THETA,
M12 = -SIN_THETA,
M21 = SIN_THETA,
M22 = COS_THETA,
sizingMethod = 'auto expand'
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
M11 = COS_THETA,
M12 = -SIN_THETA,
M21 = SIN_THETA,
M22 = COS_THETA,
SizingMethod = 'auto expand'
)";
Where COS_THETA and SIN_THETA are the cosine and sine values of the angle (i.e. 0.70710678 for 45°).
There exists an on-line tool called IETransformsTranslator. With this tool you can make matrix filter transforms what works on IE6,IE7 & IE8. Just paste you CSS3 transform functions (e.g. rotate(15deg) ) and it will do the rest.
http://www.useragentman.com/IETransformsTranslator/
http://css3please.com/
Scroll down to '.box_rotate' for the Microsoft IE9+ prefix.
Similar discussion here: Rotating a Div Element in jQuery
Just a hint... think twice before using "transform: rotate()", or even "-ms-transform :rotate()" (IE9) with mobiles!
I've been knocking hard to the wall for days. I have a 'kinetic' system going on, that slides images and, on top of it, a command area. I did "transform" on an arrow button so it simulates pointing up and down... I've reviewd the 1.000 plus code lines for ages!!! ;-)
All ok, once I removed transform:rotate from the CSS.
It's a bit (not to use bad words) tricky the way IE handles it, comparing to other borwsers.
Great answer #Spudley! Thanks for writing it!
Usefull Link for IE transform
This tool converts CSS3 Transform properties (which almost all modern browsers use) to the equivalent CSS using Microsoft's proprietary Visual Filters technology.
For IE11 example (browser type=Trident version=7.0):
image.style.transform = "rotate(270deg)";
Hi I was trying to apply a box shadow to my main content box but it doesn't work correctly in IE. Rather than applying the shadow to the edges of the box like in firefox & chrome it seems to apply shadw to the content.
here are the filters im using:
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=0, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=0, Color='#000000');
I suggest using CSS3 PIE (http://css3pie.com) instead of filters. It offers a much more complete and accurate rendering of shadows that matches that of native-CSS3 browsers almost identically. It keeps your CSS cleaner too.
Using CSS for creating gradients instead of images, does it have any negativity?
For example the following code:
#gradient {
color: #fff;
height: 100px;
padding: 10px;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #00f, #fff);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
}
Thanks.
Gradients are not standardized yet and many browsers do not suport it, in your exemple -moz-linear-gradient works in firefox 3.6 but on older version doesn't. If your site is for public purposes, many people won't see you gradients, so you could check what version of browser they use, and use gradients or images based on that. I use gradients on an intranet site (where I can force users to use a specific browser), If the browser if not Firefox 3.6 or greater, the site will show just a message that tells the user to upgrade, but this is not a good way if you go public.
So i choose negative for public sites. :)
As you've illustrated in your example, there's no one way to do it that works in all commonly used browsers at the moment. I would consider that a "negative" for maintenance and code readability purposes.
A bit of constructive criticism: the word you're looking for is "instead", not "instant".
CSS gradients are used on many large websites using the fallbacks you are using. I would add PIE.htc as well. If you do use PIE remember that it needs to be absolutely or relatively positioned to show up.
If you have to support really old browsers the best way is to give them a fallback solid background-color.
To be it it silly to expect old browsers to display gradients at all. If you absolutely have to you can set up a conditionally loaded stylesheet:
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://mysite/css/ie7_hacks.css" /><![endif]-->
In there you can declare a repeating image-based gradient. Just like how it used to be done before CSS3.
By doing it this way you are making your site a little faster for modern web browsers.