CSS gradients vs images and vs SVG

CSS gradients work in IE based browsers, Webkit (chrome, Apple eg Safarie, Ipod, Iphone), and Mozilla (Firefox) … however they do require different style tags. (see below).

When compared to images: CSS gradients give a little bit of performance increase. An image used for a background gradient is normally very small around 5,000 bytes. Unless there are over 10 gradients being used these images are not going to make much of an impact. These images are downloaded using the same connection that downloaded the HTML so we are only talking about bandwidth savings when the pages are designed correctly.

Animation is a game changer. With jQuery these divides can be animated and the background color itself can be changed / animated.

HTML5 SVG blows away jQuery in its ability to animate graphics … giving CSS gradients a short window of opportunity. SVG is a graphics language with more years in the making than jQuery.

Here is an example of the CSS markup for gradients

.mygradient {
background: -webkit-gradient(linear, left top, left bottom, from(#008), to(#fff));
background: -moz-linear-gradient(top, #008, #fff);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000080, endColorstr=#FFFFFF);

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#000080, endColorstr=#FFFFFF)”;



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: