Pure CSS Implementation of cool cartoon portrait and Blink Effect

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 as an alternative to images, which allows for very good design extensibility and page access performance.

CSS Cartoon Instance

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

Demo page Visit link, Simpson family Avatar

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

The technology used

There are similarities to the techniques used by artist sketches. First, each person's face is disassembled into different shapes, and then gradually pieced together into a portrait.

Here is the Simpsons character model after disassembly:

According to the above model, the CSS div blocks of hair, head, eyes, nose, ears, mouth, chin and neck are constructed in sequence, and then the absolute position is used to spell together.

Bart's "head" model CSS code for example 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 many other CSS code, please visit the Sample code page .

by Iefreer

Pure CSS Implementation of cool cartoon portrait and Blink Effect