Cascading Style Sheets bring order and beauty to our applications.

In this collection, we explore creating CSS art and illustrations by walking through creating the Egghead.io logo with CSS.

We walk through everything from planning and creating a responsive foundation, to creating shading effects with `box-shadow`.

In this lesson, we lay the foundations for creating a CSS illustration of the Egghead logo using the "tracing" technique.

We walk through positioning an image and container whilst making them both responsively sized. We use the images' intrinsic dimensions to size our illustration using a custom unit. This custom unit is calculated from our images' intrinsic dimensions and the desired size of our illustration.

This results in us having a responsive container for us to create our CSS illustration in that will scale with our browser window.

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

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.

Plan the HTML Markup for a CSS Illustration

In this lesson, we explore creating the Egghead Shell with CSS.
We explore how different properties allow us to create different shapes and how we can use our developer tools to adjust and tweak style values.

Create Complex Shapes with CSS Clip Path and Border Radius

In this lesson, we create the first spectacle lens for our CSS Egghead logo.

We use CSS transform and absolute positioning to get the element into place. And then use border-radius to finely tune the shape of our element.

Use CSS Transform and Border Radius to Create Complex Shapes

In this lesson, we create a second lens for our Egghead spectacles. These are a mirror image of each other. Instead of writing out the styles again, we can reuse the styles and make use of the specific class to override the positioning and transform in order to mirror the right lens.

Use CSS Classes to Reuse and Override Styles

In this lesson, we style the bridge of our Egghead spectacles. The trick to creating some shapes is to use oversized elements that we then clip the excess from. Here we create an element much larger than required in order to achieve the shape we want and then clip away the excess.

Use Oversized Elements with CSS Clip Path to Create Complex Curves

In this lesson, we create arms for our Egghead spectacles. To do this, we create a normally sized element and then clip away the excess that we don't need using a polygon clip with CSS clip-path.

Leveraging the stacking context means we only see the parts of the spectacle arms that we desire.

Use a CSS Polygon Clip Path to Create Complex Shapes

In this lesson, we use `box-shadow` to create the shadow cast from the Egghead spectacles onto the Egghead shell. At first glance, we might opt for a `box-shadow` on the lenses themselves. But, we need to duplicate those elements so we can clip away the parts of the shadow we don't need without affecting the lenses.

Use CSS to Create Art and Illustrations

Jhey Tompkins

Learner Reviews

Course Content