The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Logo using animations etc

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #40366
    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:

    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?


    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


    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)
  • The forum ‘CSS’ is closed to new topics and replies.