CSS prefixes to achieve cross browser gradient - css

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/

Related

Why is text using my custom colour gradient CSS class not displaying properly on mobile?

Visible Issue: http://stage.herotheapp.com/brand-assets
Problem seen on: Responsive / mobile view
I recently added a CSS class that I found on a forum to enable the change of text colour to a four-point gradient.
The colour gradient works well, but it has broken how the rest of the text behaves. Most visible on mobile - the text does not line-break cleanly (if at all), line-height is not consistent with theme h1/h2/h3 etc. presets, and is generally illegible.
In a perfect world, I only want the gradient colour override, much like using a rule so that the rest of the text settings apply the global theme / elementor text styling, but I couldn't find a rule for gradients.
I have tried word-break and word-wrap rules but neither have worked.
Here is the CSS applied:
.rainbowtxt {
background-image: -webkit-linear-gradient(left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* For Chrome and Safari */
background-image: -moz-linear-gradient(left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* For pre-releases of IE 10*/
background-image: -o-linear-gradient(left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to right, #5cb6ea, #5245fc, #aa41b3, #ff6d9f); /* Standard syntax; must be last */
color:transparent;
-webkit-background-clip: text;
background-clip: text;
word-wrap:break-all;
overflow-wrap: inherit;
}
It's probably an easy fix, but beyond my WP skillset unfortunately.
This has nothing to do with WordPress. linear-gradient() is a css property that create a gradient image, we couple it with the background-clip property to mask it to the text. Finally we change the font color to transparent to show the gradient image. Those are the only required properties to change the text to a gradient color.
linear-gradient() has an overall support, no need for browsers prefixes (eg: -webkit-, -moz-, -ms- ...).
background-clip has an overall support but require the -webkit- prefixes for support on all browsers webkit engine based. (All beside Firefox and Edge).
.🌈,
.rainbow {
background: linear-gradient(to left, #5cb6ea, #5245fc, #aa41b3, #ff6d9f)!important;
background-clip: text!important;
-webkit-background-clip: text!important;
color: transparent!important;
}
<h1 class="🌈 rainbow">Lorem Ipsum Dolor</h1>

CSS Gradients & Shadows on IE

I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject? I put the site up so you can see the full code and output.
Test Site
I am using lesscss, so maybe that is my issue? I hope not!!! I am also using the IE CSS3 Fix, ie-css3.htcThe code I am using is as follows... I was attempting to do this without the htc, but with no luck.. at least the htc got my background gradients to work in IE... before it was showing only blue-black, the default Microsoft background gradient colors.
predefine.less
.RUNgradient(#COLOR: #CLR1){
#CLRL:lighten(#COLOR, 10%);
#CLRD:darken(#COLOR, 10%);
background-color: #CLRL;
background-repeat:repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#CLRL), to(#CLRD));
background-image: -moz-linear-gradient(top, #CLRL, #CLRD);
background-image: -ms-linear-gradient(top, #CLRL, #CLRD);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CLRL), color-stop(100%, #CLRD));
background-image: -webkit-linear-gradient(top, #CLRL, #CLRD);
background-image: -o-linear-gradient(top, #CLRL, #CLRD);
background-image: linear-gradient(top, #CLRL, #CLRD);
behavior: url(css/ie-css3.htc);
}
styles.less
div.wrapper{
width:500px;
margin:25px auto;
padding: 10px 25px;
text-align:center;
.RUNgradient;
.RUNshadow;
p{
font:24px #HEADERFONT;
color:#ffffff;
.RUNtextshadow;
}
}
Filters are the answer! Almost...
For the gradient,
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";
And for the shadows,
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")";
Only thing left is changing the direction in a way to have the shadow visible all around the element, not just to one side.
Solution
After researching Microsoft Filters, I figured out how to get a similar effect. The corners are a bit rough for my liking, but this is MUCH closer than before!
This is the shadow filer I used...
.RUNshadow(#BLURRING:10px){
#SCLR:#111111;
#DIR:225;
#DIR2:45;
#DIR3:135;
#DIR4:315;
#STR:4;
box-shadow: 0px 1px #BLURRING #111111;
-moz-box-shadow: 0px 1px #BLURRING #111111;
-webkit-box-shadow: 0px 1px #BLURRING #111111;
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR2~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR3~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR4~", Strength="#STR~")";
}
I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject?"
Yeah, that's normal. Most people don't bother. Remember to ask yourself, Do Websites Need To Look Exactly The Same In Every Browser?
If you really want this, you'll have to use the gradient filter for IE. Add the following style to your RUNgradient class:
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";
For both of them you can use IE filters.
You can use the gradient filter for gradients and the Shadow filter for shadows. The gradient filter works very well, the shadow filter looks really bad.
You can read in the documentation of the filters how to use them. But if you want to do it automatic you need see how CSS3 please is dealing with the filters and convert gradients to IE filter gradients.
You need to add these lines to the style tag for making this to work in IE,
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
Sample code Snippet:
.ms-viewheadertr ms-vhltr
{
background: #222 ;/when gradients doesn't fill it fills the color/
background: -webkit-linear-gradient(#444, #222);/* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(#444, #222);/* For Firefox 3.6 to 15 */
background: -o-linear-gradient(#444, #222);/* For Opera 11.1 to 12.0 */
background: linear-gradient(#444, #222);/* Standard syntax */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
}

Adding gradient to element breaks CSS functionality in IE

I am working on a CSS-based drop-down menu. It works fine until I add gradient to elements. Than something breaks in IE and when I hover over <li> items in sub-menu the menu box disappears.
Here's the code I use to add gradient and make it cross-browser compatible:
background-color: #c1ddf4; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c1ddf4', endColorstr='#ffffff', GradientType=0); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c1ddf4), color-stop(100%, #ffffff));/* for webkit browsers */
background: -moz-linear-gradient(top, #c1ddf4, #ffffff); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#c1ddf4, #ffffff);
Please see the following examples:
OK (without gradient) vs. NOT OK (with gradient)
The IE filter will break certain functionality when applied to elements. My suggestion is to use a horizontally tiled gradient image for IE, either by using a CSS hack, an IE-only style sheet, or targeting it using Modernizr.js.
The truly proper way would be to use Modernizr, then write this CSS:
.no-cssgradients li {
background: url(gradient.png) repeat-y;
}
That way, any browser that doesn't support CSS gradients (not just IE) will get served the image instead.

CSS: why does this css rule not work in google Chrome

background-image: -webkit-linear-gradient(red, green, blue);
I just want my page looks same in Chrome, while some element is styled by a IE filter:
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#88888888,endColorstr=#88CCCCCC);
I suppose you need -webkit-gradient. To make as your ie filter you need to use the following:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888), color-stop(100%,#88C));
Do you have the latest nightly developer build?
http://blogs.sitepoint.com/2011/01/18/webkit-updates-css3-gradient-support-matches-mozilla-syntax/
-webkit-linear-gradient works on Chrome 10+

CSS Gradient height for IE?

In the webkit and moz vendor specific properties for CSS gradients, you can specify the height of the gradient. Is there something similar for IE?
For example:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#ffffff'); /* IE */
background: -webkit-gradient(linear, left top, left 3, from(#aaaaaa), to(#ffffff)); /* webkit */
background: -moz-linear-gradient(top, #aaaaaa, #ffffff 3px); /* firefox */
How can I specify a 3px high gradient in IE?
It's a hack, but you could create a duplicate div with a defined height of 3px and apply the IE filter to that.
Or you could avoid the IE code bloat, and accept that IE will have a different aesthetic than more capable browsers (square corners included).

Resources