How can I convert this from webkit to moz?

How can I convert this from webkit to moz? - css

How can I convert this from webkit to moz?
background-color: #fff;
background-image:
-webkit-linear-gradient(0deg, transparent 79px, #ABCED4 79px, #ABCED4 81px, transparent 81px),
-webkit-linear-gradient(#EEE .05em, transparent .05em);

To support most browsers...
background: -moz-linear-gradient(top, rgba(171,206,212,1) 79px, rgba(0,0,0,0) 81px); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(79px,rgba(171,206,212,1)), color-stop(81px,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(171,206,212,1) 79px,rgba(0,0,0,0) 81px); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(171,206,212,1) 79px,rgba(0,0,0,0) 81px); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(171,206,212,1) 79px,rgba(0,0,0,0) 81px); /* IE10+ */
background: linear-gradient(top, rgba(171,206,212,1) 79px,rgba(0,0,0,0) 81px); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abced4', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
Obviously, the first line is the one with the moz vendor prefix.
You could also just wait until Firefox supports the webkit vendor prefix :P.

Related

make background gradient smoother in firefox

I'm applying a linear background gradient to the <html> tag but in Firefox it's not very smooth, ie you can see lines: See this image:
In chrome it's much smoother. My CSS code is as follows:
html{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3c352e+0,121212+100 */
background: #3c352e; /* Old browsers */
background: -moz-linear-gradient(top, #3c352e 0%, #121212 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c352e), color-stop(100%,#121212)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3c352e 0%,#121212 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3c352e 0%,#121212 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3c352e 0%,#121212 100%); /* IE10+ */
background: linear-gradient(to bottom, #3c352e 0%,#121212 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c352e', endColorstr='#121212',GradientType=0 ); /* IE6-9 */
height:100vh;
}
Is there a way to smoothen this out?

How to apply CSS to half of a point feature?

Due to I can not use server-side StyledLayerDescriptor (SLD) coding, neither I want to load external graphics I would like to use CSS to style my OpenLayers' point features.
In detail I would like to fill half (or 1/3) of a point feature with different colors.
A CSS code might be
#OpenLayers\.Geometry\.Point_111{
fill: red !important;
background: -moz-linear-gradient(-45deg, #ce275f 50%, #1e5799 50%, #207cca 50%, #7db9e8 100%) !important; /* FF3.6+ */
}
The feature is not assigned to a class.
Is that possible? Are there any other possibilities?

I immediately thought of this:
.circle {
height: 100px;
width: 100px;
border-radius: 50%;
background: #000000; /* Old browsers */
background: -moz-linear-gradient(left, #000000 1%, #000000 50%, #ff00ff 50%, #ff00ff 100%, #ff00ff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#000000), color-stop(50%,#000000), color-stop(50%,#ff00ff), color-stop(100%,#ff00ff), color-stop(100%,#ff00ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #000000 1%,#000000 50%,#ff00ff 50%,#ff00ff 100%,#ff00ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #000000 1%,#000000 50%,#ff00ff 50%,#ff00ff 100%,#ff00ff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #000000 1%,#000000 50%,#ff00ff 50%,#ff00ff 100%,#ff00ff 100%); /* IE10+ */
background: linear-gradient(to right, #000000 1%,#000000 50%,#ff00ff 50%,#ff00ff 100%,#ff00ff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ff00ff',GradientType=1 ); /* IE6-9 */
}
JSfiddle
Gradient generated with Ultimate CSS Gradient Generator

Same CSS3 gradient acting differently

I used a css3 generator to create a gradient background.
It works on a static html page I built.
When I run my aspx there is no backgruond, though firebug shows the rule, with no conflicts, and even displays the gradient when I hover on the rule in firebug.
I fiddled it - doesn't work there either.
Here's the code:
body {
background: #a0d3ff; /* Old browsers */
background: -moz-linear-gradient(top, #a0d3ff 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0d3ff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a0d3ff 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a0d3ff 0%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a0d3ff 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #a0d3ff 0%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d3ff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
How can I fix it?

missing an opening brace '({)' after the selector in the style rule

Programming in ASP.NET 4.0 and I thought I would start with CSS3 on one of my client site.
I first made a fiddle which worked beautifully. Styles used in the fiddle are
.newmainblock{
background:rgb(254,254,253) ; /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,254,253,1) 0%, rgba(220,227,196,1) 42%, rgba(174,191,118,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,254,253,1)), color-stop(42%,rgba(220,227,196,1)), color-stop(100%,rgba(174,191,118,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(254,254,253,1) 0%,rgba(220,227,196,1) 42%,rgba(174,191,118,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(254,254,253,1) 0%,rgba(220,227,196,1) 42%,rgba(174,191,118,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(254,254,253,1) 0%,rgba(220,227,196,1) 42%,rgba(174,191,118,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(254,254,253,1) 0%,rgba(220,227,196,1) 42%,rgba(174,191,118,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefd', endColorstr='#aebf76',GradientType=0 ); /* IE6-9 */
border: 1px solid #000000;
height: 440px;
}
#newbuttonbar {
background: rgb(180,221,180); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I0ZGRiNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzgzYzc4MyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzUyYjE1MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iIzAwOGEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iIzAwNTcwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDI0MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(131,199,131,1)), color-stop(33%,rgba(82,177,82,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=0 ); /* IE6-8 */
}
( Demo here )
Now I copied that to my css inside my visual studio and ran it. To my dismay I found that I could not see a newbuttonbar at all. I asked firebug and they told me there is no newbuttonbar defined at all.
Also even though the style is not applied its still displayed in Firebug CSS console
At last I found the reason as this. ( I am not sure if this is correct )
The CSS editor complains that newmainblock is
missing an opening brace '({)' after the selector in the style rule
So it omits the tag that just comes after newmainblock. That is newbuttonbar. All the other styles are taken into account. Why this happens, what am I doing wrong and how to correct it?
On an unrelated sidenote DTD of my ASP.NET generated page as well as my fiddle is XHTMl1.0

There are some invalid characters in your CSS after the closing curly braces. Your code editor just isn't showing them. Try the page in Chrome, then open the web inspector (F12). Switch to the "Resources" or "Sources" tab and take a look at your CSS. You'll see what I mean.
Here's the fixed CSS:
.newmainblock{
background:rgb(254,254,253) ; /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,254,253,1) 0%, rgba(220,227,196,1) 42%, rgba(174,191,118,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,254,253,1)), color-stop(42%,rgba(220,227,196,1)), color-stop(100%,rgba(174,191,118,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(254,254,253,1) 0%,rgba(220,227,196,1) 42%,rgba(174,191,118,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(254,254,253,1) 0%,rgba(220,227,196,1) 42%,rgba(174,191,118,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(254,254,253,1) 0%,rgba(220,227,196,1) 42%,rgba(174,191,118,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(254,254,253,1) 0%,rgba(220,227,196,1) 42%,rgba(174,191,118,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefd', endColorstr='#aebf76',GradientType=0 ); /* IE6-9 */
border: 1px solid #000000;
height: 440px;
}
#newbuttonbar {
background: rgb(180,221,180); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I0ZGRiNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzgzYzc4MyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzUyYjE1MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iIzAwOGEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iIzAwNTcwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDI0MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(131,199,131,1)), color-stop(33%,rgba(82,177,82,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=0 ); /* IE6-8 */
}

CSS filter property in Firefox and Chrome

The following CSS works fine in Internet Explorer
filer:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr= 'white' , EndColorStr= 'gainsboro' )
but I need the same things for Firefox and Chrome. Is there an alternative ?

I find this site has an excellent tool for generating cross-browser gradients:
http://www.colorzilla.com/gradient-editor/

CSS
background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
HTML
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->

background-image: -moz-linear-gradient(
top,
white,
gainsboro
);
background-image: -webkit-linear-gradient(
top,
white,
gainsboro
);
/* FOR THE FUTURE */
background-image: -ms-linear-gradient(
top,
white,
gainsboro
);
I cant remember the direction of microsoft gradients, but play around with top|| bottom || left || right

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

How can I convert this from webkit to moz? - css

How can I convert this from webkit to moz? background-color: #fff; background-image: -webkit-linear-gradient(0deg, transparent 79px, #ABCED4 79px, #ABCED4 81px, transparent 81px), -webkit-linear-gradient(#EEE .05em, transparent .05em);

Related

make background gradient smoother in firefox

How to apply CSS to half of a point feature?

Same CSS3 gradient acting differently

missing an opening brace '({)' after the selector in the style rule

CSS filter property in Firefox and Chrome

Categories

Resources