Logo using animations etc

[Andy Howells]

So I had some fun and games last night creating our new logo in CSS, then I went mad with animations and keyframes.

Check it out here: http://codepen.io/andyunleashed/pen/jnpHc

You’ll notice in the markup that it’s crazy div town, but sadly can’t animate :after elements like I was planning to do.

Anyone got any ideas on how I might be able to trim down the markup or indeed, any better ideas how to implement this idea to make it practical to use in place of an image of our logo on our upcoming new site?

[JoniGiuro]

This is mandess! lol
No seriously, why don’t you just use an image? or an animated gif? or a canvas?

[Kitty Giraudel]

Nice work dude, it looks great.

Sadly, you won’t be able to squeeze the markup if you’re planning to do it the CSS way. To draw things with CSS, we have a few ways:
– **box-shadows**: very powerful, but you can’t be rotated
– **pseudo-elements**: very powerful but restricted number and can’t be animated
– **gradients**: very powerful especially radials but can’t be animated
– **webkit-box-reflect**: pretty limited usage and can’t be rotated
– **markup crowding**: the way you went

[TheDoc]

I really like the animation, though the little pop at the end might be too much. If you stick to just the swirl thing it’ll look super slick.

But yea, that’s a lot of elements. You could probably at least cut it down by 66% by using before/after on each element.

[Author]

Posts