It’ll Blow your mind – CSS Painting

If there’s one thing that impressed me since I started with this web stuff is CSS painting. It used to be so hard that you could need several lines of code (like hundreds or thousands) to get the simple ones.

Now with barely 10 lines and a single element you can do simple paintings. This is especially useful if you want to do CSS animations because CSS generated elements are much likely to apply CSS standard animations.

Here is the code I used to do a simple scared face to show to your IE users:

#wd {

position: relative;

width: 450px;

height: 400px;

margin: 20px auto;

background:

-moz-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-moz-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-moz-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-moz-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-webkit-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-webkit-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-webkit-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-webkit-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-o-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-o-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-o-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-o-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-khtml-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-khtml-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-khtml-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-khtml-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-ms-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-ms-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-ms-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-ms-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

border-radius: 50%;

}

#wd:after {

content: "Are you using IE??";

position: absolute;

top: 225px;

left: 315px;

padding: 5px 10px;

width: 150px;

font-family: "comic Sans MS",arial,verdana; /* I just couldn't help using comics! */

background: white;

border: 2px solid #E19B92;

border-radius: 4px 4px 4px 4px;

}