Ajax Loader
×

CSS3 Retro Logo

Logo created purely in CSS scaling up on hover. I used JS for circular placement of elements, then just copied generated CSS to stylesheet. Everything is created using CSS3 shapes (you can learn more about these here). For the outer semi-circles and the dashed border, 36 separate divs are used by both of them which are then placed according to the design.

The animation is done using transitions and scale transforms. These animations are not supported in IE so you won't see the transition but it'll jump to the new size on hover. For noise-like background I used two linear gradients.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS3 Retro Logo

    CSSDeck G+