Creating CSS images is a fun way to practice 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'll start with some top tips for mastering CSS art, then show you how to recreate this animated balloon Pikachu using only CSS.


1. Start with containers

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

2. Style the head

With the structure figured out, let's style the head first. In this case, the head makes a nice center 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 color – now let's make this rectangle look more like 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.

3. 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 color we created using Sass darken() so they stand out.

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

5. Animate the CSS

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.

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.