By CodeJustin
via romancortes.com
Published: Jan 26 2010 / 10:44
After doing the CSS Paper Bird effect, I found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture (a background image).
With displacement maps lots of cool effects could be done, but thinking that the complexity of the displacement map would directly affect the CSS and markup size, choosing a good example took me some time. I thought in sea waves reflections, underwater distortions, magnifying glass, a rotating Earth… but the final thing I did was just right in my desktop: a Coke can - my favourite drink.
Comments
jtheory replied ago:
Site running very, very slowly... you may want to use a coralized link:
http://www.romancortes.com.nyud.net/blog/pure-css-coke-can/
jwheeler1 replied ago:
jtheory replied ago:
The NYUD link is loading for me just about instantly and helped me view the page in the first place (though to be fair, the original site also seems to have recovered, so it's moot now).
But a helpful tip anyway: if you mean no offense, try removing the all-caps obscenities from your comment. If you *do* mean offense, try this construction:
Hi, I'm offensive. I can't think of one FUCKING time.. (etc.)
jwheeler1 replied ago:
lol
rvermeer replied ago:
Awesome idea, creative CSS :)
(1 down vote 2 wheeler mr shout-it-out )
Voters For This Link (52)
Voters Against This Link (2)