A step-by-step guide to creating a cute animated illustration using CSS.
(Image credit: Tiffany Choong)
Creating CSS images is a fun way to practise your skills and create a neat piece of artwork. It's a nice break from the usual day-to-day styling of web components. All you'll need to get started is a blank document and a CSS file; we recommend using Sass, which will enable you to reuse your styles and write simpler selectors (see our guide to what is Sass? to learn more about this preprocessor).
We'll start with some top tips for mastering CSS art, then show you how to recreate this animated balloon Pikachu using only CSS (make sure you keep your files safe in decent cloud storage).
Or, if you are starting a new site, ditch the complexity with a brilliant website builder and make sure you get your web hosting spot on.
Reduce the design to simple shapes
When creating CSS art, it can help to look at a few reference images for inspiration and then create a simplified cartoon variation as you go along, envisioning the subject using primitive shapes, which make better CSS shapes.
Use a bright background to help with positioning
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
When overlapping shapes of similar colours, it’s difficult to see where they’re being placed or what they look like. It’s useful to have the shape you’re working on stand out by changing the background-color to something bright and cheery, like magenta. This enables you to easily see the exact position and shape of your element.
Use fluid sizes
When it comes to defining a px value for properties, we would recommend using the rem unit. In the event you decide that you want your overall piece to be larger or smaller, by using rem units you only have to change the base html { font-size: …px } in your Sass to scale the whole artwork up or down.
When defining the heights and widths of child elements that should have relative sizing to the parent, percentages come in handy. Since these values are always relative to their parent, they should also scale with the html font-size.
A wrapper container to hold the artwork's pieces is a good place to start. Within the container, we can place three inner containers – the head, the body and the balloons.
The container should usually be position: relative to allow for other elements to be placed relatively inside it using position: absolute and have a well-defined height and width, otherwise positioning child elements becomes difficult.
In your styles, add your base colours as Sass variables for reusability. The Sass lighten() and darken() functions will create tints and shades of your colours, which can be used as highlights or shadows for your character.
02. Style the head
With the structure figured out, let's style the head first. In this case, the head makes a nice centre point for the artwork, so rather than setting its position to absolute, it can be set to relative. This enables the container to have a stable element inside of it, giving the other floating absolute elements an anchor point and thus more control over their position.
The facial features will need a container for positioning, so create a <div> inside the head container for the yellow shape with a width, height and background colour – now let's make this rectangle look more like a head shape. One of the most common and useful properties in CSS art is the border-radius property, which changes the curve of the X or Y of a box's corners and can be used to create more organic shapes.
Using this technique with a rem and percentage combo, you can make blob-like shapes rather than just plain ellipses, which scale naturally with the html{ font-size: …px }:
After perfecting the head's border-radius, position the rest of the facial features as child elements of the head, such as the eyes, cheeks, nose and ears. Like the head, the border-radius trick will come in handy since border-radius: 50% may not look appealing.
03. Move on to the body
A body <div> can be placed within the body container behind the head and shaped with the same border-radius technique, as well as the arms, legs and tail. To allow for proper overlapping, the actual body should be its own element, as certain inner elements like the back stripes will need to be cut off with overflow: hidden. To give the body more depth, the transform: skew() property can sheer the body slightly.
The lightning bolt tail can be built using three separate rectangles rather than trying to form this shape from one element. The rectangles can be rotated and positioned over the top of one another to form a bolt. The arms and legs can use the darker primary colour we created using Sass darken() so they stand out.
04. Add balloons
Now that the electric mouse is completed, let's tie balloons to its back. Add some <div>s with shared styles with a child string <div> and position them bunched above the head. The string is invisible except a border-left, which help make it look more string-like.
To tie the string around the character's waist, a <div> can be placed within the body to allow for proper positioning. The string needs a slight curve to appear as though it's tied around the body, so it can have a small height, border-bottom and a border-bottom left and right radius, which makes a thin curved line:
We can give the character life by adding @keyframes animations. The arms, legs, ears and tail can be animated with transform: rotate(). Ensure the transform-origin is set to the ‘joint' (i.e. top center for a leg) and adjust the rotation. This animation type can be used several times in a Sass mixin:
Finally, adding a slow 5s transform: translateY() keyframe animation will animate the character up and down as though it's floating. For a touch of realism, a blinking animation using transform: scaleY(0.1) property can be used to make it appear as though the eyes are closing.
This article was originally published in creative web design magazine net. Buy issue 283 or subscribe.
