Create a Responsive Unit and Container as the Foundation for a CSS Illustration
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.
Jhey Tompkins: [0:00] Let's start by pulling in the image for our illustration. The image is bigger than we'd like. We can give it responsive sizing using CSS variables and calc.
[0:23] Here, we use a size variable with a viewport unit. That gives us a responsively sized image. We can check this by resizing our browser window. Let's center that image using position: fixed; with a combination of top, left, and transform.
[0:57] Now, we need to do a similar thing with our container. We can center it using the same technique.
[1:14] At this point, we have an opportunity to reuse our styles. Let's do that. We have our egg container, but it currently has no size. The height and width are both zero. We can confirm this by referencing the computed styles. How do we size our container?
[1:37] We can use the same height as our image, but our image has an implicit width. To give our container a width, we can create a responsive --unit. This unit we can use to power our CSS illustration. To calculate this unit, we can use the intrinsic height and width of our image. We can check this with our browser DevTools.
[2:03] Here, we can see our image has a width of 742 and a height of 769. To define our unit, we can use calc by taking our desired size, dividing that by our largest intrinsic value, and multiplying by a desired coefficient. We can test this on our container by doing our intrinsic height, (769 * var(--unit)).
[2:39] We can do the same thing for the width using the intrinsic value again, (742 * var(--unit)). We can apply a background-color so we can see our container. If we use the HSL or RGB color space, we have the option of using a reduced alpha.
[3:10] There's our container. This container will scale responsibly with our image. The height and width of our illustration and the height and width of our image will be the same so we can move the height and width, and we can remove the height here.
[3:29] What we may choose to do is reduce the opacity of our image. Using a reduced opacity on our image and the elements we create makes it easier to compare our illustration to the image we're trying to create.
[3:43] In review, we created the foundation for illustration by pulling in the image we're going to create and then creating a responsive container that we can use for our illustration that is powered by a responsive unit, which we calculated using the intrinsic width and height of our image.