I'm using gradient as a background:
-moz-linear-gradient(center bottom , #E8E8E8 0%, #F2F2F1 50%) repeat scroll 0 0 #F5F5F4;
This is not showing in IE, I haven't found links or anything about what I need to do if the browser is IE.
Any ideas on how to handle this?
You might be interested in reading this: prefix or posthack.
As the comments state -moz- is the vendor specific prefix for Mozilla.
If you're interested in cross browser gradients, I find the easiest way is to use a gradient generator to sort through all the different implementations and prefixes.
this is the gradient code for all browsers
/* IE10 */
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
you can use this site to generate gradient ultimate css generator
it's not supported in IE9 so you can make a little section of the gradient and repeat it
Linear gradient drawing via CSS3 is still experimental. The CSS function you provided is Mozilla specific, as indicated by the -moz prefix. But not all is lost, as Microsoft has their own implementation as well (-ms-linear-gradient)
Upon cursory glance, it appears you can simply copy that line and simply change -moz to -ms with near perfect compatibility. Refer to the documentation if you run into any issues.
Use the gradient filter for IE:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* for IE */
Related
I want to combine background image and gradient. It should work in IE. my image is 3px width and 3px height. I am planning to give repeat for the background. How can we done it for Internet Explorer ???
Thanks in Advance
background: #6cab26;
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background-image: url(IMAGE_URL), -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background-image: url(IMAGE_URL), -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background-image: url(IMAGE_URL), -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image: url(IMAGE_URL), linear-gradient(top, #444444, #999999); /* W3C */
First 2 lines are the fallback for any browser that doesn't do gradients. See notes for stacking images only IE < 9 below.
Line 1 sets a flat background color.
Line 2 sets the background image fallback.
The rest set a background image and gradient for specific browsers.
Line 3 is for old webkit browsers.
Line 4 is for newer webkit browsers.
Line 5 is for Firefox 3.6 and up.
Line 6 is for Internet Explorer 10.
Line 7 is for Opera 11.10 and up.
Line 8 is what one day all the browsers will hopefully use.
See http://www.w3.org/TR/css3-background/#layering for more information about it.
Also see http://css3please.com for cross-browser css3 templating. Currently it doesn't allow you to do multiple backgrounds with gradients, but it gives you the browser prefixes and is kept up to date.
Stacking images ONLY (no gradients in the declaration) For IE < 9
IE9 and up can stack images this same way. You could use this to create a gradient image for ie9, though personally, I wouldn't. However to be noted when using only images, ie < 9 will ignore the fallback statement and not show any image. This does not happen when a gradient is included. To use a single fallback image in this case I suggest using Paul Irish's wonderful Conditional HTML element along with your fallback code:
.lte9 #target{ background-image: url(IMAGE_URL); }
If you need to target IE versions IE9 or earlier, they do not support CSS gradients.
There are work-arounds using filter and other hacks, but you will struggle to get those working if you want a background image as well.
My advice, therefore, is to use the CSS3Pie polyfill script. This library adds gradient support to older IE versions. It should be able to do what you want.
You'll end up with code like this in your CSS:
#myElement {
background: url(bg-image.png) #CCC; /*non-CSS3 browsers will use this*/
background: url(bg-image.png), -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
background: url(bg-image.png), -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
background: url(bg-image.png), -moz-linear-gradient(#CCC, #EEE); /*gecko*/
background: url(bg-image.png), -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
background: url(bg-image.png), linear-gradient(#CCC, #EEE); /*CSS3-compilant browsers*/
-pie-background: url(bg-image.png), linear-gradient(#CCC, #EEE); /*PIE*/
behavior: url(PIE.htc);
}
Please see the CSS3Pie documentation for further info.
Seems that the below code doesn't work with ie9. Is there a workaround?
Thanks
.orangeback {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FF6900 0%, #FF8214 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FF6900 0%, #FF8214 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FF6900 0%, #FF8214 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FF6900), color-stop(1, #FF8214));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FF6900 0%, #FF8214 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FF6900 0%, #FF8214 100%);
}
This is pretty close:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff6900', endColorstr='#ff8214',GradientType=0 );
This works in IE6+.
Or, for JUST IE9, you can replace it with an SVG by using the following styles, if the filter option doesn't float your boat:
Add to .orangeback:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNjkwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjgyMTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
Also add .ie9-gradient class to these elements, and add the following before the closing head tag:
<!--[if gte IE 9]>
<style type="text/css">
.ie9-gradient {
filter: none;
}
</style>
<![endif]-->
To use the SVG polyfill for CSS3 gradients in IE9 you need to disable filter, so this code retains the filter gradient fallback for IE6-8 and uses SVG for IE9.
In your case, there is not really a need to use the SVG polyfill for IE9 because you are using a normal 2 color linear gradient. If you had a more complex gradient the second solution would probably be preferable, but for your purposes just using the filter solution should work fine.
Use this (or a CSS preprocessor) and never worry about CSS3 gradients again: Colorzilla Gradient Generator
Try
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/
Let me know if it works.
I have a solid image, a .JPG, with no transparency (seeing as .JPG's cannot have an alpha layer). However, since the client would not have the ability to create an image that fades one image edge to transparency, they want to input a solid .JPG and have it fade via code. It should be noted that I've got this image set to be the background right now, it's not the src of a <img> tag. Is this possible in CSS3 and if so, how would it be accomplished?
Example image:
Desired result:
I believe you can do something with the CSS3 mask-image attribute along with CSS3 linear-gradient background:
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0))
Here is a sample that I created to you. Since it's a new CSS3 thing compatible browsers are Chrome and Safari at this moment (Webkit browsers).
You can get true transparency via CSS masking:
http://www.webkit.org/blog/181/css-masks/
Support for it is still quite limited, though. However, in Webkit browsers, you can use something like:
.masked {
-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
<div class="masked">Your content here</div>
This will work with all the content in any div (including the background), but this won't work in most browsers.
You could use a slice-and-animate approach similar to Nivo Slider, but that is an awful lot of work for what may not end up being a useful effect.
img,.over{
width:100px;
height:100px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
position:absolute;
}
<div >
<img src="http://ts1.mm.bing.net/th?id=I.4763892546143716&pid=1.1" alt="test"/>
<div class="over"></div>
</div>
DEMO
I have a classic background image gradient, fading out to a given background colour, see http://fiddle.jshell.net/7msZ5/ for the code.
The problem is that, when viewed on Mobile Safari (version 5 on iPhone 4), the image doesn't successfully blend into the background colour, there's a visible line at the bottom where the image runs out and the background image should take over, view http://fiddle.jshell.net/7msZ5/show/ to see the effect.
I would suggest extending the gradient image so that it will get to the gray earlier (so the gray is your exact desired shade instead of something that is 1 shade off), or using
-webkit-gradient (some older browsers may not support it....)
example:
background: url(http://i.imgur.com/ajzo0.jpg) rgb(145,127,103); /* Old browsers (in case they don't support webkit, use the original image. */
background: -moz-linear-gradient(top, rgba(145,127,103,1) 0%, rgba(236,235,233,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(145,127,103,1)), color-stop(100%,rgba(236,235,233,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(145,127,103,1) 0%,rgba(236,235,233,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(145,127,103,1) 0%,rgba(236,235,233,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(145,127,103,1) 0%,rgba(236,235,233,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(145,127,103,1) 0%,rgba(236,235,233,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#917f67', endColorstr='#ecebe9',GradientType=0 ); /* IE6-9 */
yes, it is a lot more code, but it does get the work done.
I am new to using CSS3 (specially gradients). How do I convert the following HTML/CSS coded border to one with CSS3-based gradient (i.e. using no image)
I want to convert FROM
Normal CSS border/background color
TO
Box with Gradient
Width/Heights are approx in the img above...I need to know how to get the gradient as per the 2nd fig ?
This link should help you. You will find the syntax for gradients there.
It's this one for all the major browsers:
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
…while #444444 is the color at top of the gradient and #999999 the gradient-color at the bottom.
The different "vendor-prefixes" ensure that the gradient works in different browsers as the 'default'-syntax is not supported by every browser by now.
The filter-property will make the gradient work in Internet Explorer 8 and below. But this has some drawbacks (performance aso…). Just use it if really necessary.
Edit: The syntax for linear-gradient changed. The spec'd syntax:
background-image: linear-gradient(to bottom, #444444, #999999);
I've changed this above too, so everyone can just copy this.
Without seeing the colors you are working with, you want to do something like this
.class{
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
background: -moz-linear-gradient(top, #fff, #000);
}
Here's a tool that might help:
http://gradients.glrzad.com/
The Best place to look is below:
CSS3 Gradients
CSS gradients are cool stuff. But you have one problem. When you are used background gradients in ie9. You can not used border radius are other CSS3. The background filter propertiy for ie is suck. I have a better solution for this. That fix the problem in ie9.
With this tool you create a gradient: http://www.colorzilla.com/gradient-editor/
And with this tool you create a SVG for ie9: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
Now we have this code:
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1OCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNDQ0NDQ0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjOTk5OTk5IiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNTgpIiAvPgo8L3N2Zz4=);
background: #444444; /* Old browsers */
background: -moz-linear-gradient(top, #444444 0%, #999999 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#999999)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #444444 0%,#999999 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #444444 0%,#999999 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #444444 0%,#999999 100%); /* IE10+ */
background: linear-gradient(top, #444444 0%,#999999 100%); /* W3C */