Grow your CSS skills. Land your dream job.

Logo using animations etc

  • # 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 12:12 pm

    @jonigiuro – we do have an image version of the logo (static png/svg) but I wanted to fiddle with animations and see if I could do it in CSS (a bet basically, with my graphic designer Chris).

    I’m not sure how to replicate this sort of thing in HTML5 canvas – any tips/links?

    @hugogiraudel – I did look at all those options but no dice, the best one I could think of was using :after to trim down on the div’s but alas, for some random reason no vendors have yet implemented animations on pseudo’s yet – at least not enough to even be practical.

    Realistically we’ll probably just use a static graphic on the site and I’ll probably just have this in a blog post/proof of concept page.

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

    # October 18, 2012 at 4:17 pm

    @thedoc – As aforementioned I don’t think it’s possible to animate before/after as yet, definitely would have saved on the markup. When I was doing :after for the blue bars it was super lightweight (in terms of the markup).

    # October 18, 2012 at 6:01 pm

    I agree with @TheDoc. The animation is awesome and think it would be a bit more simple/elegant without the pop at the end.

    # October 19, 2012 at 6:34 am

    Yeah I did try without but it just seemed very final like it was broken or something and I felt it needed a flourish to finish it off.

    I don’t think we’re ever going to use it in an official capacity – not at least until I can cut down the markup to a realistic level or browser support increase for this type of thing.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".