

CSS background image hacks - necolas
http://nicolasgallagher.com/css-background-image-hacks/

======
NIL8
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.

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

------
nborgo
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.

~~~
necolas
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.

~~~
bzbarsky
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.

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

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

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

