I'm trying to make a gray line, that is fading out to transparent. I created a div, that is 1x100px, and added css gradient to make the fade effect.
It works fine, except in IE where the div gets a blue border, which I cant get rid off.
This is my css for the div
#left_header_border {
position:absolute;
bottom:-1px;
left:-100px;
width:100px;
height:1px;
/* gradient */
background-color: transparent;
background-image: -moz-linear-gradient(left, transparent, #cccccc); /* FF3.6 */
background-image: -o-linear-gradient(left, transparent, #cccccc); /* Opera 11.10+ */
background-image: -webkit-gradient(linear,left bottom,right bottom,color-stop(0, transparent),color-stop(1, #cccccc)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(left,transparent, #cccccc); /* Chrome 10+, Saf5.1+ */
background-image: linear-gradient(left, transparent, #cccccc);
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='transparent', EndColorStr='#cccccc'); /* IE6–IE9 */
}
I've tried to inspect the div, and make it higher, and the gradient seems to work, but the color is blue, and a border is added. Why?
Change the filter to:
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorStr='#00cccccc', EndColorStr='#ffcccccc'); /* IE6–IE9 */
The filter doesn't allow “transparent” as a color value, but it does allow you to use an 8-digit hex reference, where the first two digits specify the opacity of the colour (just like the last value in rgba() color references).
More on using RGBA and transparency & using MS Filters
if the scary maths bit gets you, you can find e.g. 0.6 transparency in Windows calculator, open it in scientific view, do 255*0.6 = 153 then click the "hex" checkbox for the conversion = 99
in the example above it was starting at the the fully transparent (0.0 opacity) = 255*0 = hex value "00" through to fully opaque (1.0 opacity) = 255*1 = hex value "ff"
Update As kindly linked by thirtydot in the comments, here's a handy converter from RGBa to MS Filter syntax
I'd recommend using CSS3Pie instead of hard-coding the filter style for this sort of thing -- it's a lot easier and more standards-compliant; it allows you to use standard CSS3 for your gradients in older versions of IE.
Related
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>
I am totally a noob to css and I have a need to add gradient to the background image on the top of the page.
here is what I tried but obviously its not working as background overwriting the value. How can I fix it
I have a background image and I need a gradient on top of it. Here is my css
body.test {
/* Mozilla: */
background: -moz-linear-gradient(top, #00FF00, #000000);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#00FF00), to(#000000));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#00FF00', EndColorStr='#000000', GradientType=0);
background: url(../mybackground.png);
}
TEST HERE
http://jsfiddle.net/PsDuF/
First, have a look at this tool for creating CSS gradients.
change
background: url(../mybackground.png);
to
background-image: url(../mybackground.png);
background is the shorthand syntax. Alternatively, you could combine the image with your other syntax:
background: url(../mybackground.png), -moz-linear-gradient(top, #00FF00, #000000);
In your case, you are declaring background multiple times, so each time you declare it, you are over-riding the previous declaration.
When you declare multiple background in one declaration, the order you declare them will change the stacking order. JSBIN example using images and mozilla background gradients: jsbin.com/abumuz/1
Note that if you want the gradient on top of the image, but still want to see the image, you need to make sure your gradient has alpha transparency.
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.
I have a multistop gradient created with colorzilla that I have successfully gotten to work as the background of my website. It works perfectly for firefox, chrome, and IE9. For IE7 and below, it only shows a white background, which is acceptible but not preferable, and to be frank, going back 2 generations, I am not worried about it. However, IE8 only shows a gradient from the first color to the last color, no stops in the middle, which would normally get rid of the middle color, which was white in my case. For the purposes of making it somewhat better, I changed it so the white would be the last color of that gradient, but it is by no means a perfect suggestion.
The solution, to me, appears to be converting my already created multistop gradient from the css code it is in into an image that I can repeat endlessly as necessary, as was traditionally done before the modern era of css gradients. However, I have been unable to find any sort of tool or code that would allow me to do this for a given height and width. Does anyone know of any tool, preferably free, that would satisfy these needs? For the purpose of this question, the gradient code I am using is the following:
background: #72b4f9; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcyYjRmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzU3YzE0ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzOTc3MzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #72b4f9 0%, #ffffff 25%, #ffffff 45%, #57c14f 96%, #397731 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#72b4f9), color-stop(25%,#ffffff), color-stop(45%,#ffffff), color-stop(96%,#57c14f), color-stop(100%,#397731)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* IE10+ */
background: linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A2CEFB', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
You may want to try CSS3Pie http://css3pie.com it is a quick/free solution for IE7/IE8
Or create a SVG image using the Gradient Background Maker
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
Then find a way to import to photoshop
Photoshop always works for me. Im sure you could use GIMP though. A gradient dialog in any image program generally has the same sliders and attributes thet the css generator you used would. You should be bale to create a file at the canvas size you want then essentially use the gradient tool's dialog to set the same settings. For more on that ask on SuperUser or on a forum for users of the app you go with.
Im not aware of an app that will convert the css to an image.
I ended up finding a website that did essentially what I wanted at http://gradcolor.com/. I was able to create multiple gradients at a specific size, and the website created the file for me to download and upload to the website. Thank you everyone for your suggestions, as they led to me finding this.
I am developing an Application with jQuery Mobile and Phonegap. I want to have a color gradient from #3c3c3c (grey) to #000000 (black) in the background but when I use this code
background: -webkit-linear-gradient(top, #3c3c3c, #000000);
you can see just a few big bars with different grey shades. So there is no linear gradient. Also you are able to see some green and some violet bars.
- Sorry as a new user I am not able to insert a Screenshot -
I also tried to instead insert a background image which shows a color gradient but this also looks as described above (we have also tried to maximize the color-depth of the picture but this also did not change the result).
Is it possible that the device is not able to display enough colors for a linear gradient?
Is there another possibility for creating a linear gradient?
Any help is greatly appreciated!
I am testing with
Galaxy Tab GT-P1000
Firmware-Version 2.2
To cover all your bases:
background-image: -webkit-gradient(linear, left top, left bottom, from( #3c3c3c), to( #000000)) !important; /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#3c3c3c, #000000) !important; /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#3c3c3c, #000000) !important; /* FF3.6 */
background-image: -ms-linear-gradient(#3c3c3c, #000000) !important; /* IE10 */
background-image: -o-linear-gradient(#3c3c3c, #000000) !important; /* Opera 11.10+ */
background-image: linear-gradient(#3c3c3c, #000000) !important;
Drop the !important if you don't need it, I use it to override some default jQM styles that's why and make sure you have background-clip: border-box; (which is default)
May be you have to write like this:
background: -webkit-linear-gradient(top, #3c3c3c 0%, #000000 100%);