Create a Responsive Unit and Container as the Foundation for a CSS Illustration

Plan the HTML Markup for a CSS Illustration

Create Complex Shapes with CSS Clip Path and Border Radius

Use CSS Transform and Border Radius to Create Complex Shapes

Use CSS Classes to Reuse and Override Styles

Use Oversized Elements with CSS Clip Path to Create Complex Curves

Use a CSS Polygon Clip Path to Create Complex Shapes

Add Depth to a CSS Illustration with Box Shadow

Use CSS to Create Art and Illustrations

Once we have the image we are going to trace and a responsive container in place, it's a good time to plan the markup for our illustration.

In this lesson, we create the markup needed for our illustration taking into consideration how many elements we might need to create certain shapes and how the stacking context could play a part.

https://app.egghead.io/api/v1/lessons/css-plan-the-html-markup-for-a-css-illustration/subtitles

Jhey Tompkins: [0:00] Now that we have the styles in place for our responsive container, and the responsive unit defined, it's a good time to plan our HTML markup. Create and split the markup based on the features of the illustration. In this illustration, one containing element for the shell and one containing element for the spectacles.

[0:25] Once we've created the containing elements for the feature pieces of our illustration, we can decide on the elements we need to make each feature. Looking at the shell, we might think of using one element, but if we look closely, we can see that the outline of the shell is offset when it goes behind the spectacle lenses.

[0:55] With that in mind, we likely need more than one element for the shell. We might try using pseudo-elements or two elements where we have one for the inner shell and one for the outer. Let's make things easier for ourselves by using three explicit elements with the class "shell_piece".

[1:22] We can use the "shell_piece" class to share styles between different pieces of the egg shell, namely the border property and the background color. We can use extra classes to distinguish between the top of the shell, the middle of the shell, and the bottom of the show.

[1:48] Next, let's plan the markup for the spectacles. We have two lenses, a bridge, and the arms. Let's create the elements for them, an element for each lens, an element for the bridge, and an element for the arms. We can use extra classes to differentiate between the left and right lens. Both lenses have shared styles that are a mirror image of each other.

[2:36] We can create the spectacle arms with one element, but as we can see, the arms need to sit behind the shell. To do this, we can move the specs_arms outside of the specs container and below the shell in the stacking context. This means that in our illustration, specs_arms will be first, then the eggshell on top, and then the spectacles on top of the eggshell.

[3:07] In review, we have planned the markup for our illustration, we've created the elements we feel we'll need to create the illustration, and we've also taken into consideration the stacking context. In our example, spectacle arms will need to appear beneath the shell, whilst the spectacles will need to appear above the shell.

Plan the HTML Markup for a CSS Illustration

Share this video with your friends

Course

Use CSS to Create Art and Illustrations