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

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.

https://app.egghead.io/api/v1/lessons/css-use-css-transform-and-border-radius-to-create-complex-shapes/subtitles

Jhey Tompkins: [0:00] Now we've created the shell for our egg. We can focus on the spectacles. Let's start by hiding the shell. Next, we can style the containing element for our spectacles. We can use the same technique, where we use a background color with a reduced alpha CL container. That container needs both a height which will set at 30 percent and a width that we will set at 90 percent.

[0:30] We want to center the spectacles, so we can use position absolute and use a left of 50 percent and then use transform translate, -50 percent on the X-axis, and zero on the Y to center the element.

[0:45] Using a top value of around 30 percent, should position the spectacles where we want them and we can see that we are nearly there. As we did with our shell pieces, we can use DevTools to tweak the styles until we get something we are happy with.

[0:59] A width of around 95 percent looks good. A top of 31 percent is too low, a top of 30 percent is too high, 30.5 percent looks about right. Lastly, we tweaked the height 31 percent looks too big, 30 percent looks too small, 30.5 is about right.

[1:17] Let's update our CSS with those values. Now we have the container for our spectacles. Now we're at a point where we can start creating a lens. Let's start with a reduced opacity and a random background color.

[1:33] Next we can define a width and height. Let's go with 45 percent width and a height of 90 percent. It looks like our lens is almost 200 percent height, but it isn't because that is both of our lenses. Let's use position absolute and now both lenses are on top of each other. We can reduce the opacity to make things a little easier to follow.

[1:53] We need to rotate the lenses to match our image. We can use transform with a value of rotate to rotate our lens by the number of degrees specified. We can see that positive rotation isn't the right direction for us. Let's try rotating the opposite way.

[2:10] At this stage, it's a good idea to jump into DevTools, and we can start adjusting the styles to our needs. We can see our lens needs to come down from the top a little bit, maybe one percent, three percent looks good. Can adjust the height and maybe we can come in ever so slightly from the left too.

[2:25] Let's update our CSS for those styles. Now we can use a complex border-radius like the one we used earlier to create our eggshell. We use the optional forward slash to define both horizontal and vertical radius for each corner of our element. Here, we've estimated the values to create the shape we want. Jump back into DevTools, and we can adjust the border radius until we get a shape that we are happy with.

[2:54] We might decide that left one percent is no longer required to line this edge back up and we might decide it's more important for this corner to try and match with our image. We can adjust that part of the border radius until we have something that we are happy with.

[3:08] The last part for our lens shape, we'll be trying to tidy up these corners with the horizontal values and we can adjust them until we find something that we're happy with. Once we have something, copy that value and update it in our CSS. Don't forget to remove the left property that we turned off in DevTools.

[3:25] Now we can remove the background color and apply a border. We will use a solid border, but we can use a responsive unit to define the width. That gets us pretty close. I might bump this up slightly to 44. To take this further, we can move our color into a variable at the top of our style sheet. Remove the opacity style from our lens element and there we have our lenses overlapping.

[3:54] In review, we've styled both of our lenses as the left lens of our spectacles. We created a container, we styled the spectacles container, and then we styled both lenses as if they were the left lens. We used a complex border radius to achieve the curved shape and we use absolute positioning and transform rotate to position the element exactly where we want it.

[4:14] We've also considered the trade-offs when we create these types of shape. When we create CSS illustration, more often than not, it's a case of finding a shape that we are happy with that may not be 100 percent correct.

Use CSS Transform and Border Radius to Create Complex Shapes

Share this video with your friends

Course

Use CSS to Create Art and Illustrations