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?
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
@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.
@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).