Ajax Loader
×

CSS3 Santa

A lot of elements created using :before and :after pseudo-classes. This helps in reducing the number of divs in the markup. You can see how to create many CSS3 shapes from this creation already posted on CSSDeck. Most of the shapes are created by giving complex parameters in the border-radius like border-radius: 30px 30px 60px 60px/90px 90px 10px 10px;

Triangles and Trapeziums are made using this border hack:

#hat_top {
 width: 6px;
 height: 0;
 margin: 0 auto;
 position: relative;
 top: 30px;
 border-bottom: 60px solid #FA523C;
 border-left: 40px solid transparent;
 border-right: 20px solid transparent;
}

It will look great in all the major browsers except Internet Explorer 8 and below.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    CSS3 Santa

    CSSDeck G+