Using CSS gradient instead of images

Question

Using CSS for creating gradients instead of images, does it have any negativity?

For example the following code:

 #gradient {
  color: #fff;
  height: 100px;
  padding: 10px;
  /* For WebKit (Safari, Google Chrome etc) */
  background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
  /* For Mozilla/Gecko (Firefox etc) */
  background: -moz-linear-gradient(top, #00f, #fff);
  /* For Internet Explorer 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
 }

Thanks.

Please post your code correctly: stackoverflow.com/editing-help — Crozin
– Crozin, Commented Mar 25, 2010 at 15:16

Radu M. · Accepted Answer · 2010-03-25 15:26:44Z

2

Gradients are not standardized yet and many browsers do not suport it, in your exemple -moz-linear-gradient works in firefox 3.6 but on older version doesn't. If your site is for public purposes, many people won't see you gradients, so you could check what version of browser they use, and use gradients or images based on that. I use gradients on an intranet site (where I can force users to use a specific browser), If the browser if not Firefox 3.6 or greater, the site will show just a message that tells the user to upgrade, but this is not a good way if you go public.

So i choose negative for public sites. :)

answered Mar 25, 2010 at 15:26

Radu M.

5,7804 gold badges44 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wiika Over a year ago

Yes your'e right, i have a public website and not all my users use modern browsers , most of them still use internet 6-7, there is another way to gradients for all elements in page is by using just one transparent image ( gradient: white to transparent i believe ) but i'm not sure how to make it in photoshop

Syntactic · Accepted Answer · 2010-03-25 15:19:41Z

0

As you've illustrated in your example, there's no one way to do it that works in all commonly used browsers at the moment. I would consider that a "negative" for maintenance and code readability purposes.

A bit of constructive criticism: the word you're looking for is "instead", not "instant".

answered Mar 25, 2010 at 15:19

Syntactic

11k3 gold badges27 silver badges25 bronze badges

1 Comment

Wiika Over a year ago

Thanks Syntactic for your quick answer, i'm sorry but i'm not a native english speaker, RegDwight did changed my message

Tai · Accepted Answer · 2012-01-23 22:16:44Z

CSS gradients are used on many large websites using the fallbacks you are using. I would add PIE.htc as well. If you do use PIE remember that it needs to be absolutely or relatively positioned to show up.

If you have to support really old browsers the best way is to give them a fallback solid background-color.

To be it it silly to expect old browsers to display gradients at all. If you absolutely have to you can set up a conditionally loaded stylesheet:

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="http://mysite/css/ie7_hacks.css" /><![endif]-->

In there you can declare a repeating image-based gradient. Just like how it used to be done before CSS3.

By doing it this way you are making your site a little faster for modern web browsers.

Collectives™ on Stack Overflow

Using CSS gradient instead of images

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related