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.

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

Figure B

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

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.

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.

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.

Related Topics:

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...

Full Bio

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 government.