Apple WWDC15 Logo made with Webflow, no cheats

Community resources Show & Tell
1

While I was experimenting with blending modes, I thought I’d give a try to reproduce Apples’ WWDC15 logo in HTML CSS with Webflow. I finally didn’t use blending mode, so this is a Webflow version with no cheat: no custom code, image or custom font, it’s only properties you can play with within the Webflow designer.

It’s not perfect, hardly reproductible in CSS only anyway. With more gradients, control of transparency and a SVG mask to avoid shadows on white, this would be possible.

http://sab.webflow.com/apple-wwdc-2015-logo

http://www.degroupnews.com/wp-content/uploads/2015/04/apple-wwdc-2015.jpg

5 Likes
2

Hey, thats awsome!
(Around 11° and cloudy here in Stockholm - Sweden :smile: )

1 Like
3

Amazing! Now to add some shape tweens and animate that puppy :wink:

1 Like
4

I wanted to animate it but the shadows got all wonky :wink:

edit: I meant… feel free to clone :wink:

1 Like
5

I would love to accept your cloning challenge, but I would have to cheat - a whole bunch.

What wonkified the shadows? Do they redraw weird during transform?

6

No they’re not shadows anymore, they rotate with their object. Same for highlights, gradients etc. There’s not real point at animating this in CSS, it’s meant to fail (or it must be a pain in the ass to redraw all effects if possible with JS)

1 Like
7

Awesome Vincent!! Great to see css power in webflow!