4 ms·
CSS background image hacks
- NIL8 16y agoVery 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 16y agoThanks. I try to do all my write-ups like this because it also helps me better understand the subject.
- nborgo 16y agoI 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 16y agoIf 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 16y agoGecko 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.
- deleted 16y ago[deleted]
- necolas 16y agoNot sure what you mean. I've tested transitions in Firefox 3.6 and they are not supported - http://jsfiddle.net/qPdeV/ http://jsfiddle.net/qPdeV/