CSS background image hacks

nicolasgallagher.com

119 points·necolas··8 comments

Very nicely put together. The layout presents your information in a smooth and inviting way while providing some really nifty instruction. Most sites offering info similar to yours are very cluttered and distracting. I hope you'll consider doing more of these.

Thanks. I try to do all my write-ups like this because it also helps me better understand the subject.

I usually use padding on an element to show a background image to the left of it, but the pseudo background-crop looks pretty great. Definitely going to use that one.

Is there anything stopping me from animating the background rotation with jQuery? That would add to the accordion effect if it works.

If you want that sort of effect then you'll have to rely on DOM elements in some form.

Because the pseudo-elements aren't part of the DOM, you can't use jQuery to animate the rotation. At the moment, CSS animations and transitions can't be applied to CSS pseudo-elements either.

Gecko is just fine with applying CSS transitions to pseudo-elements. Try this testcase:

data:text/html,<style>div::before { color: green; content: "text"; } div:hover::before { color: red; -moz-transition-duration: 5s; }</style><div>

It does look like Webkit doesn't support this, though. Which is a bug, per the current spec draft. All the transition stuff is specced to apply to ::before and ::after.

Not sure what you mean. I've tested transitions in Firefox 3.6 and they are not supported - http://jsfiddle.net/qPdeV/

3.6 doen't support transitions at all, correct. 4 supports transitions, including on ::before and ::after.

Right. But Firefox 4 is still in beta, making it a bit misleading to say "Gecko is just fine".

Reply on news.ycombinator.com