Comparing CSS Gradient Color (trying it out with and without prefixes)

From the IE background maker tool, there are 3 basic types of gradient pattern shape : linear - circular - elliptical. The IE background maker provides pattern shapes with keywords value to set the direction. But in general, you can use degree to set the angle of it.
I put a demo of the keyword-valued-direction gradient patterns without using prefix and using complete set of the prefixes. Let's take a look.

Update (June 24, 2013)
I just looked again this post using Yandex and Safari. Turned out, they didn't show the gradient. Still needs the -webkit- prefix for gradient. Opera also still needs the -o- prefix. Google Chrome, Mozilla (Firefox), and IE 10 don't need the prefix anymore.

LINEAR GRADIENT

This is just
{background-image: linear-gradient(to bottom, #C3FFA6 0%, #007D19 100%);}

This is with complete set of prefixes
{background-image: -ms-linear-gradient(top, #C3FFA6 0%, #007D19 100%);
background-image: -moz-linear-gradient(top, #C3FFA6 0%, #007D19 100%);
background-image: -o-linear-gradient(top, #C3FFA6 0%, #007D19 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C3FFA6), color-stop(1, #007D19));
background-image: -webkit-linear-gradient(top, #C3FFA6 0%, #007D19 100%);
background-image: linear-gradient(to bottom, #C3FFA6 0%, #007D19 100%);}

CIRCLE GRADIENT

This is just
{background-image: radial-gradient(circle farthest-corner at center, #C3FFA6 0%, #007D19 100%);}

This is with complete set of prefixes
{background-image: -ms-radial-gradient(center, circle farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: -moz-radial-gradient(center, circle farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: -o-radial-gradient(center, circle farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #C3FFA6), color-stop(1, #007D19));
background-image: -webkit-radial-gradient(center, circle farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: radial-gradient(circle farthest-corner at center, #C3FFA6 0%, #007D19 100%);}

ELLIPTICAL GRADIENT

This is just
{background-image: radial-gradient(ellipse farthest-corner at center, #C3FFA6 0%, #007D19 100%);}

This is with complete set of prefixes
{background-image: -ms-radial-gradient(center, ellipse farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: -moz-radial-gradient(center, ellipse farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: -o-radial-gradient(center, ellipse farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #C3FFA6), color-stop(1, #007D19));
background-image: -webkit-radial-gradient(center, ellipse farthest-corner, #C3FFA6 0%, #007D19 100%);
background-image: radial-gradient(ellipse farthest-corner at center, #C3FFA6 0%, #007D19 100%);}

If you do not see any differences on your desktop browser, then it's pretty much 'safe' to just use the non-prefixed gradient pattern. Well, not really, because there're those mobile browsers. You have to try them out too. I haven't. And also, those desktop browsers I mentioned above.
This is just a demo to minimize the CSS code line for desktop browser. To be 'more' safe, you can try Prefix Free by Lea Verou. A very cool JS plugin to automatically add prefixes to CSS properties when needed.

More information about gradient syntax at W3 Developers

Monkey Raptor

Monkey Raptor

Thursday, June 13, 2013

Comparing CSS Gradient Color (trying it out with and without prefixes)

No comments

Post a Comment