Pure CSS implementation of a very cool cartoon portrait, art and programming combined with the model

Product Design Technology Trends

A major technological trend in current product design and development in addition to responsiveness,

and try to use CSS/HTML5 technology instead of pictures, which gives you good design extensibility and page access performance.

CSS Cartoon Instance

Here is a British web engineer design and development of a very cool cartoon avatar, using a pure CSS implementation, but also simple to switch skin tone:)

Demo page access link, Simpson family Avatar

Note: The Simpsons (Simpson family) is a fictional family in the American animated sitcom "The Simpsons".

The technology used

Similar to the techniques used by artist sketches, the face of each character is first disassembled into different shapes, and then gradually pieced together into portraits. Here is the Simpsons character model after disassembly:

According to the above model, construct the CSS div blocks of hair, head, eyes, nose, ears, mouth, chin, neck, and then use absolute position to put together,

Bart's "head" demo CSS code is as follows:

Position:absolute;top:20px;left:33px;width:9px;height:7px;background: #fbd800; border-top:1px solid #110b00; border-left:1px solid #110b00;-webkit-transform:rotate (25deg) skew (23deg, 16deg),-ms-transform:rotate (25deg) Skew ( 23deg, 16deg), Transform:rotate (25deg) skew (23deg, 16deg),-webkit-border-radius:2px 0 0 0;-moz-border-radius:2px 0 0 0;b order-radius:2px 0 0 0;

For more CSS code, please visit the Demo code page.

by Iefreer