A cool cartoon portrait implemented by pure CSS, an example of combining art with programming

Product design technology trends

A major technical trend in product design and development is not only responsive,

We also try our best to use CSS/HTML5 technology to replace images, so that we can achieve good design scalability and page access performance.

CSS cartoon instance

The following is a very cool cartoon avatar designed and developed by a WEB engineer in the UK. It is implemented with pure CSS and can be easily switched to the skin color :)

Demonstration page access link,Family portraits

Note: the Simpson family is a fictional family in the American animated scene comedy "the Simpson family.

Technologies used

Similar to the techniques used by artist sketch, the face of each character is first split into different shapes, and then gradually merged into portraits. The following is the split-up Simpson character model:

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 assembled with absolute positions,

The "Header" of Bart demonstrates the CSS Code 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; border-radius: 2px 0 0 0;

For more CSS code, visit the sample code page.

By iefreer