After creating some small elements with linear-gradient background I was "surprised" by their smoothless appearance in webkit browsers (chrome, safari, opera), while FF and IE are doing well. Vendor prefixes didn't help.
Small example:
background: linear-gradient(30deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.8) 30.5%, rgba(0,0,0,0) 31%);
Actually, nothing to explain here - just try and see
http://jsfiddle.net/p7qp1mmh/
Is it curable or should I just give it up?
Related
I am getting nasty artifacts in mobile safari on both my iPhone 4S and a gen-2 iPad when trying to use -webkit css styles to get gradient text.
This is the relevant CSS, applied to a text element:
background-image: -webkit-linear-gradient(#eee 0%, #4a80e5 100%);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#4a80e5));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
It looks good in Chrome and Safari and fails gracefully in Firefox. It looks bad in mobile Safari. You can see a live example at http://www.synchronautapp.com
On mobile safari, there are 1px borders around the styled elements. These borders come and go depending on how zoomed in the user is. Example here: http://synchronautapp.com/mkramer/IMG_0088.PNG
Googling didn't yield many similar issues. What causes this issue, and is there a workaround that keeps gradient text? Is there a pure CSS fallback plan for mobile webkit?
Try:
image-rendering: -webkit-optimize-contrast;
The following CSS3 transition does not work in Mozilla Firefox
background: linear-gradient(90deg, #b8d2e0, #FFFFFF);
background: -webkit-linear-gradient(90deg, #b8d2e0, #FFFFFF);
It is working on Chrome, Safari (iOS) though
Use -moz-linear-gradient or Mozilla Documention may help you better
I'm hoping to achieve a cross browser gradient, if you inspect the anchor at the top right corner running inline with the branding of my mobile site it has been styled with the prefix moz for Firefox:
www.test-bed.co.uk/mobile/
background: -moz-linear-gradient(center top , #4A4A4A, #2C2C2C) repeat scroll 0 0 transparent;
May I ask is there is a similar way to achieve a cross browser gradient solution with the IE, Opera and webkit prefixes?
An online tool that automates CSS gradient rule generation for all modern browsers: little link.
But generically, here's the main syntax:
background: #color; /*fallback*/
background: -moz-linear-gradient(...);/*Firefox*/
background: -webkit-gradient(...);/*Chrome + Safari*/
background: -webkit-linear-gradient(...);/*Another Chrome + Safari*/
background: -o-linear-gradient(...); /*Opera*/
background: -ms-linear-gradient(...); /*IE10+*/
background: linear-gradient(...); /*W3C standards*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#color', endColorstr='#color',GradientType=0); /*IE6-9*/
Take a look at CSS3 Please. I personally like their indentation style.
.box-gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Firefox 16+, IE10, Opera 12.50+ */
}
As you can see, there is no -ms- prefix needed since IE10 supports the W3C syntax right away. Please make sure that you use the correct W3C syntax for linear-gradient()!
If you are using firefox as a browser. then you may want to use the addon called colorzilla. It is a nice tool that comes with options like Color picker, Eye Dropper, Pallette browser, CSS gradient generator, web page DOM code Analyzer , inspect Last element as well as zoom.
However you can generator css gradient'sat the folllowing link:
http://www.colorzilla.com/gradient-editor/
How can I make IE8 show a gradient background + image. This is possible in other browsers, but in IE it doesn't work.
In other browsers:
/* Opera */
background-image: url(gxt/images/my/eye.png) , -o-linear-gradient(top, #FFFFFF 0%, #EFCA11 100%);
/* Webkit (Safari/Chrome 10) */
background-image:url(gxt/images/my/eye.png) , -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EFCA11));
I found the answer to my question:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#FFFFFF", endColorstr="#EFCA11",GradientType=0 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gxt/images/my/eye.png");
IE8 doesn't support CSS gradients (so that won't work). IE9 has limited support as far as I remember and IE10 will feature full support. I'm not sure what you're trying to do, but in case you'd like a background image with a gradient before or behind, how about stacking two images (one with the gradient, one with the actual background) or merging both into one image?
The following piece of code does not work on FF and Chrome but works on IE. I want to replace this part to make sure it works on all browsers.
Anybody, any idea?
Code below:
<td width="50%" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#163866,endColorStr=#8bc9f3); HEIGHT: 38px;">
td {
background: -webkit-gradient(linear, left top, left 38, from(#163866), to(#8bc9f3));
background: -moz-linear-gradient(top, #163866, #8bc9f3 38px);
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#163866,endColorStr=#8bc9f3)
height: 38px;
}
This will work in FF 3.6+, Safari 4+, Chrome, and IE 6+ (I think that supports gradient filters). Each browser will ignore the declarations it doesn't understand, so having all 3 will support all major browsers. Opera doesn't yet support gradients, instead use SVG (Scalable Vector Graphics)
Firefox Gradient documentation
Webkit (Safari/Chrome) Gradient documentation
Opera Gradients