Developer

Get inspiration from The Simpsons in pure CSS

Web developer Chris Pattle created some characters from The Simpsons in pure CSS. See his inspiring CSS creations and the code that makes them work.

thesimpsoncssfiga071814.gif
Figure A: The Simpsons in pure CSS.
Image: Chris Pattle

If you are fascinated with CSS like me, then you will be charmed by the example characterizations of The Simpsons created by Chris Pattle. Other characters not shown in the Figure A above include Itchy, Smithers, Comic Book Guy, Ralph Wiggum, and Apu. Chris also has a demonstration of a "Green Bart" and a "Colorless Bart."

Chris shared his creativity in the Nov. 9, 2013 blog post "Simpsons in CSS" from the project page. The CSS and HTML code is available on GitHub for download as a zip file. The disclaimer with the files states: "All images are copyright to their respective owners." (The CSS-created characters were first put up in the Winter of 2013, but were soon taken down around late November 2013 due to legal issues; as of July 1, 2014 they were back up.)

Now, let's review the CSS code behind the animated characters. (The Simpsons in CSS project websites and HTML pages are best viewed in Chrome.)

The download

The download zip file "simpsons-in-css-master.zip" from GitHub is only 38 KB and contains individual HTML files named for the characters, along with their associated css file; each HTML file also calls the normalize.css. There is a total of 31 files and one folder.

For reference purposes, normalize.css is a project by Nicolas Gallagher available on GitHub, and is a collection of HTML element and attributes style-normalizations with the customizable CSS file that helps to make browsers render all web language elements consistently with modern standards.

The code review

The HTML

Bart is one of the most popular of The Simpsons characters, so I decided to peek under the hood to see what makes this characterization/animation work with pure CSS.

Creating the character starts with building a collection of <div> tags to separate the sections or divisions of the character's head; they typically include a main <div> for the character, then a head div, as shown in the first lines of code in this snippet from the bart.html file.

    <div id="bart">
    	<!-- The head -->
        	<div class="head">

Within the head div are all the other divs for representing the sections of head and hair, the mouth, and the lips, as shown in the next section of HTML code snippet.

<div class="no-border body hair hair1"></div>
            		<div class="no-border body hair hair2"></div>
            		<div class="no-border body hair hair3"></div>
            		<div class="no-border body hair hair4"></div>
            		<div class="no-border body hair hair5"></div>
            		<div class="no-border body hair hair6"></div>
            		<div class="no-border body hair hair7"></div>
            		<div class="no-border body hair hair8"></div>
            		<div class="no-border body hair hair9"></div>
            		<div class="body mouth-lip2"></div>
            		<div class="no-border body head-left1"></div>
            		<div class="no-border body head-left2"></div>
            		<div class="no-border body head-left3"></div>
            		<div class="no-border body head-left4"></div>
            		<div class="no-border body head-left5"></div>
            		<div class="no-border body head-left6"></div>
            		<div class="no-border body head-left7"></div>
            		<div class="body eyelid"></div>
            		<div class="no-border body mouth"></div>
            		<div class="body mouth-lip"></div>
            		<div class="no-border body head-right2"></div>
            		<div class="no-border body head-right1"></div>
            		<div class="no-border body head-right3"></div>

The next section of HTML code includes the ear, the right eye, the nose, the left eye, and the smile as displayed in this final snippet from the HTML file.

<!-- The ear -->
            		<div class="body ear">
                		<div class="no-border inner1"></div>
                		<div class="no-border inner2"></div>
                		<div class="no-border body clip"></div>
            		</div>
            
           		<!-- The right eye -->
            		<div class="right-eye">
                		<div class="no-border right-eye-pupil"></div>
			<div class="no-border body eyelid-top"></div>
			<div class="no-border body eyelid-bottom"></div>
            		</div>
            
            		<!-- The nose -->
            		<div class="no-border body nose"></div>
            		<div class="body nose-tip"></div>
            
            		<!-- The left eye -->
            		<div class="left-eye">
                		<div class="no-border left-eye-pupil"></div>
			<div class="no-border body eyelid-top"></div>
			<div class="no-border body eyelid-bottom"></div>
            		</div>
	
<!-- The smile -->
            		<div class="no-border mouth-smile"></div>
</div>
</div>

The rough sketch of the character as displayed in Dreamweaver design view is displayed in Figure B.

Figure B

thesimpsoncssfigb071814.gif

And the actual rendered animation as shown in Chrome version 35.0.1916.153 m in the original state on the left side, and then with the eyes "blinking" on the right side is shown in Figure C.

Figure C

thesimpsoncssfigc071814.gif

The CSS

With 596 lines of CSS code in the bart.css file, I will not cover all of it here — I will just review several interesting aspects of the animation.

As you can tell from the classes being called in the HTML displayed above, there are many styles that are used to represent each part of the character's head. For instance, there are nine sections of Bart's hair, and each one has its own style properties — the first couple of properties are shown in the code snippet below.

#bart .head .hair1 {
    top: 22px;
    left: 0px;
    width: 6px;
    height: 7px;
    -webkit-transform: rotate(-22deg) skew(-7deg, 51deg);
    -ms-transform: rotate(-22deg) skew(-7deg, 51deg);
    transform: rotate(-22deg) skew(-7deg, 51deg);
}

#bart .head .hair2 {
    top: 20px;
    left: 5px;
    width: 9px;
    height: 7px;
    -webkit-transform: rotate(25deg) skew(23deg, 16deg);
    -ms-transform: rotate(25deg) skew(23deg, 16deg);
    transform: rotate(25deg) skew(23deg, 16deg);
}

Notice that each hair section is defined with a top, left, width, height, and then individual transform rotate and skew settings depending on the hair section.

The eyelids are the only animated section of the character, and these are accomplished using keyframes in addition to animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-play-state. The code snippet below shows the left eyelid CSS styles. I left out the webkit vendor prefixes, since they are duplicates of the "animation" feature properties.

#bart .head .left-eye .eyelid-top {
    top: -21px;
    left: 0px;
    width: 30px;
    height: 20px;
    border-bottom: 1px solid #110b00;
    border-radius: 50% 50% 0 0;
    animation-name: bartlefteyelidtop;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2.5s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

#bart .head .left-eye .eyelid-bottom {
    bottom: -11px;
    left: 0px;
    width: 30px;
    height: 10px;
    border-top: 1px solid #110b00;
    border-radius: 0 0 50% 50%;
    animation-name: bartlefteyelidbottom;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-delay: 2.5s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@keyframes bartlefteyelidtop {
0% {top: -21px;}
2% {top: 0px;}
4% {top: -21px;}
100% {top: -21px;}
}

@-webkit-keyframes bartlefteyelidbottom {
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

@keyframes bartlefteyelidbottom {
0% {bottom: -11px;}
2% {bottom: 0px;}
4% {bottom: -11px;}
100% {bottom: -11px;}
}

Each of The Simpsons characters uses similar CSS styles for rendering the blinking eye animation; however, each character is uniquely coded to fit their particular shapes — all in pure CSS, which is quite impressive that nothing else is utilized, such as JavaScript or jQuery or other techniques that many animations currently utilize. Pattle's Simpson's character creations and inspirations are just the start of what should be more exciting developments to come out of CSS in the years ahead.

Automatically subscribe to TechRepublic's Developer newsletter.

Also see

About Ryan Boudreaux

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks

Free Newsletters, In your Inbox