CSS Grid Project: Nike Air Span+ 6 Advert

CSS
2

See the CSS Grid Nike Air Span+ 6 Advertisement.

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.

See the Pen CSS Grid Advertisement: Nike Air Span+ 6 by Alec (@GrayHulk) on CodePen.

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.

Hello ,

I saw your tweets and thought I will check your website. Have to say it looks very good!
I’m also interested in this topic and have recently started my journey as young entrepreneur.

I’m also looking for the ways on how to promote my website. I have tried AdSense and Facebok Ads, however it is getting very expensive.
Can you recommend something what works best for you?

Would appreciate, if you can have a quick look at my website and give me an advice what I should improve: http://janzac.com/
(Recently I have added a new page about FutureNet and the way how users can make money on this social networking portal.)

I wanted to subscribe to your newsletter, but I couldn’t find it. Do you have it?

Hope to hear from you soon.

P.S.
Maybe I will add link to your website on my website and you will add link to my website on your website? It will improve SEO of our websites, right? What do you think?

Regards
Jan Zac

Hello ,

I saw your tweet about animals and thought I will check your website. I like it!

I love pets. I have two beautiful thai cats called Tammy(female) and Yommo(male). Yommo is 1 year older than Tommy. He acts like a bigger brother for her. 🙂
I have even created an Instagram account for them ( https://www.instagram.com/tayo_home/ ) and probably soon they will have more followers than me (kinda funny).

I have subscribed to your newsletter. 🙂

Keep up the good work on your blog.

Regards
Wiki

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

CSS
My first CSS Grid Project: Old Porsche Ad Replica

See the CSS Grid Porsche Ad! See the Pen CSS Grid Advertisement (overlap) by Alec (@GrayHulk) on CodePen. Since this was my first foray into CSS Grid, I wanted to start off with an achievable goal but not make it too simple. At first glance, this might look like just …

CSS
1
CSS Grid Test: Replica of a Porsche Advertisement

See the CSS Grid Porsche Ad! This one is pretty simple, but I wanted to test the transform property to achieve the slanted center-line. To achieve the slant, I used skew — 5 degrees, I think — on both of the colored halves. What that did, though, is cause the …