Симпсоны на чистом CSS

    image

    Chris Pattle, web-разработчик из Великобритании, сделал потрясающую вещь — нарисовал персонажей всеми любимого мультсериала «Симпсоны» на чистом CSS. Код можно посмотреть в его аккаунте на github, или тут, под катом.

    normalize.css
    /*! normalize.css v1.1.3 | MIT License | git.io/normalize */
    
    /* ==========================================================================
       HTML5 display definitions
       ========================================================================== */
    
    /**
     * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
     */
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    nav,
    section,
    summary {
        display: block;
    }
    
    /**
     * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
     */
    
    audio,
    canvas,
    video {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }
    
    /**
     * Prevent modern browsers from displaying `audio` without controls.
     * Remove excess height in iOS 5 devices.
     */
    
    audio:not([controls]) {
        display: none;
        height: 0;
    }
    
    /**
     * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
     * Known issue: no IE 6 support.
     */
    
    [hidden] {
        display: none;
    }
    
    /* ==========================================================================
       Base
       ========================================================================== */
    
    /**
     * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
     *    `em` units.
     * 2. Prevent iOS text size adjust after orientation change, without disabling
     *    user zoom.
     */
    
    html {
        font-size: 100%; /* 1 */
        -ms-text-size-adjust: 100%; /* 2 */
        -webkit-text-size-adjust: 100%; /* 2 */
    }
    
    /**
     * Address `font-family` inconsistency between `textarea` and other form
     * elements.
     */
    
    html,
    button,
    input,
    select,
    textarea {
        font-family: sans-serif;
    }
    
    /**
     * Address margins handled incorrectly in IE 6/7.
     */
    
    body {
        margin: 0;
    }
    
    /* ==========================================================================
       Links
       ========================================================================== */
    
    /**
     * Address `outline` inconsistency between Chrome and other browsers.
     */
    
    a:focus {
        outline: thin dotted;
    }
    
    /**
     * Improve readability when focused and also mouse hovered in all browsers.
     */
    
    a:active,
    a:hover {
        outline: 0;
    }
    
    /* ==========================================================================
       Typography
       ========================================================================== */
    
    /**
     * Address font sizes and margins set differently in IE 6/7.
     * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
     * and Chrome.
     */
    
    h1 {
        font-size: 2em;
        margin: 0.67em 0;
    }
    
    h2 {
        font-size: 1.5em;
        margin: 0.83em 0;
    }
    
    h3 {
        font-size: 1.17em;
        margin: 1em 0;
    }
    
    h4 {
        font-size: 1em;
        margin: 1.33em 0;
    }
    
    h5 {
        font-size: 0.83em;
        margin: 1.67em 0;
    }
    
    h6 {
        font-size: 0.67em;
        margin: 2.33em 0;
    }
    
    /**
     * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
     */
    
    abbr[title] {
        border-bottom: 1px dotted;
    }
    
    /**
     * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
     */
    
    b,
    strong {
        font-weight: bold;
    }
    
    blockquote {
        margin: 1em 40px;
    }
    
    /**
     * Address styling not present in Safari 5 and Chrome.
     */
    
    dfn {
        font-style: italic;
    }
    
    /**
     * Address differences between Firefox and other browsers.
     * Known issue: no IE 6/7 normalization.
     */
    
    hr {
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        height: 0;
    }
    
    /**
     * Address styling not present in IE 6/7/8/9.
     */
    
    mark {
        background: #ff0;
        color: #000;
    }
    
    /**
     * Address margins set differently in IE 6/7.
     */
    
    p,
    pre {
        margin: 1em 0;
    }
    
    /**
     * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
     */
    
    code,
    kbd,
    pre,
    samp {
        font-family: monospace, serif;
        _font-family: 'courier new', monospace;
        font-size: 1em;
    }
    
    /**
     * Improve readability of pre-formatted text in all browsers.
     */
    
    pre {
        white-space: pre;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    /**
     * Address CSS quotes not supported in IE 6/7.
     */
    
    q {
        quotes: none;
    }
    
    /**
     * Address `quotes` property not supported in Safari 4.
     */
    
    q:before,
    q:after {
        content: '';
        content: none;
    }
    
    /**
     * Address inconsistent and variable font size in all browsers.
     */
    
    small {
        font-size: 80%;
    }
    
    /**
     * Prevent `sub` and `sup` affecting `line-height` in all browsers.
     */
    
    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    
    sup {
        top: -0.5em;
    }
    
    sub {
        bottom: -0.25em;
    }
    
    /* ==========================================================================
       Lists
       ========================================================================== */
    
    /**
     * Address margins set differently in IE 6/7.
     */
    
    dl,
    menu,
    ol,
    ul {
        margin: 1em 0;
    }
    
    dd {
        margin: 0 0 0 40px;
    }
    
    /**
     * Address paddings set differently in IE 6/7.
     */
    
    menu,
    ol,
    ul {
        padding: 0 0 0 40px;
    }
    
    /**
     * Correct list images handled incorrectly in IE 7.
     */
    
    nav ul,
    nav ol {
        list-style: none;
        list-style-image: none;
    }
    
    /* ==========================================================================
       Embedded content
       ========================================================================== */
    
    /**
     * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
     * 2. Improve image quality when scaled in IE 7.
     */
    
    img {
        border: 0; /* 1 */
        -ms-interpolation-mode: bicubic; /* 2 */
    }
    
    /**
     * Correct overflow displayed oddly in IE 9.
     */
    
    svg:not(:root) {
        overflow: hidden;
    }
    
    /* ==========================================================================
       Figures
       ========================================================================== */
    
    /**
     * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
     */
    
    figure {
        margin: 0;
    }
    
    /* ==========================================================================
       Forms
       ========================================================================== */
    
    /**
     * Correct margin displayed oddly in IE 6/7.
     */
    
    form {
        margin: 0;
    }
    
    /**
     * Define consistent border, margin, and padding.
     */
    
    fieldset {
        border: 1px solid #c0c0c0;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
    }
    
    /**
     * 1. Correct color not being inherited in IE 6/7/8/9.
     * 2. Correct text not wrapping in Firefox 3.
     * 3. Correct alignment displayed oddly in IE 6/7.
     */
    
    legend {
        border: 0; /* 1 */
        padding: 0;
        white-space: normal; /* 2 */
        *margin-left: -7px; /* 3 */
    }
    
    /**
     * 1. Correct font size not being inherited in all browsers.
     * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
     *    and Chrome.
     * 3. Improve appearance and consistency in all browsers.
     */
    
    button,
    input,
    select,
    textarea {
        font-size: 100%; /* 1 */
        margin: 0; /* 2 */
        vertical-align: baseline; /* 3 */
        *vertical-align: middle; /* 3 */
    }
    
    /**
     * Address Firefox 3+ setting `line-height` on `input` using `!important` in
     * the UA stylesheet.
     */
    
    button,
    input {
        line-height: normal;
    }
    
    /**
     * Address inconsistent `text-transform` inheritance for `button` and `select`.
     * All other form control elements do not inherit `text-transform` values.
     * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
     * Correct `select` style inheritance in Firefox 4+ and Opera.
     */
    
    button,
    select {
        text-transform: none;
    }
    
    /**
     * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
     *    and `video` controls.
     * 2. Correct inability to style clickable `input` types in iOS.
     * 3. Improve usability and consistency of cursor style between image-type
     *    `input` and others.
     * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
     *    Known issue: inner spacing remains in IE 6.
     */
    
    button,
    html input[type="button"], /* 1 */
    input[type="reset"],
    input[type="submit"] {
        -webkit-appearance: button; /* 2 */
        cursor: pointer; /* 3 */
        *overflow: visible;  /* 4 */
    }
    
    /**
     * Re-set default cursor for disabled elements.
     */
    
    button[disabled],
    html input[disabled] {
        cursor: default;
    }
    
    /**
     * 1. Address box sizing set to content-box in IE 8/9.
     * 2. Remove excess padding in IE 8/9.
     * 3. Remove excess padding in IE 7.
     *    Known issue: excess padding remains in IE 6.
     */
    
    input[type="checkbox"],
    input[type="radio"] {
        box-sizing: border-box; /* 1 */
        padding: 0; /* 2 */
        *height: 13px; /* 3 */
        *width: 13px; /* 3 */
    }
    
    /**
     * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
     * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
     *    (include `-moz` to future-proof).
     */
    
    input[type="search"] {
        -webkit-appearance: textfield; /* 1 */
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box; /* 2 */
        box-sizing: content-box;
    }
    
    /**
     * Remove inner padding and search cancel button in Safari 5 and Chrome
     * on OS X.
     */
    
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }
    
    /**
     * Remove inner padding and border in Firefox 3+.
     */
    
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
    
    /**
     * 1. Remove default vertical scrollbar in IE 6/7/8/9.
     * 2. Improve readability and alignment in all browsers.
     */
    
    textarea {
        overflow: auto; /* 1 */
        vertical-align: top; /* 2 */
    }
    
    /* ==========================================================================
       Tables
       ========================================================================== */
    
    /**
     * Remove most spacing between table cells.
     */
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    


    Homer

    HTML
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Homer Simpson in CSS</title>
        <meta name="description" content="Homer Simpmson in CSS">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/homer.css">
        <script type="text/javascript">
            if(navigator.userAgent.indexOf("WebKit") != -1) {
                var link = document.createElement('link');
                link.href='css/homer-webkit.css';
                link.rel='stylesheet';
    
                document.getElementsByTagName('head')[0].appendChild(link);
            }
        </script>
    </head>
    <body>
    
        <div id="homer">
            <div class="head">
                
                <!-- Hair and top of head -->
                <div class="hair1"></div>
                <div class="hair2"></div>
                <div class="head-top"></div>
                <div class="head-main"></div>
                
                <!-- The 'M' above the ear -->
                <div class="m1"></div>
                <div class="m2"></div>
                <div class="m3"></div>
                <div class="m4"></div>
                
                <!-- The neck parts -->
                <div class="neck1"></div>
                <div class="neck2"></div>
                
                <!-- The ear -->
                <div class="ear">
                    <div class="inner1"></div>
                    <div class="inner2"></div>
                    <div class="clip"></div>
                </div>
                
                <!-- The mouth -->
                <div class="mouth">
                    <div class="mouth5"></div>
                    <div class="mouth2"></div>
                    <div class="mouth1"></div>
                    <div class="mouth7"></div>
                    <div class="mouth3"></div>
                    <div class="mouth4"></div>
                    <div class="mouth6"></div>
                    <div class="mouth8"></div>
                </div>
                
                <!-- The right eye -->
                <div class="right-eye">
                    <div class="right-eye-pupil"></div>
                </div>
                
                <!-- The nose -->
                <div class="nose"></div>
                <div class="nose-tip"></div>
                
                <!-- The left eye -->
                <div class="left-eye">
                    <div class="left-eye-pupil"></div>
                </div>
            </div>
        </div>
        
    </body>
    </html>
    


    homer.css
    #homer *
    {
        position: absolute;
        box-sizing:content-box;
        -moz-box-sizing:content-box;
    }
    
    
    #homer
    {
        position: relative;
        width: 160px;
        height: 133px;
        margin: 0 auto;
    }
    
    #homer .head .hair1
    {
        top: 14px;
        left: 32px;    
        height:13px;
        width:22px;
        border-radius: 22px 22px 0 0;
        -moz-border-radius: 22px 22px 0 0;
        -webkit-border-radius: 22px 22px 0 0;
        background: transparent;
        -webkit-transform: rotate(-44deg);
        -ms-transform: rotate(-44deg);
        transform: rotate(-44deg);
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
    }
    
    #homer .head .hair2
    {
        top: 8px;
        left: 41px;    
        height:16px;
        width:26px;
        border-radius: 32px 32px 0 0;
        -moz-border-radius: 32px 32px 0 0;
        -webkit-border-radius: 32px 32px 0 0;
        background: transparent;
        -webkit-transform: rotate(-27deg);
        -ms-transform: rotate(-27deg);
        transform: rotate(-27deg);
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
    }
    
    #homer .head .head-top
    {
        top: 15px;
        left: 34px;
        width: 65px;
        height: 62px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-right: 1px solid #110b00;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
        -moz-border-radius: 43% 44% 0 0;
        -webkit-border-radius: 43% 44% 0 0;
        border-radius: 43% 44% 0 0;
        -webkit-box-shadow: inset 8px 12px 0px -12px rgba(247,254,140,1), inset 13px 3px 0px -11px rgba(247,254,140,1), inset -2px 0px 0px 0px rgba(229,158,4,1);
        -moz-box-shadow: inset 8px 12px 0px -12px rgba(247,254,140,1), inset 13px 3px 0px -11px rgba(247,254,140,1), inset -2px 0px 0px 0px rgba(229,158,4,1);
        box-shadow: inset 8px 12px 0px -12px rgba(247,254,140,1), inset 13px 3px 0px -11px rgba(247,254,140,1), inset -2px 0px 0px 0px rgba(229,158,4,1);
    }
    
    #homer .head .head-main
    {
        top: 40px;
        left: 49px;
        width: 48px;
        height: 62px;
        background: #fbd800;
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }
    
    #homer .head .m1, #homer .head .m2, #homer .head .m3, #homer .head .m4
    {
        width: 1px;
        height: 14px;
        background: #110b00;
    }
    
    #homer .head .m1
    {
        top: 77px;
        left: 41px;
        -webkit-transform: rotate(-13deg);
        -ms-transform: rotate(-13deg);
        transform: rotate(-13deg);
    }
    
    #homer .head .m2
    {
        top: 76px;
        left: 44px;
        height: 12px;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    
    #homer .head .m3
    {
        top: 71px;
        left: 48px;
        height: 15px;
        -webkit-transform: rotate(1deg);
        -ms-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    
    #homer .head .m4
    {
        top: 70px;
        left: 53px;
        -webkit-transform: rotate(-39deg);
        -ms-transform: rotate(-39deg);
        transform: rotate(-39deg);
    }
    
    
    #homer .head .bulge
    {
        top: 60px;
        left: 90px;
        width: 15px;
        height: 15px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #fbd800;
        border: 2px solid #110b00;
    }
    
    #homer .head .ear
    {
        top: 90px;
        left: 46px;
        width: 11px;
        height: 13px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #fbd800;
        border: 1px solid #110b00;
    }
    
    #homer .head .ear .inner1
    {
        top: 3px;
        left: 2px;
        width: 7px;
        height: 5px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border-top: 1px solid #110b00;
        -webkit-transform: rotate(-21deg);
        -ms-transform: rotate(-21deg);
        transform: rotate(-21deg);
    }
    
    #homer .head .ear .inner2
    {
        top: 3px;
        left: 4px;
        width: 7px;
        height: 5px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border-top: 1px solid #110b00;
        -webkit-transform: rotate(-109deg);
        -ms-transform: rotate(-109deg);
        transform: rotate(-109deg);
    }
    
    #homer .head .ear .clip
    {
        top: 1px;
        left: 8px;
        width: 5px;
        height: 10px;
        background: #fbd800;
    }
    
    #homer .head .right-eye
    {
        top: 48px;
        left: 80px;
        width: 31px;
        height: 31px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid #110b00;
        box-shadow: -2px -1px 0px 0px rgba(247,254,140,1);
    }
    
    #homer .head .right-eye .right-eye-pupil
    {
        top: 11px;
        left: 20px;
        width: 4px;
        height: 4px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #110b00;
    }
    
    #homer .head .left-eye
    {
        top: 51px;
        left: 55px;
        width: 31px;
        height: 31px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid #110b00;
        box-shadow: -1px -1px 0px 0px rgba(247,254,140,1);
    }
    
    #homer .head .left-eye .left-eye-pupil
    {
        top: 13px;
        left: 11px;
        width: 4px;
        height: 4px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #110b00;
    }
    
    #homer .head .nose
    {
        top: 71px;
        left: 82px;
        width: 18px;
        height: 12px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
        -webkit-transform: rotate(-13deg);
        -ms-transform: rotate(-13deg);
        transform: rotate(-13deg);
    }
    
    #homer .head .nose-tip
    {
        top: 69px;
        left: 92px;
        width: 14px;
        height: 12px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-right: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
        -moz-border-radius: 0 50% 50% 0%;
        -webkit-border-radius: 0 50% 50% 0;
        border-radius: 0 50% 50% 0;
        -webkit-transform: rotate(-13deg);
        -ms-transform: rotate(-13deg);
        transform: rotate(-13deg);
    }
    
    #homer .head .neck1
    {
        top: 85px;
        left: 48px;
        width: 6px;
        height: 31px;
        background: transparent;
        border-right: 1px solid #110b00;
        border-radius: 50% 50% 25% 50%;
        -webkit-transform: rotate(-14deg);
        -ms-transform: rotate(-14deg);
        transform: rotate(-14deg);
        -webkit-box-shadow: 2px 0px 0px 0px rgba(247,254,140,1), 5px 0px 0px 0px rgba(251,216,0,1);
        -moz-box-shadow: 2px 0px 0px 0px rgba(247,254,140,1), 5px 0px 0px 0px rgba(251,216,0,1);
        box-shadow: 2px 0px 0px 0px rgba(247,254,140,1), 5px 0px 0px 0px rgba(251,216,0,1);
    }
    
    #homer .head .neck2
    {
        top: 114px;
        left: 57px;
        width: 45px;
        height: 19px;
        background: #fbd800;
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
        -webkit-box-shadow: inset 2px 0px 0px 0px rgba(247,254,140,1);
        -moz-box-shadow: inset 2px 0px 0px 0px rgba(247,254,140,1);
        box-shadow: inset 2px 0px 0px 0px rgba(247,254,140,1);
    }
    
    #homer .head .mouth1
    {
        top: 86px;
        left: 60px;
        width: 48px;
        height: 44px;
        background: #cfae67;
        -moz-border-radius: 46% 52% 44% 50%;
        -webkit-border-radius: 46% 52% 44% 50%;
        border-radius: 46% 52% 44% 50%;
        border: 1px solid #110b00;
        -webkit-box-shadow: inset -1px -1px 0px 0px rgba(152,110,36,1);
        -moz-box-shadow: inset -1px -1px 0px 0px rgba(152,110,36,1);
        box-shadow: inset -1px -1px 0px 0px rgba(152,110,36,1);
    }
    
    #homer .head .mouth2
    {
        top: 101px;
        left: 75px;
        width: 48px;
        height: 12px;
        background: #cfae67;
        -moz-border-radius: 46% 52% 44% 50%;
        -webkit-border-radius: 46% 52% 44% 50%;
        border-radius: 46% 52% 44% 50%;
        border: 1px solid #110b00;
        -webkit-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        transform: rotate(-15deg);
        -webkit-box-shadow: inset -1px 0px 0px 0px rgba(152,110,36,1);
        -moz-box-shadow: inset -1px 0px 0px 0px rgba(152,110,36,1);
        box-shadow: inset -1px 0px 0px 0px rgba(152,110,36,1);
    }
    
    #homer .head .mouth3
    {
        top: 102px;
        left: 67px;
        width: 48px;
        height: 12px;
        background: transparent;
        -moz-border-radius: 46% 52% 44% 50%;
        -webkit-border-radius: 46% 52% 44% 50%;
        border-radius: 46% 52% 44% 50%;
        border-bottom: 1px solid #110b00;
        -webkit-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        transform: rotate(-4deg);
        border-top: none;
    }
    
    #homer .head .mouth4
    {
        top: 110px;
        left: 70px;
        width: 7px;
        height: 5px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border-top: 1px solid #110b00;
        -webkit-transform: rotate(-81deg);
        -ms-transform: rotate(-81deg);
        transform: rotate(-81deg);
    }
    
    #homer .head .mouth5
    {
        top: 84px;
        left: 96px;
        width: 27px;
        height: 13px;
        background: transparent;
        -moz-border-radius: 46% 52% 44% 50%;
        -webkit-border-radius: 46% 52% 44% 50%;
        border-radius: 46% 52% 44% 50%;
        border: 1px solid #110b00;
        -webkit-transform: rotate(-131deg);
        -ms-transform: rotate(-131deg);
        transform: rotate(-131deg);
        border-top: none;
        -webkit-box-shadow: inset -1px -1px 0px 0px rgba(152,110,36,1);
        -moz-box-shadow: inset -1px -1px 0px 0px rgba(152,110,36,1);
        box-shadow: inset -1px -1px 0px 0px rgba(152,110,36,1);
    }
    
    #homer .head .mouth6
    {
        top: 84px;
        left: 78px;
        width: 32px;
        height: 31px;
        background: #cfae67;
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg);
        -moz-border-radius: 0 0 0px 22px;
        -webkit-border-radius: 0 0 0px 22px;
        border-radius: 0 0 0px 22px;
    }
    
    #homer .head .mouth7
    {
        top: 104px;
        left: 94px;
        width: 17px;
        height: 12px;
        background: #cfae67;
        -moz-border-radius: 46% 52% 44% 50%;
        -webkit-border-radius: 46% 52% 44% 50%;
        border-radius: 46% 52% 44% 50%;
        border: 1px solid #110b00;
        border-left: none;
        border-bottom: none;
        -webkit-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    
    #homer .head .mouth8
    {
        top: 79px;
        left: 103px;
        width: 15px;
        height: 30px;
        background: #cfae67;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
    


    Bart

    HTML
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Bart Simpson in CSS</title>
        <meta name="description" content="Bart Simpson in CSS">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/bart.css">
    </head>
    <body>
    
        <div id="bart">
            <div class="head">
                <div class="hair1"></div>
                <div class="hair2"></div>
                <div class="hair3"></div>
                <div class="hair4"></div>
                <div class="hair5"></div>
                <div class="hair6"></div>
                <div class="hair7"></div>
                <div class="hair8"></div>
                <div class="hair9"></div>
                <div class="mouth-lip2"></div>
                <div class="head-left1"></div>
                <div class="head-left2"></div>
                <div class="head-left3"></div>
                <div class="head-left4"></div>
                <div class="head-left5"></div>
                <div class="head-left6"></div>
                <div class="head-left7"></div>
                <div class="eyelid"></div>
                <div class="mouth"></div>
                <div class="mouth-lip"></div>
                <div class="head-right2"></div>
                <div class="head-right1"></div>
                <div class="head-right3"></div>
                
                <!-- The ear -->
                <div class="ear">
                    <div class="inner1"></div>
                    <div class="inner2"></div>
                    <div class="clip"></div>
                </div>
                
                <!-- The right eye -->
                <div class="right-eye">
                    <div class="right-eye-pupil"></div>
                </div>
                
                <!-- The nose -->
                <div class="nose"></div>
                <div class="nose-tip"></div>
                
                <!-- The left eye -->
                <div class="left-eye">
                    <div class="left-eye-pupil"></div>
                </div>
                
                <div class="mouth-smile"></div>
            </div>
        </div>
        
    </body>
    </html>
    


    bart.css
    #bart *
    {
        position: absolute;
        box-sizing:content-box;
        -moz-box-sizing:content-box;
    }
    
    
    #bart
    {
        position: relative;
        width: 135px;
        height: 130px;
        margin: 0 auto;
    }
    
    #bart .head .hair1
    {
        top: 22px;
        left: 28px;
        width: 6px;
        height: 7px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(-22deg) skew(-7deg, 51deg);
        -ms-transform: rotate(-22deg) skew(-7deg, 51deg);
        transform: rotate(-22deg) skew(-7deg, 51deg);
        -webkit-border-radius: 2px 0 0 0;
        -moz-border-radius: 2px 0 0 0;
        border-radius: 2px 0 0 0;
    }
    
    #bart .head .hair2
    {
        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;
    }
    
    #bart .head .hair3
    {
        top: 17px;
        left: 40px;
        width: 9px;
        height: 8px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(27deg) skew(22deg, 16deg);
        -ms-transform: rotate(27deg) skew(22deg, 16deg);
        transform: rotate(27deg) skew(22deg, 16deg);
        -webkit-border-radius: 2px 0 0 0;
        -moz-border-radius: 2px 0 0 0;
        border-radius: 2px 0 0 0;
    }
    
    #bart .head .hair4
    {
        top: 15px;
        left: 48px;
        width: 10px;
        height: 9px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(35deg) skew(22deg, 16deg);
        -ms-transform: rotate(35deg) skew(22deg, 16deg);
        transform: rotate(35deg) skew(22deg, 16deg);
        -webkit-border-radius: 2px 0 0 0;
        -moz-border-radius: 2px 0 0 0;
        border-radius: 2px 0 0 0;
    }
    
    #bart .head .hair5
    {
        top: 13px;
        left: 57px;
        width: 9px;
        height: 9px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(37deg) skew(22deg, 16deg);
        -ms-transform: rotate(37deg) skew(22deg, 16deg);
        transform: rotate(37deg) skew(22deg, 16deg);
        -webkit-border-radius: 2px 0 0 0;
        -moz-border-radius: 2px 0 0 0;
        border-radius: 2px 0 0 0;
    }
    
    #bart .head .hair6
    {
        top: 12px;
        left: 65px;
        width: 10px;
        height: 9px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(50deg) skew(24deg, 16deg);
        -ms-transform: rotate(50deg) skew(24deg, 16deg);
        transform: rotate(50deg) skew(24deg, 16deg);
        -webkit-border-radius: 2px 0 0 0;
        -moz-border-radius: 2px 0 0 0;
        border-radius: 2px 0 0 0;
    }
    
    #bart .head .hair7
    {
        top: 12px;
        left: 73px;
        width: 10px;
        height: 8px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(51deg) skew(24deg, 10deg);
        -ms-transform: rotate(51deg) skew(24deg, 10deg);
        transform: rotate(51deg) skew(24deg, 10deg);
        -webkit-border-radius: 2px 0 0 0;
        -moz-border-radius: 2px 0 0 0;
        border-radius: 2px 0 0 0;
    }
    
    #bart .head .hair8
    {
        top: 14px;
        left: 82px;
        width: 9px;
        height: 7px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(51deg) skew(24deg, 10deg);
        -ms-transform: rotate(51deg) skew(24deg, 10deg);
        transform: rotate(51deg) skew(24deg, 10deg);
        -webkit-border-radius: 2px 0 0 0;
        -moz-border-radius: 2px 0 0 0;
        border-radius: 2px 0 0 0;
    }
    
    #bart .head .hair9
    {
        top: 15px;
        left: 89px;
        width: 9px;
        height: 7px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(79deg) skew(35deg, 10deg);
        -ms-transform: rotate(79deg) skew(35deg, 10deg);
        transform: rotate(79deg) skew(35deg, 10deg);
        -webkit-border-radius: 2px 0 0 0;
        -moz-border-radius: 2px 0 0 0;
        border-radius: 2px 0 0 0;
    }
    
    #bart .head .head-left1
    {
        top: 24px;
        left: 29px;
        width: 17px;
        height: 15px;
        background: #fbd800;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(-13deg);
        -ms-transform: rotate(-13deg);
        transform: rotate(-13deg);
    }
    
    #bart .head .head-left2
    {
        top: 33px;
        left: 31px;
        width: 17px;
        height: 18px;
        background: #fbd800;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(-11deg);
        -ms-transform: rotate(-11deg);
        transform: rotate(-11deg);
    }
    
    #bart .head .head-left3
    {
        top: 46px;
        left: 33px;
        width: 17px;
        height: 16px;
        background: #fbd800;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(-9deg);
        -ms-transform: rotate(-9deg);
        transform: rotate(-9deg);
    }
    
    #bart .head .head-left4
    {
        top: 61px;
        left: 35px;
        width: 17px;
        height: 16px;
        background: #fbd800;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(-7deg);
        -ms-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    
    #bart .head .head-left5
    {
        top: 76px;
        left: 37px;
        width: 20px;
        height: 16px;
        background: #fbd800;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    
    #bart .head .head-left6
    {
        top: 90px;
        left: 39px;
        width: 28px;
        height: 31px;
        background: #fbd800;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    
    #bart .head .head-left7
    {
        top: 119px;
        left: 38px;
        width: 27px;
        height: 8px;
        background: #fbd800;
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
        -webkit-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    
    #bart .head .head-right1
    {
        top: 20px;
        left: 47px;
        width: 50px;
        height: 37px;
        background: #fbd800;
        border-right: 1px solid #000000;
        -webkit-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    
    #bart .head .head-right2
    {
        top: 46px;
        left: 47px;
        width: 51px;
        height: 24px;
        background: #fbd800;
        -webkit-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    
    #bart .head .head-right3
    {
        top: 83px;
        left: 52px;
        width: 50px;
        height: 27px;
        background: #fbd800;
        border-right: 1px solid #000000;
        -webkit-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    
    #bart .head .ear
    {
        top: 88px;
        left: 33px;
        width: 11px;
        height: 13px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #fbd800;
        border: 1px solid #110b00;
    }
    
    #bart .head .ear .inner1
    {
        top: 3px;
        left: 2px;
        width: 7px;
        height: 5px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border-top: 1px solid #110b00;
        -webkit-transform: rotate(-21deg);
        -ms-transform: rotate(-21deg);
        transform: rotate(-21deg);
    }
    
    #bart .head .ear .inner2
    {
        top: 3px;
        left: 4px;
        width: 7px;
        height: 5px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border-top: 1px solid #110b00;
        -webkit-transform: rotate(-109deg);
        -ms-transform: rotate(-109deg);
        transform: rotate(-109deg);
    }
    
    #bart .head .ear .clip
    {
        top: 1px;
        left: 9px;
        width: 3px;
        height: 10px;
        background: #fbd800;
    }
    
    #bart .head .eyelid
    {
        top: 55px;
        left: 91px;
        width: 10px;
        height: 10px;
        background: #fbd800;
        border: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #bart .head .right-eye
    {
        top: 60px;
        left: 79px;
        width: 27px;
        height: 27px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid #110b00;
    }
    
    #bart .head .right-eye .right-eye-pupil
    {
        top: 11px;
        left: 8px;
        width: 4px;
        height: 4px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #110b00;
    }
    
    #bart .head .left-eye
    {
        top: 60px;
        left: 52px;
        width: 30px;
        height: 30px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid #110b00;
    }
    
    #bart .head .left-eye .left-eye-pupil
    {
        top: 13px;
        left: 9px;
        width: 4px;
        height: 4px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #110b00;
    }
    
    #bart .head .nose
    {
        top: 83px;
        left: 83px;
        width: 12px;
        height: 12px;
        background: #fbd800;
        border-top: 1px solid #110b00;
    }
    
    #bart .head .nose-tip
    {
        top: 82px;
        left: 88px;
        width: 14px;
        height: 12px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-right: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
        -moz-border-radius: 0 50% 50% 0%;
        -webkit-border-radius: 0 50% 50% 0;
        border-radius: 0 50% 50% 0;
        -webkit-transform: rotate(-6deg);
        -ms-transform: rotate(-6deg);
        transform: rotate(-6deg);
    }
    
    #bart .head .mouth
    {
        top: 101px;
        left: 55px;
        width: 50px;
        height: 15px;
        background: #fbd800;
        border-bottom: 1px solid #110b00;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }
    
    #bart .head .mouth-smile
    {
        top: 111px;
        left: 56px;
        width: 7px;
        height: 5px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border-top: 1px solid #110b00;
        -webkit-transform: rotate(-52deg);
        -ms-transform: rotate(-52deg);
        transform: rotate(-52deg);
    }
    
    #bart .head .mouth-lip
    {
        top: 101px;
        left: 54px;
        width: 50px;
        height: 14px;
        background: #fbd800;
        border: 1px solid #110b00;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }
    
    #bart .head .mouth-lip2
    {
        top: 106px;
        left: 45px;
        width: 30px;
        height: 14px;
        background: #fbd800;
        border: 1px solid #110b00;
        -moz-border-radius: 32%;
        -webkit-border-radius: 32%;
        border-radius: 32%;
    }
    


    Marge

    HTML
    <!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Marge Simpson in CSS</title>
        <meta name="description" content="Marge Simpson in CSS">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/marge.css">
    </head>
    <body>
    
        <div id="marge">
            <div class="head">
                <div class="head-main"></div>
                <div class="mouth-lip2"></div>
                <div class="mouth-lip"></div>
                <div class="neck"></div>
                <div class="mouth"></div>
                <div class="neck2"></div>
                <div class="neck3"></div>
                <div class="mouth-smile"></div>
                
                <div class="hair1 hair-circle"></div>
                <div class="hair2 hair-circle"></div>
                <div class="hair3 hair-circle"></div>
                <div class="hair4 hair-circle"></div>
                <div class="hair5 hair-circle"></div>
                <div class="hair6 hair-circle"></div>
                <div class="hair7 hair-circle"></div>
                <div class="hair8 hair-circle"></div>
                <div class="hair9 hair-circle"></div>
                <div class="hair10 hair-circle"></div>
                <div class="hair11 hair-circle"></div>
                <div class="hair12 hair-circle"></div>
                <div class="hair13 hair-circle"></div>
                <div class="hair14 hair-circle"></div>
                <div class="hair15 hair-circle"></div>
                <div class="hair16 hair-circle"></div>
                <div class="hair17 hair-circle"></div>
                <div class="hair18 hair-circle"></div>
                <div class="hair19 hair-circle"></div>
                <div class="hair20 hair-circle"></div>
                <div class="hair21 hair-circle"></div>
                <div class="hair22 hair-circle"></div>
                <div class="hair23 hair-circle"></div>
                <div class="hair24 hair-circle"></div>
                <div class="hair25 hair-circle"></div>
                <div class="hair26 hair-circle"></div>
                <div class="hair27 hair-circle"></div>
                <div class="hair28 hair-circle"></div>
                <div class="hair29 hair-circle"></div>
                <div class="hair30 hair-circle"></div>
                <div class="hair-main"></div>
                <div class="hair-main2"></div>
                <div class="hair-main3"></div>
                <div class="hair-main4"></div>
                <div class="hair-main5"></div>
                <div class="hair-main6"></div>
                <div class="hair-main7"></div>
                
                <!-- The ear -->
                <div class="ear">
                    <div class="inner1"></div>
                    <div class="inner2"></div>
                    <div class="clip"></div>
                </div>
                
                <div class="eyelash1 eyelash"></div>
                <div class="eyelash2 eyelash"></div>
                <div class="eyelash3 eyelash"></div>
                <div class="eyelash4 eyelash"></div>
                <div class="eyelash5 eyelash"></div>
                <div class="eyelash6 eyelash"></div>
                <div class="eyelash7 eyelash"></div>
                <div class="eyelash8 eyelash"></div>
                
                <!-- The right eye -->
                <div class="right-eye">
                    <div class="right-eye-pupil"></div>
                </div>
                
                <!-- The nose -->
                <div class="nose"></div>
                <div class="nose-tip"></div>
                
                <!-- The left eye -->
                <div class="left-eye">
                    <div class="left-eye-pupil"></div>
                </div>
            </div>
        </div>
        
    </body>
    </html> 

    marge.css
    #marge *
    {
        position: absolute;
        box-sizing:content-box;
        -moz-box-sizing:content-box;
    }
    
    
    #marge
    {
        position: relative;
        width: 140px;
        height: 205px;
        margin: 0 auto;
    }
    
    #marge .head .hair-main
    {
        top: 7px;
        left: 29px;
        width: 67px;
        height: 133px;
        background: #107dc0;
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg);
        border-radius: 19px 33px 0px 0px;
    }
    
    #marge .head .hair-main2
    {
        top: 5px;
        left: 22px;
        width: 58px;
        height: 37px;
        background: #107dc0;
        -webkit-transform: rotate(7deg);
        -ms-transform: rotate(7deg);
        transform: rotate(7deg);
        border-radius: 50% 50% 50% 50%;
    }
    
    #marge .head .hair-main3
    {
        top: 63px;
        left: 50px;
        width: 90px;
        height: 19px;
        background: #107dc0;
        -webkit-transform: rotate(71deg);
        -ms-transform: rotate(71deg);
        transform: rotate(71deg);
        border-radius: 50%;
    }
    
    #marge .head .hair-main4
    {
        top: 114px;
        left: 88px;
        width: 43px;
        height: 12px;
        background: #107dc0;
        -webkit-transform: rotate(67deg);
        -ms-transform: rotate(67deg);
        transform: rotate(67deg);
        border-radius: 50%;
    }
    
    #marge .head .hair-main5
    {
        top: 46px;
        left: 30px;
        width: 30px;
        height: 83px;
        background: #107dc0;
        -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }
    
    #marge .head .hair-main6
    {
        top: 140px;
        left: 51px;
        width: 17px;
        height: 34px;
        background: #107dc0;
        border-radius: 10px 22px 27px 10px;
        -webkit-transform: rotate(-15deg);
        -ms-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
    
    #marge .head .hair-main7
    {
        top: 179px;
        left: 62px;
        width: 7px;
        height: 7px;
        background: #107dc0;
        border-radius: 50%;
    }
    
    #marge .head .hair-circle
    {
        background: #107dc0;
        border: 1px solid #110b00;
        border-radius: 50%;
    }
    
    #marge .head .hair1
    {
        top: 1px;
        left: 37px;
        width: 17px;
        height: 10px;
        -webkit-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg);
        -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    }
    
    #marge .head .hair2
    {
        top: 3px;
        left: 54px;
        width: 15px;
        height: 10px;
        -webkit-transform: rotate(28deg);
        -ms-transform: rotate(28deg);
        transform: rotate(28deg);
        -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    }
    
    #marge .head .hair3
    {
        top: 12px;
        left: 66px;
        width: 15px;
        height: 10px;
        -webkit-transform: rotate(53deg);
        -ms-transform: rotate(53deg);
        transform: rotate(53deg);
        -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    }
    
    #marge .head .hair4
    {
        top: 24px;
        left: 75px;
        width: 15px;
        height: 10px;
        -webkit-transform: rotate(68deg);
        -ms-transform: rotate(68deg);
        transform: rotate(68deg);
        -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    }
    
    #marge .head .hair5
    {
        top: 38px;
        left: 82px;
        width: 16px;
        height: 10px;
        -webkit-transform: rotate(68deg);
        -ms-transform: rotate(68deg);
        transform: rotate(68deg);
        -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    }
    
    #marge .head .hair6
    {
        top: 52px;
        left: 88px;
        width: 16px;
        height: 10px;
        -webkit-transform: rotate(68deg);
        -ms-transform: rotate(68deg);
        transform: rotate(68deg);
        -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    }
    
    #marge .head .hair7
    {
        top: 66px;
        left: 94px;
        width: 15px;
        height: 10px;
        -webkit-transform: rotate(66deg);
        -ms-transform: rotate(66deg);
        transform: rotate(66deg);
        -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    }
    
    #marge .head .hair8
    {
        top: 80px;
        left: 99px;
        width: 14px;
        height: 10px;
        -webkit-transform: rotate(79deg);
        -ms-transform: rotate(79deg);
        transform: rotate(79deg);
        -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    }
    
    #marge .head .hair9
    {
        top: 93px;
        left: 101px;
        width: 15px;
        height: 10px;
        -webkit-transform: rotate(65deg);
        -ms-transform: rotate(65deg);
        transform: rotate(65deg);
        -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    }
    
    #marge .head .hair10
    {
        top: 107px;
        left: 104px;
        width: 16px;
        height: 10px;
        -webkit-transform: rotate(65deg);
        -ms-transform: rotate(65deg);
        transform: rotate(65deg);
        -webkit-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        -moz-box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
        box-shadow: inset 0px 2px 0px 0px rgba(149,179,222,1);
    }
    
    #marge .head .hair11
    {
        top: 121px;
        left: 106px;
        width: 15px;
        height: 14px;
        -webkit-transform: rotate(95deg);
        -ms-transform: rotate(95deg);
        transform: rotate(95deg);
        -webkit-box-shadow: inset 0px 1px 0px 0px rgba(149,179,222,1);
        -moz-box-shadow: inset 0px 1px 0px 0px rgba(149,179,222,1);
        box-shadow: inset 0px 1px 0px 0px rgba(149,179,222,1);
    }
    
    #marge .head .hair12
    {
        top: 134px;
        left: 109px;
        width: 13px;
        height: 10px;
        -webkit-transform: rotate(82deg);
        -ms-transform: rotate(82deg);
        transform: rotate(82deg);
        -webkit-box-shadow: inset 0px 1px 0px 0px rgba(149,179,222,1);
        -moz-box-shadow: inset 0px 1px 0px 0px rgba(149,179,222,1);
        box-shadow: inset 0px 1px 0px 0px rgba(149,179,222,1);
    }
    
    #marge .head .hair13
    {
        top: 125px;
        left: 94px;
        width: 15px;
        height: 10px;
        -webkit-transform: rotate(7deg);
        -ms-transform: rotate(7deg);
        transform: rotate(7deg);
    }
    
    #marge .head .hair14
    {
        top: 126px;
        left: 79px;
        width: 16px;
        height: 10px;
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }
    
    #marge .head .hair15
    {
        top: 131px;
        left: 64px;
        width: 16px;
        height: 10px;
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }
    
    #marge .head .hair16
    {
        top: 139px;
        left: 52px;
        width: 16px;
        height: 19px;
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }
    
    #marge .head .hair17
    {
        top: 154px;
        left: 59px;
        width: 11px;
        height: 13px;
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }
    
    #marge .head .hair18
    {
        top: 180px;
        left: 63px;
        width: 9px;
        height: 9px;
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }
    
    #marge .head .hair19
    {
        top: 170px;
        left: 54px;
        width: 12px;
        height: 14px;
        -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        transform: rotate(-18deg);
        -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    }
    
    #marge .head .hair20
    {
        top: 156px;
        left: 49px;
        width: 12px;
        height: 16px;
        -webkit-transform: rotate(-11deg);
        -ms-transform: rotate(-11deg);
        transform: rotate(-11deg);
        -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    }
    
    #marge .head .hair21
    {
        top: 139px;
        left: 44px;
        width: 15px;
        height: 18px;
        -webkit-transform: rotate(-11deg);
        -ms-transform: rotate(-11deg);
        transform: rotate(-11deg);
        -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    }
    
    #marge .head .hair22
    {
        top: 122px;
        left: 40px;
        width: 15px;
        height: 18px;
        -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        transform: rotate(4deg);
        -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    }
    
    #marge .head .hair23
    {
        top: 106px;
        left: 35px;
        width: 15px;
        height: 19px;
        -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        transform: rotate(4deg);
        -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    }
    
    #marge .head .hair24
    {
        top: 90px;
        left: 30px;
        width: 15px;
        height: 19px;
        -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        transform: rotate(4deg);
        -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    }
    
    #marge .head .hair25
    {
        top: 77px;
        left: 25px;
        width: 15px;
        height: 16px;
        -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        transform: rotate(4deg);
        -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    }
    
    #marge .head .hair26
    {
        top: 62px;
        left: 19px;
        width: 15px;
        height: 17px;
        -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        transform: rotate(4deg);
        -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    }
    
    #marge .head .hair27
    {
        top: 47px;
        left: 12px;
        width: 17px;
        height: 17px;
        -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        transform: rotate(4deg);
        -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    }
    
    #marge .head .hair28
    {
        top: 33px;
        left: 8px;
        width: 17px;
        height: 17px;
        -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        transform: rotate(4deg);
        -webkit-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        -moz-box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
        box-shadow: inset 4px 0px 0px 0px rgba(16,94,142,1);
    }
    
    #marge .head .hair29
    {
        top: 17px;
        left: 10px;
        width: 17px;
        height: 18px;
        -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        transform: rotate(4deg);
        -webkit-box-shadow: inset 10px 0px 0px 0px rgba(16,94,142,1);
        -moz-box-shadow: inset 10px 0px 0px 0px rgba(16,94,142,1);
        box-shadow: inset 10px 0px 0px 0px rgba(16,94,142,1);
    }
    
    #marge .head .hair30
    {
        top: 5px;
        left: 20px;
        width: 23px;
        height: 18px;
        -webkit-transform: rotate(4deg);
        -ms-transform: rotate(4deg);
        transform: rotate(4deg);
        -webkit-box-shadow: inset 10px 0px 0px 0px rgba(16,94,142,1);
        -moz-box-shadow: inset 10px 0px 0px 0px rgba(16,94,142,1);
        box-shadow: inset 10px 0px 0px 0px rgba(16,94,142,1);
    }
    
    #marge .head .head-main
    {
        top: 131px;
        left: 65px;
        width: 48px;
        height: 40px;
        background: #fbd800;
    }
    
    #marge .head .ear
    {
        top: 167px;
        left: 61px;
        width: 11px;
        height: 11px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #fbd800;
        border: 1px solid #110b00;
        -webkit-box-shadow: inset 0px -5px 0px 0px rgba(221,170,42,1);
        -moz-box-shadow: inset 0px -5px 0px 0px rgba(221,170,42,1);
        box-shadow: inset 0px 0px -5px 0px rgba(221,170,42,1);
    }
    
    #marge .head .ear .inner1
    {
        top: 3px;
        left: 3px;
        width: 6px;
        height: 5px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border-top: 1px solid #110b00;
        -webkit-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    
    #marge .head .ear .inner2
    {
        top: 3px;
        left: 5px;
        width: 5px;
        height: 5px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border-top: 1px solid #110b00;
        -webkit-transform: rotate(-93deg);
        -ms-transform: rotate(-93deg);
        transform: rotate(-93deg);
    }
    
    #marge .head .ear .clip
    {
        top: 1px;
        left: 9px;
        width: 3px;
        height: 8px;
        background: #ddaa2a;
        border-radius: 4px;
    }
    
    #marge .head .eyelash
    {
        width: 7px;
        height: 7px;
        background: transparent;
        border-left: 1px solid #110b00;
    }
    
    #marge .head .eyelash1
    {
        top: 145px;
        left: 69px;
        -webkit-transform: rotate(-65deg);
        -ms-transform: rotate(-65deg);
        transform: rotate(-65deg);
    }
    
    #marge .head .eyelash2
    {
        top: 139px;
        left: 74px;
        -webkit-transform: rotate(-40deg);
        -ms-transform: rotate(-40deg);
        transform: rotate(-40deg);
    }
    
    #marge .head .eyelash3
    {
        top: 136px;
        left: 84px;
        -webkit-transform: rotate(-17deg);
        -ms-transform: rotate(-17deg);
        transform: rotate(-17deg);
    }
    
    #marge .head .eyelash4
    {
        top: 139px;
        left: 93px;
        -webkit-transform: rotate(12deg);
        -ms-transform: rotate(12deg);
        transform: rotate(12deg);
    }
    
    #marge .head .eyelash5
    {
        top: 136px;
        left: 103px;
        -webkit-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }
    
    #marge .head .eyelash6
    {
        top: 138px;
        left: 110px;
    }
    
    #marge .head .eyelash7
    {
        top: 141px;
        left: 117px;
        -webkit-transform: rotate(19deg);
        -ms-transform: rotate(19deg);
        transform: rotate(19deg);
    }
    
    #marge .head .eyelash8
    {
        top: 146px;
        left: 121px;
        -webkit-transform: rotate(39deg);
        -ms-transform: rotate(39deg);
        transform: rotate(39deg);
    }
    
    #marge .head .right-eye
    {
        top: 142px;
        left: 96px;
        width: 24px;
        height: 24px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid #110b00;
    }
    
    #marge .head .right-eye .right-eye-pupil
    {
        top: 11px;
        left: 13px;
        width: 4px;
        height: 4px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #110b00;
    }
    
    #marge .head .left-eye
    {
        top: 143px;
        left: 74px;
        width: 25px;
        height: 25px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid #110b00;
    }
    
    #marge .head .left-eye .left-eye-pupil
    {
        top: 11px;
        left: 9px;
        width: 4px;
        height: 4px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #110b00;
    }
    
    #marge .head .nose
    {
        top: 161px;
        left: 93px;
        width: 12px;
        height: 12px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        -webkit-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        transform: rotate(3deg);
    }
    
    #marge .head .nose-tip
    {
        top: 161px;
        left: 103px;
        width: 12px;
        height: 9px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-right: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
        -moz-border-radius: 0 50% 50% 0%;
        -webkit-border-radius: 0 50% 50% 0;
        border-radius: 0 50% 50% 0;
        -webkit-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }
    
    #marge .head .mouth
    {
        top: 170px;
        left: 76px;
        width: 50px;
        height: 15px;
        background: #fbd800;
        border-bottom: 1px solid #110b00;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        -webkit-box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
        -moz-box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
        box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
    }
    
    #marge .head .mouth-smile
    {
        top: 178px;
        left: 75px;
        width: 7px;
        height: 5px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border-top: 1px solid #110b00;
        -webkit-transform: rotate(-52deg);
        -ms-transform: rotate(-52deg);
        transform: rotate(-52deg);
    }
    
    #marge .head .mouth-lip
    {
        top: 168px;
        left: 75px;
        width: 50px;
        height: 16px;
        background: #fbd800;
        border: 1px solid #110b00;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }
    
    #marge .head .mouth-lip2
    {
        top: 176px;
        left: 76px;
        width: 30px;
        height: 14px;
        background: #fbd800;
        border: 1px solid #110b00;
        -moz-border-radius: 32%;
        -webkit-border-radius: 32%;
        border-radius: 32%;
    }
    
    #marge .head .neck
    {
        top: 168px;
        left: 69px;
        width: 28px;
        height: 23px;
        background: #fbd800;
        border-left: 1px solid #110b00;
        -webkit-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        transform: rotate(-4deg);
        -webkit-box-shadow: inset 5px 0px 0px 0px rgba(221,170,42,1);
        -moz-box-shadow: inset 5px 0px 0px 0px rgba(221,170,42,1);
        box-shadow: inset 5px 0px 0px 0px rgba(221,170,42,1);
    }
    
    #marge .head .neck2
    {
        top: 191px;
        left: 70px;
        width: 30px;
        height: 13px;
        background: #fbd800;
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
        -webkit-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
        transform: rotate(-1deg);
        -webkit-box-shadow: inset 5px 0px 0px 0px rgba(221,170,42,1);
        -moz-box-shadow: inset 5px 0px 0px 0px rgba(221,170,42,1);
        box-shadow: inset 5px 0px 0px 0px rgba(221,170,42,1);
    }
    
    #marge .head .neck3
    {
        top: 163px;
        left: 109px;
        width: 12px;
        height: 18px;
        background: #fbd800;
        border-right: 1px solid #110b00;
        -webkit-transform: rotate(-39deg);
        -ms-transform: rotate(-39deg);
        transform: rotate(-39deg);
        -webkit-box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
        -moz-box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
        box-shadow: inset -2px 0px 0px 0px rgba(255,243,164,1);
    }


    Mr.Burns

    HTML
     <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Mr Burns in CSS</title>
        <meta name="description" content="Mr Burns in CSS">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/mr-burns.css" id="mr-burns-style">
        
        <script>
            if(navigator.userAgent.indexOf("WebKit") != -1) {
                var link = document.createElement('link');
                link.href='css/mr-burns-webkit.css';
                link.rel='stylesheet';
    
                document.getElementsByTagName('head')[0].appendChild(link);
            }
        </script>
    </head>
    <body>
    
        <div id="mr-burns">
            <div class="head">
                
            <!-- Hair and hair lines -->
                <div class="hair"></div>
                <div class="hair-line1"></div>
                <div class="hair-line2"></div>
                <div class="hair-line3"></div>
                <div class="hair-line4"></div>
            
            <!-- Ear -->
                <div class="ear">
                    <div class="inner1"></div>
                <div class="inner2"></div>
                <div class="clip"></div>
                </div>
                
                <div class="head-main"></div>
                <div class="head-main2"></div>
                <div class="head-main3"></div>
                <div class="head-main4"></div>
            <div class="sideburn"></div>
            <div class="liverspot1 liverspot"></div>
            <div class="liverspot2 liverspot"></div>
            <div class="liverspot3 liverspot"></div>
                
            <!-- Eyes -->
            <div class="eye-bulge"></div>
                <div class="left-eye">
                <div class="pupil"></div>
                </div>
                <div class="right-eye">
                <div class="pupil"></div>
                </div>
    
            <div class="nose-bottom"></div>
            <div class="nose-top1"></div>
            <div class="nose-top2"></div>
            <div class="nose-tip"></div>
            <div class="nose-inner"></div>
                
                <div class="eyebrow"></div>
                <div class="eyebrow2"></div>
                <div class="eyebrow3"></div>
            
            <div class="neck2"></div>
            <div class="neck1"></div>
            <div class="neck3"></div>
            <div class="neck4"></div>
            <div class="bottom-lip"></div>
                
            <!-- Teeth and mouth -->
                <div class="tooth1"></div>
                <div class="tooth2"></div>
                <div class="tooth3"></div>
                <div class="tooth4"></div>
                <div class="tooth5"></div>
                <div class="tooth6"></div>
                <div class="tooth7"></div>
            <div class="teeth"></div>
            
            <div class="top-lip"></div>
                <div class="top-lip2"></div>
                <div class="cheek"></div>
            <div class="nose-curl"></div>
            </div>
        </div>
        
    </body>
    </html>

    mr-burns.css
    #mr-burns *
    {
        position: absolute;
        box-sizing:content-box;
        -moz-box-sizing:content-box;
    }
    
    
    #mr-burns
    {
        position: relative;
        width: 90px;
        height: 90px; 
        margin: 0 auto;
    }
    
    #mr-burns .head .hair
    {
        top: 3px;
        left: 34px;
        width: 45px;
        height: 42px;
        background: #b0b5b8;
        border: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #mr-burns .head .hair-line1
    {
        top: 5px;
        left: 51px;
        width: 11px;
        height: 5px;
        background: transparent;
        border-top: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(-53deg);
        -ms-transform: rotate(-53deg);
        transform: rotate(-53deg);
    }
    
    #mr-burns .head .hair-line2
    {
        top: 10px;
        left: 58px;
        width: 16px;
        height: 7px;
        background: transparent;
        border-top: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(-26deg);
        -ms-transform: rotate(-26deg);
        transform: rotate(-26deg);
    }
    
    #mr-burns .head .hair-line3
    {
        top: 22px;
        left: 56px;
        width: 24px;
        height: 11px;
        background: transparent;
        border-top: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(32deg);
        -ms-transform: rotate(32deg);
        transform: rotate(32deg);
    }
    
    #mr-burns .head .hair-line4
    {
        top: 27px;
        left: 53px;
        width: 12px;
        height: 6px;
        background: transparent;
        border-top: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(26deg);
        -ms-transform: rotate(26deg);
        transform: rotate(26deg);
    }
    
    #mr-burns .head .sideburn
    {
        top: 33px;
        left: 56px;
        width: 6px;
        height: 15px;
        background: #b0b5b8;
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 0px 2px 3px 2px;
        -moz-border-radius: 0px 2px 3px 2px;
        border-radius: 0px 2px 3px 2px;
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }
    
    #mr-burns .head .eyebrow
    {
        top: 30px;
        left: 9px;
        width: 38px;
        height: 16px;
        background: transparent;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        transform: rotate(-8deg);
        -webkit-box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
        -moz-box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
        box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
    }
    
    #mr-burns .head .eyebrow2
    {
        top: 36px;
        left: 4px;
        width: 14px;
        height: 6px;
        background: transparent;
        border-top: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(-127deg);
        -ms-transform: rotate(-127deg);
        transform: rotate(-127deg);
        -webkit-box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
        -moz-box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
        box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
    }
    
    #mr-burns .head .eyebrow3
    {
        top: 27px;
        left: 0px;
        width: 15px;
        height: 4px;
        background: transparent;
        border-top: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(-88deg);
        -ms-transform: rotate(-88deg);
        transform: rotate(-88deg);
        -webkit-box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
        -moz-box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
        box-shadow: inset 18px 18px 0px 0px rgba(248,220,0,1);
    }
    
    #mr-burns .head .head-main
    {
        top: -5px;
        left: 15px;
        display: block;
        width: 37px;
        height: 54px;
        background: #f8dc00;
        border: 1px solid #110b00;
        -webkit-border-radius: 63px 63px 63px 63px/108px 108px 72px 72px;
        border-radius: 50% 50% 47% 50%/48% 52% 19% 41%;
        -webkit-transform: rotate(79deg);
        -ms-transform: rotate(79deg);
        transform: rotate(79deg);
    }
    
    #mr-burns .head .head-main2
    {
        top: 31px;
        left: 15px;
        display: block;
        width: 42px;
        height: 34px;
        background: #f8dc00;
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }
    
    #mr-burns .head .head-main3
    {
        top: 43px;
        left: 53px;
        display: block;
        width: 13px;
        height: 28px;
        background: #f8dc00;
        -webkit-transform: rotate(9deg);
        -ms-transform: rotate(9deg);
        transform: rotate(9deg);
    }
    
    #mr-burns .head .head-main4
    {
        top: 43px;
        left: 53px;
        display: block;
        width: 13px;
        height: 28px;
        background: #f8dc00;
        -webkit-transform: rotate(9deg);
        -ms-transform: rotate(9deg);
        transform: rotate(9deg);
    }
    
    #mr-burns .head .liverspot
    {
        width: 3px;
        height: 3px;
        border: 1px solid #110b00;
        border-radius: 50%;
    }
    
    #mr-burns .head .liverspot1
    {
        top: 15px;
        left: 45px;
    }
    
    #mr-burns .head .liverspot2
    {
        top: 21px;
        left: 51px;
        width: 2px;
        height: 2px;
    }
    
    #mr-burns .head .liverspot3
    {
        top: 27px;
        left: 42px;
        width: 2px;
        height: 2px;
    }
    
    #mr-burns .head .eye-bulge
    {
        top: 49px;
        left: 12px;
        width: 5px;
        height: 6px;
        background: #f8dc00;
        border: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #mr-burns .head .left-eye
    {
        top: 39px;
        left: 10px;
        width: 12px;
        height: 12px;
        background: #ffffff;
        border: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #mr-burns .head .left-eye .pupil
    {
        top: 5px;
        left: 4px;
        width: 3px;
        height: 3px;
        background: #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #mr-burns .head .right-eye
    {
        top: 37px;
        left: 25px;
        width: 18px;
        height: 15px;
        background: #ffffff;
        border: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #mr-burns .head .right-eye .pupil
    {
        top: 6px;
        left: 11px;
        width: 3px;
        height: 3px;
        background: #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #mr-burns .head .ear
    {
        top: 31px;
        left: 61px;
        width: 11px;
        height: 12px;
        background: #f8dc00;
        border: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #mr-burns .head .ear .inner1
    {
        top: 3px;
        left: 2px;
        width: 6px;
        height: 2px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border-top: 1px solid #110b00;
        -webkit-transform: rotate(-21deg);
        -ms-transform: rotate(-21deg);
        transform: rotate(-21deg);
    }
    
    #mr-burns .head .ear .inner2
    {
        top: 3px;
        left: 4px;
        width: 2px;
        height: 5px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border-right: 1px solid #110b00;
        -webkit-transform: rotate(-11deg);
        -ms-transform: rotate(-11deg);
        transform: rotate(-11deg);
    }
    
    #mr-burns .head .nose-curl
    {
        top: 61px;
        left: 16px;
        width: 6px;
        height: 5px;
        background: #f8dc00;
        border-top: 1px solid #110b00;
        border-right: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 0 5px 5px 0px;
        -moz-border-radius: 0 5px 5px 0px;
        border-radius: 0 5px 5px 0px;
        -webkit-transform: rotate(-33deg);
        -ms-transform: rotate(-33deg);
        transform: rotate(-33deg);
    }
    
    #mr-burns .head .nose-bottom
    {
        top: 72px;
        left: 5px;
        width: 15px;
        height: 1px;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(140deg);
        -ms-transform: rotate(140deg);
        transform: rotate(140deg);
    }
    
    #mr-burns .head .nose-top1
    {
        top: 52px;
        left: 5px;
        width: 18px;
        height: 3px;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(-55deg);
        -ms-transform: rotate(-55deg);
        transform: rotate(-55deg);
        -webkit-box-shadow: 3px 3px 0px 0px rgba(248,220,0,1);
        -moz-box-shadow: 3px 3px 0px 0px rgba(248,220,0,1);
        box-shadow: 3px 3px 0px 0px rgba(248,220,0,1);
    }
    
    #mr-burns .head .nose-top2
    {
        top: 64px;
        left: 2px;
        width: 13px;
        height: 3px;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        transform: rotate(120deg);
        -webkit-box-shadow: inset 5px 2px 0px 0px rgba(248,220,0,1);
        -moz-box-shadow: inset 5px 2px 0px 0px rgba(248,220,0,1);
        box-shadow: inset 5px 2px 0px 0px rgba(248,220,0,1);
    }
    
    #mr-burns .head .nose-tip
    {
        top: 69px;
        left: 4px;
        width: 6px;
        height: 6px;
        background: #f8dc00;
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 14px 0 0 2px;
        -moz-border-radius: 14px 0 0 2px;
        border-radius: 14px 0 0 2px;
        -webkit-transform: rotate(-42deg);
        -ms-transform: rotate(-42deg);
        transform: rotate(-42deg);
    }
    
    #mr-burns .head .nose-inner
    {
        top: 59px;
        left: 3px;
        width: 30px;
        height: 8px;
        background: #f8dc00;
        -webkit-border-radius: 23px 0 0 2px;
        -moz-border-radius: 23px 0 0 2px;
        border-radius: 23px 0 0 2px;
        -webkit-transform: rotate(-40deg);
        -ms-transform: rotate(-40deg);
        transform: rotate(-40deg);
    }
    
    #mr-burns .head .top-lip
    {
        top: 60px;
        left: 20px;
        width: 38px;
        height: 11px;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
        -webkit-box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
        -moz-box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
        box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
    }
    
    #mr-burns .head .top-lip2
    {
        top: 67px;
        left: 18px;
        width: 9px;
        height: 8px;
        border-left: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 0px 2px 0px 2px;
        -moz-border-radius: 0px 2px 0px 2px;
        border-radius: 0px 2px 0px 2px;
        -webkit-transform: rotate(1deg);
        -ms-transform: rotate(1deg);
        transform: rotate(1deg);
        -webkit-box-shadow: inset 9px -8px 0px 0px rgba(248,220,0,1);
        -moz-box-shadow: inset 9px -8px 0px 0px rgba(248,220,0,1);
        box-shadow: inset 9px -8px 0px 0px rgba(248,220,0,1);
    }
    
    #mr-burns .head .cheek
    {
        top: 60px;
        left: 56px;
        width: 2px;
        height: 5px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border-right: 1px solid #110b00;
        -webkit-transform: rotate(-68deg);
        -ms-transform: rotate(-68deg);
        transform: rotate(-68deg);
    }
    
    #mr-burns .head .bottom-lip
    {
        top: 72px;
        left: 43px;
        width: 5px;
        height: 3px;
        border-left: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
        border-radius: 0px 2px 0px 2px;
        -webkit-transform: rotate(-9deg);
        -ms-transform: rotate(-9deg);
        transform: rotate(-9deg);
        -webkit-box-shadow: inset 5px -3px 0px 0px rgba(248,220,0,1);
        -moz-box-shadow: inset 5px -3px 0px 0px rgba(248,220,0,1);
        box-shadow: inset 5px -3px 0px 0px rgba(248,220,0,1);
    }
    
    #mr-burns .head .tooth1
    {
        top: 73px;
        left: 28px;
        width: 4px;
        height: 3px;
        background: #ffffff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid #110b00;
    }
    
    #mr-burns .head .tooth2
    {
        top: 72px;
        left: 33px;
        width: 4px;
        height: 3px;
        background: #ffffff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid #110b00;
    }
    
    #mr-burns .head .tooth3
    {
        top: 70px;
        left: 38px;
        width: 4px;
        height: 3px;
        background: #ffffff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid #110b00;
    }
    
    #mr-burns .head .tooth4
    {
        top: 68px;
        left: 43px;
        width: 4px;
        height: 3px;
        background: #ffffff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid #110b00;
    }
    
    #mr-burns .head .tooth5
    {
        top: 66px;
        left: 47px;
        width: 4px;
        height: 3px;
        background: #ffffff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid #110b00;
    }
    
    #mr-burns .head .tooth6
    {
        top: 64px;
        left: 50px;
        width: 4px;
        height: 3px;
        background: #ffffff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid #110b00;
    }
    
    #mr-burns .head .tooth7
    {
        top: 64px;
        left: 55px;
        width: 5px;
        height: 2px;
        background: transparent;
        border-bottom: 1px solid #110b00;
        -webkit-transform: rotate(140deg);
        -ms-transform: rotate(140deg);
        transform: rotate(140deg);
    }
    
    #mr-burns .head .teeth
    {
        top: 60px;
        left: 23px;
        width: 33px;
        height: 11px;
        border-left: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(-24deg);
        -ms-transform: rotate(-24deg);
        transform: rotate(-24deg);
    }
    
    #mr-burns .head .neck1
    {
        top: 71px;
        left: 46px;
        width: 27px;
        height: 12px;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(32deg);
        -ms-transform: rotate(32deg);
        transform: rotate(32deg);
        -webkit-box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
        -moz-box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
        box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
    }
    
    #mr-burns .head .neck2
    {
        top: 73px;
        left: 61px;
        width: 16px;
        height: 9px;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(-73deg);
        -ms-transform: rotate(-73deg);
        transform: rotate(-73deg);
        -webkit-box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
        -moz-box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
        box-shadow: inset 2px -12px 0px 0px rgba(248,220,0,1);
    }
    
    #mr-burns .head .neck3
    {
        top: 57px;
        left: 61px;
        width: 21px;
        height: 9px;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(59deg);
        -ms-transform: rotate(59deg);
        transform: rotate(59deg);
        -webkit-box-shadow: 1px 8px 0px 0px rgba(248,220,0,1);
        -moz-box-shadow: 1px 8px 0px 0px rgba(248,220,0,1);
        box-shadow: 1px 8px 0px 0px rgba(248,220,0,1);
    }
    
    #mr-burns .head .neck4
    {
        top: 50px;
        left: 60px;
        width: 13px;
        height: 2px;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(105deg);
        -ms-transform: rotate(105deg);
        transform: rotate(105deg);
        -webkit-box-shadow: 3px 2px 0px 0px rgba(248,220,0,1);
        -moz-box-shadow: 3px 2px 0px 0px rgba(248,220,0,1);
        box-shadow: 3px 2px 0px 0px rgba(248,220,0,1);
    } 

    mr-burns-webkit.css
    #mr-burns .head .hair-line1
    {
    
        border-right: 1px solid #110b00;
        border-left: 1px solid #110b00;
    }
    
    #mr-burns .head .hair-line2
    {
    
        border-right: 1px solid #110b00;
        border-left: 1px solid #110b00;
    }
    
    #mr-burns .head .hair-line3
    {
    
        border-right: 1px solid #110b00;
        border-left: 1px solid #110b00;
    }
    
    #mr-burns .head .hair-line4
    {
    
        border-right: 1px solid #110b00;
        border-left: 1px solid #110b00;
    }
    
    #mr-burns .head .eyebrow
    {
    
        border-right: 1px solid #110b00;
        border-left: 1px solid #110b00;
    }
    
    #mr-burns .head .eyebrow2
    {
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
    }
    
    #mr-burns .head .eyebrow3
    {
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
    }
    
    #mr-burns .head .ear .inner1
    {
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
    }
    
    #mr-burns .head .ear .inner2
    {
        border-top: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
    }
    
    #mr-burns .head .nose-bottom
    {
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
    }
    
    #mr-burns .head .nose-top1
    {
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
    }
    
    #mr-burns .head .nose-top2
    {
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
    }
    
    #mr-burns .head .top-lip
    {
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
    }
    
    #mr-burns .head .cheek
    {
        border-top: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
    }
    
    #mr-burns .head .neck1
    {
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
    }
    
    #mr-burns .head .neck2
    {
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
    }
    
    #mr-burns .head .neck3
    {
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
    }
    
    #mr-burns .head .neck4
    {
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
    } 


    Ned Flanders

    HTML
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Ned Flanders in CSS</title>
        <meta name="description" content="Ned Flanders in CSS">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/ned-flanders.css">    
    </head>
    <body>
        
        <div id="ned-flanders">
            <div class="head">
                <div class="hair-top hair"></div>
                <div class="hair-side hair"></div>
                <div class="neck-bottom"></div>
                <div class="neck-left"></div>
                <div class="lip"></div>
                <div class="head-main"></div>
                <div class="hair-line1 hair-line"></div>
                <div class="hair-line2 hair-line"></div>
                <div class="hair-line3 hair-line"></div>
                <div class="hair-line4 hair-line"></div>
                <div class="hair-line5 hair-line"></div>
                <div class="head-top"></div>
                <div class="eye-bulge"></div>
                <div class="head-top-inner"></div>
                <div class="neck-right"></div>
                <div class="ear">
                    <div class="inner"></div>
                </div>
                <div class="sideburn hair"></div>
                <div class="head-side"></div>
                
                <div class="left-eye eye">
                    <div class="pupil"></div>
                </div>
                
                <div class="right-eye eye">
                    <div class="pupil"></div>
                </div>
                
                <div class="glasses"></div>
                
                <div class="mouth-top"></div>
                <div class="mouth-left"></div>
                <div class="mouth-right"></div>
                <div class="mouth-bottom"></div>
                <div class="mouth-inner"></div>
                <div class="tongue"></div>
                
                <div class="moustache">
                    <div class="moustache-hair1 hair left"></div>
                    <div class="moustache-hair2 hair left"></div>
                    <div class="moustache-hair3 hair left"></div>
                    <div class="moustache-hair4 hair right"></div>
                    <div class="moustache-hair5 hair right"></div>
                    <div class="moustache-hair6 hair right"></div>
                </div>
                
                <div class="nose"></div>
            </div>
        </div>
        
    </body>
    </html> 

    ned-flanders.css
     #ned-flanders *
    {
        position: absolute;
        box-sizing:content-box;
        -moz-box-sizing:content-box;
    }
    
    
    #ned-flanders
    {
        position: relative;
        width: 120px;
        height: 131px; 
        margin: 0 auto;
    }
    
    #ned-flanders .head .head-main
    {
        top: 58px;
        left: 43px;
        width: 41px;
        height: 68px;
        background: #fbd800;
    }
    
    #ned-flanders .head .hair
    {
        background: #986a38;
    }
    
    #ned-flanders .head .hair-top
    {
        top: 11px;
        left: 23px;
        width: 71px;
        height: 34px;
        border: 1px solid #110b00;
        -webkit-border-radius: 35% 50% 47% 50%/52% 51% 19% 43%;
        -moz-border-radius: 35% 50% 47% 50%/52% 51% 19% 43%;
        border-radius: 35% 50% 47% 50%/52% 51% 19% 43%;
    }
    
    #ned-flanders .head .hair-side
    {
        top: 18px;
        left: 68px;
        width: 35px;
        height: 91px;
        border-top: 1px solid #110b00;
        border-right: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 35% 50% 33% 50%/52% 51% 19% 43%;
        -moz-border-radius: 35% 50% 33% 50%/52% 51% 19% 43%;
        border-radius: 35% 50% 33% 50%/52% 51% 19% 43%;
    }
    
    #ned-flanders .head .hair-line
    {
        border-left: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #ned-flanders .head .hair-line1
    {
        top: 20px;
        left: 26px;
        width: 9px;
        height: 16px;
        -webkit-transform: rotate(-53deg);
        -ms-transform: rotate(-53deg);
        transform: rotate(-53deg);
    }
    
    #ned-flanders .head .hair-line2
    {
        top: 14px;
        left: 34px;
        width: 9px;
        height: 17px;
        -webkit-transform: rotate(-26deg);
        -ms-transform: rotate(-26deg);
        transform: rotate(-26deg);
    }
    
    #ned-flanders .head .hair-line3
    {
        top: 12px;
        left: 45px;
        width: 9px;
        height: 15px;
        -webkit-transform: rotate(9deg);
        -ms-transform: rotate(9deg);
        transform: rotate(9deg);
    }
    
    #ned-flanders .head .hair-line4
    {
        top: 12px;
        left: 59px;
        width: 9px;
        height: 17px;
        -webkit-transform: rotate(31deg);
        -ms-transform: rotate(31deg);
        transform: rotate(31deg);
    }
    
    #ned-flanders .head .hair-line5
    {
        top: 23px;
        left: 78px;
        width: 16px;
        height: 17px;
        border-top: 1px solid #110b00;
        -webkit-border-radius: 10px 0 0 0;
        -moz-border-radius: 10px 0 0 0;
        border-radius: 10px 0 0 0;
    }
    
    #ned-flanders .head .head-top
    {    
        top: 26px;
        left: 29px;
        width: 52px;
        height: 34px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        border-right: 1px solid #110b00;
        -webkit-border-radius: 34% 50% 47% 50%/50% 51% 19% 43%;
        -moz-border-radius: 34% 50% 47% 50%/50% 51% 19% 43%;
        border-radius: 34% 50% 47% 50%/50% 51% 19% 43%;
    }
    
    #ned-flanders .head .head-top-inner
    {    
        top: 27px;
        left: 30px;
        width: 50px;
        height: 32px;
        background: #fbd800;
        -webkit-border-radius: 34% 50% 47% 50%/50% 51% 19% 43%;
        -moz-border-radius: 34% 50% 47% 50%/50% 51% 19% 43%;
        border-radius: 34% 50% 47% 50%/50% 51% 19% 43%;
    }
    
    #ned-flanders .head .head-side
    {    
        top: 35px;
        left: 68px;
        width: 15px;
        height: 52px;
        background: #fbd800;
        border-right: 1px solid #110b00;
        -webkit-border-radius: 0% 41% 0% 0;
        -moz-border-radius: 0% 41% 0% 0;
        border-radius: 0% 41% 0% 0;
    }
    
    #ned-flanders .head .sideburn
    {
        top: 67px;
        left: 82px;
        width: 10px;
        height: 20px;
        border-right: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 0 0 5px 3px;
        -moz-border-radius: 0 0 5px 3px;
        border-radius: 0 0 5px 3px;
    }
    
    #ned-flanders .head .ear
    {
        top: 70px;
        left: 86px;
        width: 16px;
        height: 20px;
        background: #fbd800;
        border: 1px solid #110b00;
        -webkit-border-radius:63px 63px 63px 63px/108px 108px 72px 72px;
        -moz-border-radius:63px 63px 63px 63px/108px 108px 72px 72px;
        border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
    }
    
    #ned-flanders .head .ear .inner
    {
        top: 6px;
        left: 5px;
        width: 7px;
        height: 7px;
        border-top: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #ned-flanders .head .eye-bulge
    {
        top: 44px;
        left: 25px;
        width: 10px;
        height: 10px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #ned-flanders .head .eye
    {
        width: 25px;
        height: 25px;
        background: #ffffff;
        border: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #ned-flanders .head .eye .pupil
    {
        width: 3px;
        height: 3px;
        background: #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #ned-flanders .head .left-eye
    {
        top: 52px;
        left: 19px;
    }
    
    #ned-flanders .head .left-eye .pupil
    {
        top: 12px;
        left: 10px;
    }
    
    #ned-flanders .head .right-eye
    {
        top: 52px;
        left: 46px;
        width: 26px;
    }
    
    #ned-flanders .head .right-eye .pupil
    {
        top: 14px;
        left: 16px;
    }
    
    #ned-flanders .head .glasses
    {
        top: 68px;
        left: 73px;
        width: 24px;
        height: 1px;
        background: #110b00;
        -webkit-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    
    #ned-flanders .head .nose
    {
        top: 70px;
        left: 28px;
        width: 16px;
        height: 12px;
        background: #fbd800;
        border-top: 1px solid #110b00;
        border-left: 1px solid #110b00;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 10px 0 3px 10px;
        -moz-border-radius: 10px 0 3px 10px;
        border-radius: 10px 0 3px 10px;
    }
    
    #ned-flanders .head .moustache
    {
        top: 81px;
        left: 13px;
        width: 50px;
        height: 18px;
        background: #986a38;
        border: 1px solid #110b00;
        -webkit-border-radius: 50% 50% 25% 25%/79% 90% 9% 10%;
        -moz-border-radius: 50% 50% 25% 25%/79% 90% 9% 10%;
        border-radius: 50% 50% 25% 25%/79% 90% 9% 10%;
    }
    
    #ned-flanders .head .moustache .hair
    {
        background: none;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #ned-flanders .head .moustache .hair.left
    {
        border-left: 1px solid #110b00;
    }
    
    #ned-flanders .head .moustache .hair.right
    {
        border-right: 1px solid #110b00;
    }
    
    #ned-flanders .head .moustache .moustache-hair1
    {
        top: 3px;
        left: 11px;
        width: 2px;
        height: 12px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    #ned-flanders .head .moustache .moustache-hair2
    {
        top: 4px;
        left: 16px;
        width: 2px;
        height: 12px;
        -webkit-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        transform: rotate(35deg);
    }
    
    #ned-flanders .head .moustache .moustache-hair3
    {
        top: 5px;
        left: 22px;
        width: 2px;
        height: 11px;
        -webkit-transform: rotate(19deg);
        -ms-transform: rotate(19deg);
        transform: rotate(19deg);
    }
    
    #ned-flanders .head .moustache .moustache-hair4
    {
        top: 5px;
        left: 27px;
        width: 2px;
        height: 11px;
        -webkit-transform: rotate(-19deg);
        -ms-transform: rotate(-19deg);
        transform: rotate(-19deg);
    }
    
    #ned-flanders .head .moustache .moustache-hair5
    {
        top: 4px;
        left: 32px;
        width: 2px;
        height: 12px;
        -webkit-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }
    
    #ned-flanders .head .moustache .moustache-hair6
    {
        top: 3px;
        left: 37px;
        width: 2px;
        height: 12px;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    
    #ned-flanders .head .neck-right
    {
        top: 83px;
        left: 87px;
        width: 8px;
        height: 40px;
        border-left: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg);
        -webkit-box-shadow: -5px 0px 0px 0px rgba(251,216,0,1);
        -moz-box-shadow: -5px 0px 0px 0px rgba(251,216,0,1);
        box-shadow: -5px 0px 0px 0px rgba(251,216,0,1);
    }
    
    #ned-flanders .head .neck-bottom
    {
        top: 110px;
        left: 41px;
        width: 47px;
        height: 20px;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 50% 50% 41% 40%/40% 40% 67% 33%;
        -moz-border-radius: 50% 50% 41% 40%/40% 40% 67% 33%;
        border-radius: 50% 50% 41% 40%/40% 40% 67% 33%;
        -webkit-box-shadow: inset  0px -6px 0px 0px rgba(251,216,0,1);
        -moz-box-shadow: inset  0px -6px 0px 0px rgba(251,216,0,1);
        box-shadow: inset 0px -6px 0px 0px rgba(251,216,0,1);
    }
    
    #ned-flanders .head .mouth-top
    {
        top: 89px;
        left: 48px;
        width: 27px;
        height: 5px;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 50% 50% 32% 50%;
        -moz-border-radius: 50% 50% 32% 50%;
        border-radius: 50% 50% 32% 50%;
        -webkit-transform: rotate(-3deg);
        -webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,1);
        -moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,1);
        box-shadow: 0px 3px 0px 0px rgba(0,0,0,1);
    }
    
    #ned-flanders .head .mouth-left
    {
        top: 101px;
        left: 40px;
        width: 10px;
        height: 10px;
        border-right: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-box-shadow: 4px 0px 0px 0px rgba(0,0,0,1);
        -moz-box-shadow: 4px 0px 0px 0px rgba(0,0,0,1);
        box-shadow: 4px 0px 0px 0px rgba(0,0,0,1);
    }
    
    #ned-flanders .head .mouth-right
    {
        top: 92px;
        left: 61px;
        width: 15px;
        height: 17px;
        border-right: 1px solid #110b00;
        -webkit-border-radius: 50% 33% 50% 50%;
        -moz-border-radius: 50% 33% 50% 50%;
        border-radius: 50% 33% 50% 50%;
        -webkit-transform: rotate(10deg);
        -webkit-box-shadow: inset -3px -3px 0px 0px rgba(0,0,0,1);
        -moz-box-shadow: inset -3px -3px 0px 0px rgba(0,0,0,1);
        box-shadow: inset -3px -3px 0px 0px rgba(0,0,0,1);
    }
    
    #ned-flanders .head .mouth-bottom
    {
        top: 94px;
        left: 44px;
        width: 31px;
        height: 17px;
        border-bottom: 1px solid #110b00;
        -webkit-border-radius: 50% 50% 50% 14%;
        -moz-border-radius: 50% 50% 50% 14%;
        border-radius: 50% 50% 50% 14%;
        -webkit-box-shadow: inset -4px -1px 0px 0px rgba(0,0,0,1);
        -moz-box-shadow: inset -4px -1px 0px 0px rgba(0,0,0,1);
        box-shadow: inset -4px -1px 0px 0px rgba(0,0,0,1);
    }
    
    #ned-flanders .head .mouth-inner
    {
        top: 96px;
        left: 51px;
        width: 23px;
        height: 14px;
        background: #000000;
        -webkit-border-radius: 0 0 20px 0;
        -moz-border-radius: 0 0 20px 0;
        border-radius: 0 0 20px 0;
    }
    
    #ned-flanders .head .lip
    {
        top: 106px;
        left: 36px;
        width: 14px;
        height: 11px;
        background: #fbd800;
        border: 1px solid #110b00;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    
    #ned-flanders .head .tongue
    {
        top: 104px;
        left: 54px;
        width: 20px;
        height: 7px;
        background: #da6339;
        -webkit-border-radius: 100% 0 100% 0;
        -moz-border-radius: 100% 0 100% 0;
        border-radius: 100% 0 100% 0;
    }
    
    #ned-flanders .head .neck-left
    {
        top: 100px;
        left: 41px;
        width: 5px;
        height: 27px;
        border-left: 1px solid #110b00;
        -webkit-border-radius: 0 0 0 2px;
        -moz-border-radius: 0 0 0 2px;
        border-radius: 0 0 0 2px;
        -webkit-box-shadow: inset 1px 1px 0px 0px rgba(251,216,0,1);
        -moz-box-shadow: inset 1px 1px 0px 0px rgba(251,216,0,1);
        box-shadow: inset 1px 1px 0px 0px rgba(251,216,0,1);
    }
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 56
    • +9
      Исскуство в чистом виде :)
      • +23
        Вот не пойму я, где здесь искусство. Это же обычный хардкод, вроде приснопамятного айфона на CSS. Гомера рисовали на CSS еще 5 лет назад, когда браузеры только начинали внедрять поддержку css3-свойств, и тогда это вызывало восхищение. Сейчас же…
    • +5
      Представляю какие появятся вскоре вакансии:
      Мультипликатор, аниматор
      Знание HTML 5, CSS 3
      • +13
        Если вскоре это будет норма, то будет что-то типа:
        Аниматор. Опыт работы с HTML 7, CSS 4. Обязательное требование: поддержка IE6
        • +2
          Думаю, что появится специализированный софт в таком случае. Сейчас же нет вакансий типа «Редактор видео-контента, знание устройства форматов h264, etc...»
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            www.xanthir.com/b4Ko0
            Last updated: Tuesday, February 19 2013


            www.w3.org/TR/selectors4/
            W3C Working Draft 2 May 2013
            • 0
              CSS в дальнейшем будет представлять (уже представляет) из себя набор независимых модулей: работа над новой версией модуля начинается сразу же после принятия версией предыдущей статуса рекомендованного. Это самое с модулем Selectors вы и наблюдаете.
              • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Красота (:
          • +47
            Подобные вещи мне напоминают школу и BASIC.

            10 LINE (0,100)-(100,100)
            20 CIR (0, 50, 50)
            ...

            Через несколько часов и 800 строк нажимаешь заветную кнопку К5 и… на экране появляется домик.
            • +4
              Да, я обычно с такими рисунками упирался в потолок максимального количества команд и недоумевал, как с таким ограничением умудряются писать игрушки, где помимо рисунков все еще прыгает бегает и стреляет
              • +2
                Ха-ха, вы мне напомнили своим комментарием мою школьную молодость, когда я рисовал в «гиви-басике» ракету с нечто похожим на строительные леса на миллиметровке, а потом переводил во всякие PSET'ы и DRAW'ы.
            • НЛО прилетело и опубликовало эту надпись здесь
              • +1
                А тут можно посмотреть

                Кстати им в файрфоксе немного плохо
                image
                • +1
                  Firefox 23.0 — все норм
                  • +4
                    Firefox 25 — всё хорошо.
                    • 0
                      FF 24 — всё ок. Чуток только пробелы на коже Бёрнса, а так ок. Обновитесь и/или отключите мешающие аддоны.
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • +50
                        Открыл в своём любимом браузере. А в этом что-то есть, кроме шуток.

                        • +6
                          Барт и Фландерс неплохо деградируют)
                          • +31
                            Напомнило:

                            image
                            • D'oh!
                              Вот это их расколбасило…
                              • +2
                                Или так:
                                • +4
                                  IE творчески переосмыслил персонажей, прям Пикассо!)
                                  • +1
                                    Кубизм, однако. Вы просто ничего не понимаете в его творческой натуре
                                  • –4
                                    <зануда>Вот только зачем? Для нормального отображения нужен ie9+, а значит вместо подобного шаманства можно использовать SVG.</зануда>
                                    • +2
                                      Да сразу бы про JPG писали, чего уж тут.
                                    • 0
                                      Круто конечно. С SVG же ведь всякий нарисовать сможет.
                                      Есть что-то в стремлении людей использовать инструменты не по назначению.
                                      • +14
                                        Я, кажется, пропустил какую-то важную строчку в топике.

                                        Ну захардкодил чувак кучу значений, написал несколько километровых css-файлов. И что? Я бы понял смысл появления статьи по этому поводу, если бы:

                                        • в ней бы предлагался нетривиальный и удобный способ перевода любой картинки в CSS-вид
                                        • автор справился с какими-нибудь эпическими багами в браузерной совместимости
                                        • это было бы ручное произведение искусства, нетривиально использующее возможности CSS
                                        • это было бы абсолютно надежное кроссбраузерное решение

                                        Ничего из вышеперечисленного мне не попалось. Выбор крайне трудоемкого и нетривиального способа решения задачи хотелось бы как-то объяснить, кроме того что «css3 сейчас в тренде».
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                          • +3
                                            Ну если так думать, то картинку можно отобразить вообще без CSS — средствами HTML4, которые поддерживает даже IE3, с помощью построчной развертки в таблицу:

                                            <table cellpadding="0" cellspacing="0" border="0">
                                                <tr>
                                                    <td bgcolor="#000000" width="1" height="1"></td>
                                                    <td bgcolor="#FFFFFF" width="1" height="1"></td>
                                                    ...
                                                </tr>
                                                ...
                                            </table>
                                            

                                            Только вот отключение картинок не просто так придумали, особенно в мобильных устройствах. А мегабайты HTML или CSS-кода скорость загрузки страницы явно не улучшат.
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                • 0
                                                  Это уже было в симпсонах на хабре
                                                  habrahabr.ru/post/136395/
                                                • +1
                                                  Как раз-таки нет. Самый нетривиальный это background-image и множество однопиксельных linear-gradient();. И по логике даже подходит, и не нужен однопиксельный элемент.
                                                  • +2
                                                    Хм, отличная идея… А учитывая, что linear-gradient ещё и несколько цветов может иметь, вообще супер! Можно так ведь по строкам сделать, это проще даже будет. Только там, кажется, было ограничение на число цветов и не каждый браузер сработает корректно.
                                                    • +1
                                                      Как вариант детектить размер изображения и выбирать один из трёх способов: горизонтальные градиенты, вертикальные, либо точечные. Правда про ограничение по количеству стопов я не слышал ещё. Уже давно в мозгу витает идея написать такой конвертер на js, не хватает знаний для реализации.
                                                • 0
                                                  Может про Бэтмэна и Бэндэра тоже написать, как автор статьи. С минимумом текста, с цитированием всего кода, с картинками…
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                    • 0
                                                      Напишите, автор статьи не против
                                                      • 0
                                                        Напишите: видите, топик в плюсе, людям такое нравится. Не прогадаете ;)
                                                    • +2
                                                      Ждём новостей вида «австрийский художник создаёт удивительные картины на чистом CSS3».
                                                      • +3
                                                        image
                                                        • +4
                                                          Напомнило про японца, который картины в Excel рисовал.
                                                          • +1
                                                            Но это же не чистый css. Здесь еще html.
                                                            Скрытый текст
                                                            image
                                                            • 0
                                                              В IE11 у Mr Burns нос слегка разбежался. Но в целом я рад что все остальные в IE11 выглядят прекрасно.
                                                              • +1
                                                                всегда любил такие разработки за файл normalize.css в котором можно посмотреть, что ещё надо «обнулять», чтобы получить нормальную кроссбраузерную верстку. спасибо
                                                                • 0
                                                                  Хочу целую серию на CSS+JS :)
                                                                  • 0
                                                                    Когда будут танцующие Симпсоны?

                                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.