Comic Update: Nice Hat (Gradients & Dave’s Brain)
Posted by Kyle Weems on February 01, 2010Today’s comic features a hat. It’s not your ordinary chapeau, but rather the sort of stately headpiece that could keep an entirely family warm at night or help you sneak into Soviet-era Russia. Even if I didn’t have a web design-related topic to discuss (and I assure you, I do), the gravity of this hat would be enough to ensure that your visit to my site today was not a waste.
Joining the hat in today’s strip is Dave Shea and Jeff Croft. These fine gentlemen appear with the squirrel to help present to you a visual gag that points to one simple, inescapable truth: CSS gradients will break your brain.
I’m trying to get up to speed on CSS3, a goal which falls in the same category of absurdity as tasting every variety of curry in India; there’s simply too many modules piling up in that spec. At this point I suspect that CSS3 will not reach a finished state prior to the web being replaced by the psionic slave networks that our future robot overlords will use to broadcast their diabolical commands to the human race.
Nonetheless, I am digging out the fruits of the cutting edge of our darling cascading style sheets, especially the previously Webkit-only features that have been newly adopted by the recently released Firefox 3.6. One area I focused on this past Thursday was CSS Gradients. After all, how hard an a gradient be?
How hard indeed.
I present Exhibit A: my tweet less than five minutes after opening Mozilla’s tutorial on the topic. It starts out easy enough, then they start talking about things like color-stops, linear vs. radial gradients, starting points and angles, etc. It gets worse when you learn that Webkit and Mozilla each approach gradients differently, continuing the spaghetti western tradition of dueling methodologies.
In short order, my tweet was answered by Dave, then Jeff, each adding to my diagnosis: CSS gradients are a pain.
I’m currently working on a tutorial on the topic, something that hopefully explains it in a more digestible format than what I’ve seen thus far. Until then, the only way I can provide you comfort is to inform you that the hat in today’s strip is based in reality. Here is a picture of Dave in the hat.
If you did not spit your tea/milk/soda/liquor/pepto onto your computer screen just now, you have no sense of humor. I almost died of laughter when I saw that picture. Its existence was like a special jewel reminding me that dreams come true.
For the sake of equal treatment, I’ll share with you what I found a few minutes later while getting a reference picture of Jeff to touch up his character’s appearance. I stumbled upon this. Yeah… it speaks for itself. I’m not sure when I can fit that into a comic, but I’m certainly going to try.
If neither photo cracked your head, than I recommend checking out CSS gradients. If you’re feeling woozy, no worries. I’ll get back to you in a few days with some digestible tidbits on how to tackle them.
Tags: Comic, css gradients, dave shea, hat, jeff croft
Hi Kyle,
Now that you’ve gone through the circle of fire, maybe you want to contribute to jGraduate: http://jgraduate.googlecode.com/ as I would love for that picker to be more visually appealing as well as spit out CSS Gradients too.
Jeff
I sincerely hope Dave bought that hat. It’s incredible. A true find!
Looking forward to your tutorial. I’ve only touched on simple gradients, so don’t know the horror I’m in for yet.
And if you’ll excuse me, I now need to go scrub my eyes out after seeing the photo of Jeff.
Hahah I loved this comic, that hat is hilarious! Actually I was about to start playing with gradients today, so I consider myself warned about the cognitive impairments resulting of the exposure to this module
Yup, the Gradients spec is complex. It’s a complex topic. The syntax, though, is seriously about as simple as you can get if you actually want to be able to express the range of common gradients that will be used. (Radial gradients may still end up being a bit much, I dunno.) It’s a crazy-huge improvement over the original syntax proposed and experimentally implemented by webkit.
I’ll offer the common HTML5 excuse, though, that the spec is meant for implementors. I was told by ROC, who actually implemented it, that it was *very* useful for that, because it attempts to be very precise in its wording and explanation. Hopefully the numerous examples I put together make it better. It’s probably a lot easier to *just* read the examples and learn it from there, possibly turning to the spec text if you have any questions afterward. Ping me if you have any questions, or more importantly any *suggestions*, about the gradients spec.
(Really, though, how hard *is* “linear-gradient(silver,white)” to write? All the common gradient idioms should be ridiculously easy, since I wrote the thing with the intention to use it myself.)