Streaming live at 10am (PST)

Apple WWDC15 Logo made with Webflow, no cheats


#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


#2

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


#3

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


#4

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

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


#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)


#7

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


#8

#9