Fun with WebKit css gradients

Posted on May 15, 2009 by Chris Williams

As a fol­low up to yesterday’s woe­ful tale of using WebKit’s pro­pri­etary css prop­er­ties, I wanted to fol­low up with a cou­ple exam­ples of how one can use these fea­tures with­out get­ting all “bevel-​ly”

The only ben­e­fit of text-shadow is not down­load­ing graph­ics for what can be expressed in css. The same goes for -webkit-border-image, -webkit-gradient, -moz-border-radius, any­thing that keeps a web designer from hav­ing to launch Photoshop is a boon to bandwidth.

Here are two exam­ples of using some WebKit css gradients.*

Update: You must have the Chrome 2.0 or Safari 4.b for these to work.

Example 1. is brought to you by “Killer Queen”

This sim­i­lar look­ing dis­play to that of the iPhone album dis­play uses a radial gra­di­ent (opposed to a lin­ear) as the back­ground for the track names. The over­all effect is a dim light. The odd num­bered tracks also use a gra­di­ent to take advan­tage of -webkit-gradient’s sup­port of alpha values.

Example 2. is a css calendar.

This one com­bines lin­ear gra­di­ents and javascript arrays. Because -webkit-gradient can use rbga for­mat­ting in place of the usual hexa­dec­i­mal value, cal­cu­lat­ing the val­ues from color to another was much easier.

The draw­back to these browser spe­cific prop­er­ties are, well, browser spe­cific. While adding a gra­di­ent value to your div id=wrapper might give it a groovy drop shadow effect on Safari, noth­ing is hap­pen­ing on either Firefox, and much less for IE.

The workaround at this point is to browser detect.

if(jQuery.browser.safari) {
$('#wrapper').addClass('problem-solved');
}
else {
	$('#wrapper').addClass('wah-wah-wah');
}

Or what­ever.

This entry was posted in Code and tagged , , , . Bookmark the permalink.

4 Responses to Fun with WebKit css gradients

  1. Pingback: Ajaxian » CSS Gradients in Action

  2. RyanMorr says:
    May 27, 2009 at 1:39 pm

    Actually, browser detec­tion isn’t nec­ces­sary. I recently wrote a method capa­ble of detect­ing sup­port for any CSS styles in Javascript; http://​ryan​morr​.com/​a​r​c​h​i​v​e​s​/​d​e​t​e​c​t​i​n​g​-​b​r​o​w​s​e​r​-​c​s​s​-​s​t​y​l​e​-​s​u​p​p​ort

  3. David Woods says:
    May 27, 2009 at 2:07 pm

    “The only ben­e­fit of text-​shadow is not down­load­ing graph­ics for what can be expressed in css.”

    I’m going to dis­agree there, there are plenty of ben­e­fits other than reduc­ing band­width. The other css prop­er­ties you men­tioned, yes those ben­e­fits are mostly just visual/​graphic. But text styles are much, much dif­fer­ent. Off the top of my head:

    - There are SEO improve­ments by using HTML text instead of images
     – like­wise there are improve­ments with com­pat­i­bil­ity with vision impaired peo­ple using screen­read­ers
     – peo­ple with reduced visual acu­ity can apply cus­tom styles to increase the font size of css/​html text that they wouldn’t be able to with images (in the same way), and pages can be designed to flow around this mod­i­fi­ca­tion
     – HTML text responds to browsers’ find-​in-​page func­tions so users will be able jump to text while they couldn’t jump to text in image
     – you can spec­ify a sim­pler print style, reduc­ing the ink use dra­mat­i­cally by not hav­ing to print an entire image
     – the con­tent is much eas­ier to make dynamic (updat­ing via DHTML/​Ajax/​etc), or just to show dynamic con­tent (e.g. dis­play­ing a data-​derived page title in a con­tent man­age­ment sys­tem)
     – the text is selectable

    Good exam­ples of css gra­di­ents though, that album exam­ple in par­tic­u­lar was just beau­ti­ful. Thanks for the post!

  4. Chris Williams says:
    May 27, 2009 at 2:51 pm

    I totally agree with that. I sup­pose my take on text shadow comes from already avoid­ing using graph­ics in place of text to begin with (or as much as pos­si­ble). Text-​shadow is just adding in an effect that I’ve already let go of.