Randomly this week, I’ve had more-than-normal number of comments from folks who ask me something like:
Went to go tweet/share a blog post of yours, and noticed you don’t have any of those on your site. Interesting, any reason why?
I do have some thoughts on that…
Kind of a classic little trick for ya’ll today. You know the <style></style> blocks you can put in the <head></head> of your HTML to do styling? You don’t actually have to put those in your head, they can be anywhere on the page. It’s not valid (or good practice) but it works.
Declaring just ‘sans-serif’ as the font-family means you’ll get Helvetica on Mac, Arial on PC, and still have the good generic keyword fallback.
Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find it’s easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. What isn’t obvious while looking at the syntax is which image is on top in the vertical stacking order when those images overlap. The spec is clear in this regard and browser implimentations follow. The…
Just a fun experiment creating progress bars made with just CSS3 (no images). Loads of progressive nerdery packed into one little element.
Microsoft themselves is tracking and promoting the demise of IE 6. China? 34.5%? Seriously?
And I can't help but hum a little Europe:
We're leaving together
But still it's farewell
And maybe we'll come back
To earth, who can tell?
I guess there is no one to blame
We're leaving ground
Will things ever be the same again?
Trevor Davis from Viget Labs with some clever and real-world implementations of pseudo elements.
There is so much to talk about with these pseudo elements it's crazy. I'm speaking at a few conferences coming up and I'm putting together a presentation that is solely on that topic and it's going to be awesome.
jQuery plugin by Daniel Rapp to fill any element with background noise. Uses <canvas> to create, then turns it into an image and sets a repeating background-image. Even if you'd be against using this on a production site, it's still a clever programatic way to accomplish this common design need. Plus you could always just snag a screenshot of the noise and use that in production.
Pseudo elements are visible elements on a web page that aren't "in the DOM" or created from HTML, but are instead inserted directly from CSS. This allows you to do lots of neat design-y things without cluttering the markup. Pseudo elements are CSS 2, so browser support for them is pretty good!
Links from Video:
