CSS background image hacks

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

by necolas • 16 years ago

119 8 16 years ago

NIL8• 16 years ago

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.

necolas4• 16 years ago

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

nborgo• 16 years ago

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.

necolas4• 16 years ago

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.

bzbarsky2• 16 years ago

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.

CSS background image hacks

Related Stories