New(ish) CSS Gradient rules imposed for webkit

So, I’m working on the new version of nerd appropriate and am making heavy use of CSS3 for the site. Why? Because drop shadows are a pain in the ass when done graphically and since we are in 100% control of how this site goes out I am making sure it degrades nicely, but isn’t necessarily pixel perfect on all fronts. So if you’re using modern builds of Chrome, Firefox, Opera, IE, or Safari you’ll receive the full featured site, if not you may not get 100% of everything, but I’m doing my best to make sure interaction works the same across all platforms (with fallbacks for things like the history API in HTML5 and using hashbangs for those not blessed with a modern browser).

Getting back to gradients. In webkit you made gradients using the following standard:

-webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(.5, #333));

This would be the prefixed “gradient” background-image. The first parameter being what kind of gradient, in this case linear, the next two were directions for where you wanted to gradient to go, in this case from the top left to the bottom left (90deg) and then the final two parameters are what are called “stops”. This means that from 0 to 50% of the box I want a gradient that smoothly moves from #666 to #333.

The rendered effect would like the following:

A nice rounded off look. I won’t even get into how we do it in images because it is a much longer process. So moving forward. While perusing the webkit blog today I noticed that earlier this year they had updated their CSS standard to include a more “mozilla-ey” way of doing gradients. This is good news, it means we are moving towards a standard and while I may have slightly preferred webkits somewhat more verbose take, I must say I am enjoying how it works now.

So this same effect from above would now be written as follows:

-webkit-linear-gradient(top, #666, #333 50%);

You may say “SACRE BLEU, that is so much shorter!” I agree, it is. It is a much more compact way to write it, but for some reason and this is just personal tastes, this feels less readable to me, but I will take less readable for shorter code I guess. It is a fair trade off. To translate this:

We now prefix with both webkit for browsers and the gradient type, in this case linear. We then tell it where we want to start, it can be a direction or degree. If omitted it just assumes left to write. We give it a color and starting point, and then more colors and starting points. So the #666 will smoothly transition into #333 over 50% of the box. We could add as many colors as we want here. The only thing we can’t do (logically) is change direction.

This method works for both mozilla and webkit. Webkit is still allowing the old way, but don’t be surprised if that starts to fade. A move to standards is always a better thing, and this concise short code makes that transition that much easier to swallow. Gradiate away!

20 Notes/ Hide

  1. 8bitorange posted this