Question

I am working on a project where the button needs to have a certain style such as the one posted on the blog below:

http://joeygallegos.tumblr.com/

The button is visible only in Chrome, Safari, Android and iPhone/iPod touch. And I would like to make it available in cross-browser format. I am good at hand writing CSS, but I am not quite able to understand cross-browser gradients. If somebody could please help me to better grasp it that would be much appreciated. Bellow is the snippet I used to make the gradient:

 background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8fc2e8), color-stop(0.5, #54a1d9), color-stop(0.5, #126aa9), color-stop(1, #2ddef2));

---

If possible I would like it to be like Google’s markup with the attributes such as -webkit, -moz, -ms, -o, linear:

background-image: -webkit-gradient(linear,left top,left bottom,from(
#4D90FE),to(#357AE8));
background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);

---

If it is possible that you could list it in the same colors as the ones listed above it would be a tremendous help. Thank you!!

Answer 1

The first version of gradient support was made available in webkit browsers in the following form:

-webkit-gradient( linear, x y, x y, from( color ), [color-stops...,] to( color ) )

Which is where you use:

background: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#357AE8));

But then the web decided that was too complex and simplified it to this (which is what most browsers use now):

-prefix-linear-gradient( direction|angle, color-stops... )

Which is where you use:

background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);

IE feels it needs to be different, so it uses filters and has not upgraded to this new better way of expressing gradients until IE10. So, what you have is fine. If you want IE7-IE9 support, use this too:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4d90fe",endColorstr="#357ae8");

There are many tools out there too to help you make gradients and generate the cross-browser code for you (Google is yo friend). Colorzilla has a good one.