Forums

  • # October 18, 2012 at 6:31 am

    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?

    # October 18, 2012 at 8:01 am

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

    # October 18, 2012 at 8:09 am

    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

    # October 18, 2012 at 1:16 pm

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag