CSS Discussion

The actual CSS is no longer in this post, it has been moved here.

Bart Simpson Head Animation

How did we manage before smartphones? The other day I saw an article about the Simpsons in CSS in my news feed on my phone. Its from 2014 but Google thought it was important enough to tell me about it in 2020. Thirteen characters from the Simpsons have been drawn (and many animated) in nothing but HTML and CSS. This “Bart Head” CSS is taken from The Simpsons in CSS.

My Simple Version of the Animation

Here is my attempt at copying some of the very cool CSS in a very basic way… My Very Simple CSS Animation

Explanation of the CSS

• Both of the faces above are created by nesting DIV elements within each other.
• Sizing is explicitly specified by using CSS box-sizing.
• The order of the DIVs is crucial to hiding what we want to hide.
• The animation has a duration, a delay, starts straight away and runs forever.
• The CSS keyframes allow us to modify any part of the element’s CSS at any point in the duration.

The basic principle to make the complicated shape of the Bart head is to make rectangular elements with/without colour then apply skew, rotation, radius and borders to make different shapes which are pieced together in a particular order, overlapping them to make the face.

The outermost DIV is the canvas and this is set to “position: relative” and centered. Everything directly within the head has “position:absolute” and uses the canvas as the parent or containing block. Nested element use the parentas the containing block. More information about CSS positioning docs.

Nesting one element inside another allows the parent DIV to act like a mask to the child element(s) by using “overflow: hidden”. This technique can be seen most clearly in the eye.

The eye itself is a circle. In this case, a circle is a square div with “border-radius: 50%” and a white background. The outline of the eyes extends outside the outlines of the face in my animation, this is because the eyes are after the face and not inside the face, although they could also be inside the face if overflow was visible. The pupil is a DIV within the eye DIV and its position is absolute, so it uses the parent DIV as it’s axis. The eyelid is also within the eye but after the pupil - when the eyelid animation moves downwards it covers the white of the eye and the pupil completely. The eyelid is actually a square shape in my animation, but we only see the part of the eyelid that is within the circle of the eye. I added opacity changes to the eyelid so that it’s invisible when it is not in motion but with the masking effect of nesting the DIVs this is not needed, and was not used in the Bart head.

Also…

There is a lot of CSS that I have not used in my work so far, and even more that is Sass/SCSS. This is an example of some very clever SCSS: background image.

This article about different ways to make a circle in HTML/CSS is also interesting in a very practical way.