CSS is pretty fuckin’ fun. I haven’t even delved into the depths of animation and I’m already seeing the great potential.
After browsing “iconic print ads” on Google Images for 20 minutes, I came across this interesting, albeit a bit questionable in its iconic status, advertisement from Nike. I know nothing of the shoe or the intent of the ad, but it had glowy bits and overlapping text. Cool.
What you see below is all CSS except for the shoe. While there aren’t many images of the Nike Air Span+ 6 out there (maybe this ad didn’t move units the way they’d expected), I was able to extract this one from a random snapshot. The image orientation was horizontal, so I used the transform property to rotate and scale to get the original position fairly close to the ad.
The glowy bits are all done using the box-shadow property. Really easy, but it works!
I want to take the three advertisements I’ve already done — two Porsche and this Nike ad — and put some animation in them, since the benefit of CSS isn’t just replicating what a print ad can do, but to make it more than what it could be otherwise.
More to come.