This is the Weblog of Designer, Developer & Photographer Matthias Kretschmann more...

15thApr 08

WebKit team introduces CSS-based gradients

WebKitWriting right now on a longer article about text-shadow and it’s implementation in WebKit, the rendering engine which powers Safari and Konqueror. But now this exciting news popped up from Surfin’ Safari, the blog of the WebKit development team:

WebKit now supports gradients specified in CSS. There are two types of gradients: linear gradients and radial gradients.

Take a look at the entry on Surfin’ Safari to learn how those css-based gradients work and how they can be coded:

So what exactly is a gradient in CSS? It is an image, usable anywhere that image URLs were used before. That’s right… anywhere.

You can use gradients in the following places:

background-image
border-image
list-style-image
content property

Although the WebKit team is saying it is supported “now” a commenter on Surfin’ Safari states that it seems the whole function isn’t included in the latest nightly builds of WebKit.

So it will take some time, ’til it’s worth replacing the gradient images on my h3 and h4 headlines with just simple css code…

About Matthias

Freelance designer, front-end developer and photographer who just loves creating beautiful things.

Tags: , , , ,

Related Posts



Leave a Reply

↓ Comment Guidelines ↓
  • Please remain on topic, respect other commenters and don't spam!
  • Uncivilized and spam comments will be deleted!
  • You are free to use basic HTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe to Comments Feed for this post

top