i have an issue writing linear gradient like this :
body {
background: linear-gradient(100deg, #ffff 0%, #fff0 100%);
}
But doesn't works on firefox or i wrong something ???
Please help me :/
It's working fine on Chrome, Edge and Firefox (on Window10).
You don't see anything because it's going from white (which is the normal color for your screen) to transparent white.
If you put a background color on you can seen it:
body{
background: linear-gradient(100deg,#ffff 0% ,#fff0 100%);
background-color: blue;
}
<body></body>
Related
I have a really simple CSS radial gradient, which looks significantly different in different in Safari and others:
<style>
body {
background: #000;
}
div {
height: 200px;
width: 200px;
background-image: radial-gradient(100px, #1493a4 0%, transparent 100%);
}
</style>
<div></div>
Any ideas, how I could make them all look like the Safari version?
Safari Firefox
Fiddle: https://jsfiddle.net/2234zy6o/3/
I finally found a simple solution: Safari needs an own style:
background-image: -webkit-radial-gradient(#1493a4, transparent);
Just make sure to add it after the standard definition, other browsers then use the standard one and ignore the -webkit one, while Safari sees the first but then finds -webkit and ignores the standard.
But it's not quite the same, nevertheless. So I did some 'interpolation' and added some stops:
background-image: -webkit-radial-gradient(100px,
#1493a4 0%,
rgba(20,147,164,0.4) 40%,
rgba(20,147,164,0.2) 55%,
transparent 100%
);
It's still not the same but quite similar - at least I can live with it.
My tables are causing problems in IE8. I cannot get the dividing borders in the table header to appear above the gradient (except for in one spot, which you can see in the image below). The borders appear fine in every other browser and even in IE8 Compatibility Mode. Any ideas on how to fix this? Here is a test site for everyone to see the applied code.
Here is the table header's CSS, but you can view the entire CSS file here:
.gridview th {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNTM4MyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhmZDlmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
background-image: -webkit-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
background-image: -moz-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
background-image: -o-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
background-image: -ms-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
background-image: linear-gradient(90deg, #005383 0%, #90d9ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90d9ff, endColorstr=#005383);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#90d9ff, endColorstr=#005383)";
background-color: #005383;
line-height: 18px;
vertical-align: top;
padding: 4px;
font-weight: bold;
text-align: center;
border-left: 1px solid #005580;
color: #fff;
}
I tried solving your problem but but could not. I see that this occurs in both IE8 and IE9 doc and browser mode. Not in IE 7 however. But when using only
background-image: url(data:image/.......);
the borders work in IE9...that only leaves IE 8 to solve. You can use IE7 and IE9 specific conditional commentsa to use above code(for IE9) and the
filter: progid:DXImageTransform.Microsoft
for IE7.
With regard to the problem in IE8, here is a similar post:
Table cell loses border when css gradient filter is applied in IE8
I found a fix, but I'm not very happy with it since it isn't valid HTML anymore...but this seems to fix the problem in older versions of IE:
<!--[if !IE]> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- <![endif]-->
I showed this to my boss, he did not approve, so I am still looking for a solution!!!
Adding this to my css was a solution for me:
table {
border-collapse: separate;
}
None of the solutions I've searched on worked. For IE8, the background color only worked for the body table rows. Whenever I used a background color for the header row or header column, the borders would disappear.
What worked for me was defining a background color for the table itself. No background color for header. Each body table row would need to have a background color defined to overwrite the color defined on the table (if needed).
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 */
}
I'm trying to make a nice frame for a logo that will be inserted in a webpage I'm working on. And for some reason IE won't display that div, with the fading color. All I want is a simple gradient in an empty div with predefined dimensions. Google chrome is displaying it just like I want, but IE is not displaying anything. And since I have copied the gradient part from here without understanding a word, I cannot debug it.
Here is the code (in a very reduced version):
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-8-i">
<style>
#headGreen{
float: left;
margin: 52px 0px 0px 0px;
width : 300px;
height: 30px;
background-image: linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -o-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -moz-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -webkit-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -ms-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(0.04, rgb(255,255,255)),
color-stop(0.82, rgb(68,179,68))
);
}
#header{
width: 800px;
height: 100px;
}
</style>
</head>
<body>
<div id="header">
<div id="headGreen"></div>
</div>
</body>
</html>
I'm using IE9, but I would like it to work in others also.
Thanks :)
Gradients In Internet Explorer going all the way back to Version 6 got you down?
No worries! Check out CSS3Pie.
http://css3pie.com/
Thanks, hope this helps!
Aaron
-ms-linear gradient is only available in IE 10.
Use the following:
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";
filter is supported in IE7-
-ms-filter is recommended in IE8 - 9. Important note: the property value has to be quoted.
See CSS3 cross browser linear gradient for a detailled explanation on the gradient filter syntax.
I recommend using the Ultimate CSS Gradient Generator for generating gradients.
It utilizes IE's native filters and ensures compatibility all the way back to IE6. I use this all the time.
I don't think that IE9 is already supporting this all I found is this:
http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
Referring to CSS3 Please IE10 will support it.
http://css3please.com/
I think the older versions will work as they are :
/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";
background-color: transparent;
background-color: rgba(180, 180, 144, 0.6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490);
zoom: 1;
The following filter wlil only be read by IE:
#headGreen{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#44B244');
}
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%);