Customizing a Firefox/Chrome Stylesheet for IE - css

I have a Firefox stylesheet and a chrome/safari stylesheet for a website. Now the problem is that IE does not pick up those styles(since they are not your typical general styles). I would like to know if there is an easy way of changing each of those properties to be able to work with IE. There are some styles/properties I will be able to change for IE, but I do not know the IE equivalent for some of them. Here is an example of the Firefox styles used in the Firefox stylesheet:
#topbar.black {/* Converted 1 gradient*/
background: -moz-linear-gradient(-90deg, #858585 0%, #636363 3%, #202020 50%, black
51%, black 97%, #262626 100%);
}
#topbar.transparent {/* Converted 1 gradient*/
background: -moz-linear-gradient(-90deg, rgba(133,133,133,0.7) 0%,
rgba(99,99,99,0.7) 3%, rgba(32,32,32,0.7) 50%, rgba(0,0,0,0.7) 51%, rgba(0,0,0,0.7)
97%, rgba(38,38,38,0.7) 100%);
}
#topbar {/* Converted 1 gradient*/
background: -moz-linear-gradient(-90deg, #cdd5df 0%, #b0bccd 3%, #889bb3 50%,
#8195af 51%, #6d84a2 97%, #2d3642 100%);
}
.pageitem {/* Converted 1 border radius*/
-moz-border-radius: 8px;
}
#tributton, #duobutton {/* Converted 1 gradient*/
background: -moz-linear-gradient(-90deg, #cdd4d9 0%, #c0c9cf 3%, #abb7bf 97%,
#81929f 100%);
}

For IE 9+ you can use .pageitem {border-radius: 8px}, because it is CSS3 standart.
For gradients you can use this CSS hack for IE: #topbar {filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cdd5df', endColorstr='#b0bccd');}
Internet Explorer gradient filter doesn't support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.
See here for more details.

Related

CSS error from generated gradient linear gradient from colorzilla editor

Thank you so much for taking your time to read this.
Heres the code the colorzilla gradient generator created for me:
background: #aecc9f;
background: -moz-linear-gradient(top, #aecc9f 0%, #97b78d 50%, #9bb78d 52%, #8faa83 100%);
background: -webkit-linear-gradient(top, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
**background**: linear-gradient(to bottom, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 );
Next to the line of the bolded background text, I get the following error:
Expected (<filter-function-list> | none) but found 'progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 )'
I hope someone will be kind enough to help a programming idiot such as myself.
Line
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 );
is incorrect, according to definition of filter property (1, 2), it can take following values:
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
url() - for applying SVG filters
custom() - "coming soon"
None of them are responsible for gradient, so you can just remove this line from your code.
Also I don't know what is the purpose of double asterisks around **background**, but them break css code, so you probably should remove them too, and it will be like this:
.gradient {
background: #aecc9f;
background: -moz-linear-gradient(top, #aecc9f 0%, #97b78d 50%, #9bb78d 52%, #8faa83 100%);
background: -webkit-linear-gradient(top, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
background: linear-gradient(to bottom, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
}
.wide {
width: 100%;
height: 100px;
}
<div class="wide gradient">
</div>

CSS linear gradient doesn't look like Photoshop's, can it be fixed?

While using a CSS black to transparent linear-gradient I noticed that it doesn't gradually fade to transparent, instead it makes the grey area linger longer and only near the end it becomes transparent with a noticeable limit.
After noticing this I decided to use a photoshop gradient with the exact properties and it looked better, the gradient was changing from black to transparent smoothly and linearly.
The following contains an example showing a CSS linear-gradient on the left and Photoshop generated gradient on the right - Both were created with the exact same properties:
#css, #ps{
height:100px;
width:50%;
}
#css{
float:left;
background:linear-gradient(black, transparent);
}
#ps{
float:right;
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAMAAABw8qpSAAABLFBMVEUCAgIDAwMEBQUGBgYICAgJCQkLCwsNDQ0PDw8RERETExMVFRUXFxcZGRkbGxsdHh4gICAiIiIkJSUnJycpKiosLCwvLy8xMjI0NDQ3Nzc5Ojo8PDw/Pz9CQkJFRUVISEhLS0tOTk5RUVFUVFRXV1daWlpdXV1gYGBjY2NmZmZpamptbW1wcHBzc3N2dnZ5eXl8fX2AgICDg4OGhoaJiYmMjIyQkJCTk5OWlpaZmZmcnJyfn5+ioqKlpqaoqamrrKyvr6+ysrK0tbW3uLi6urq9vb3AwMDDw8PGxsbJycnLy8vOzs7R0dHT09PW1tbY2Njb29vd3d3g4ODi4uLk5OTm5ubp6enr6+vt7e3v7+/x8fHy8vL09PT29vb4+Pj5+fn7+/v8/Pz+/v4AAAE6GCMnAAAAY3RSTlP+/Pv5+Pb08vHv7evp5uTi4N3b2NbT0c7LyMbDwL26t7SxrquopaKfnJmWk4+MiYaDgHx5dnNwbGlmY2BdWldUUU5LSEVCPzw5NzQxLiwpJyQiHx0bGRYUEhAODQsJBwYEAwEIFXNRAAAAEElEQVQIHWNJZpnLwjj0IQCJ8QLzQI0QnQAAAABJRU5ErkJggg==");
}
<div id="css"></div>
<div id="ps"></div>
As you can see the difference is clearly visible. Is it possible to replicate Photoshop's real linear-gradient into CSS's or my only option is to use base64/png tricks to achieve an actual linear gradient?
Because currently css's linear-gradient is everything but linear, in fact from what I can see it creates an easeInOut-gradient instead of linear.
As GRC says, you can set multiple midpoints values to adapt the gradient to your exact needs
A good starting point is colorzilla, where you can import an image file and get an automated result.
For your image, the result is:
.test {
height: 100px;
background: #020202; /* Old browsers */
background: -moz-linear-gradient(top, #020202 0%, #1f1f1f 9%, #434343 18%, #989898 38%, #b2b2b2 45%, #d1d1d1 56%, #e9e9e9 67%, #f2f2f2 73%, #f9f9f9 80%, #fdfdfd 87%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#020202), color-stop(9%,#1f1f1f), color-stop(18%,#434343), color-stop(38%,#989898), color-stop(45%,#b2b2b2), color-stop(56%,#d1d1d1), color-stop(67%,#e9e9e9), color-stop(73%,#f2f2f2), color-stop(80%,#f9f9f9), color-stop(87%,#fdfdfd), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* IE10+ */
background: linear-gradient(to bottom, #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020202', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}
<div class="test"></div>
The problem is that this tool gives only rgb values, you will need to manually convert those to rgba, and play with the alpha values.
You can do following:
background:linear-gradient(black, transparent, transparent);
or
background:linear-gradient(black 10%, transparent);
10% of space is taken by black.
Hope this helps.

Why doesn't my linear-gradient work in Firefox?

I'm testing my application on Firefox 33. I have a simple background property defined with a gradient:
background: linear-gradient(bottom, #004771 0%, #005185 100%);
and it doesn't work. CanIUse reports that gradients on Firefox 33 can be used without a prefix. So why doesn't it work? If I add a Mozilla-specific prefix:
background: -moz-linear-gradient(bottom, #004771 0%, #005185 100%);
everything works OK.
When using linear-gradient without the prefix, you need to write it like this ("to bottom" instead of "bottom"):
background: linear-gradient(to bottom, #004771 0%, #005185 100%);
EDIT: Link to documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Syntax
You need to use to bottom in order for it to work:
background: linear-gradient(to bottom, #004771 0%, #005185 100%);
jsfiddle

Cross-browser linear gradient

What will be the cross-browser CSS for the following linear-gradient style ?
background: linear-gradient(bottom, #E4E8EA 0%, #E8EBED 50%, #f1f3f4 96.36%, #fff 100%);
you need to use
-moz-linear-gradient() /*mozilla*/
or
-webkit-linear-gradient() /*safari,chrome*/
or
-ms-linear-gradient() /*IE*/
or
-o-linear-gradient() /*opera*/
alongside in your style

Linear gradient ends to early

I have this linear gradient, and I can't figure out why it doesn't "work".
It is supposed to start in light gray and end in with, but about 80% in, it goes all white, with a notable white line. Can anyone see what is wrong?
My CSS is here:
background: white -webkit-linear-gradient(left, #efefef 0%,#f7f7f7 58%,#ffffff 100%);
background: white linear-gradient(left, #efefef 0%,#f7f7f7 58%,#ffffff 100%);
Thanks
Edit: I'm using chrome to test the gradient...
You set the default color white, use transparent...
background: transparent -webkit-linear-gradient(left, #efefef 0%,#f7f7f7 58%,#ffffff 100%);
background: transparent linear-gradient(left, #efefef 0%,#f7f7f7 58%,#ffffff 100%);
#JPuge Take a look here to make easy the CSS Gradients http://www.colorzilla.com/gradient-editor/

Resources