Plan the HTML Markup for a CSS Illustration

Jhey Tompkins
InstructorJhey Tompkins
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

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.

egghead
egghead
~ 45 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today