Ajax Loader
×

Building a CSS3 Compass

Creating a neat little CSS Compass can be quite easy and fun.

Some things to note:

  • For the pointer I simply used a div with linear-gradient and applied the skewX transformation on it, all using CSS3. Neat trick, eh?

    The skewing did not work properly on the element itself so I applied it to the :before pseudo-element of #pointer.

  • Rotation of the pointer is simple CSS3 keyframes (animations).

  • Gloss is achieved with linear-gradient on the main element's :after pseudo-element.

  • Directions have been all positioned absolutely.

Lets do it!

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Building a CSS3 Compass

    CSSDeck G+