Up next in 10
How To Draw CSS Emoji Illustrations
1K views
Feb 7, 2024
The "How To Draw CSS Emoji Illustrations" video is a creative tutorial that demonstrates how to design emoji illustrations using only CSS (Cascading Style Sheets). Throughout the video, viewers are guided step-by-step through the process of creating various emoji designs, such as smiley faces, animals, and objects, solely through CSS code. The tutorial covers essential CSS concepts, including shapes, gradients, transformations, and animations, to achieve intricate and visually appealing emoji illustrations. By following clear demonstrations and explanations, viewers can learn how to leverage CSS properties creatively to produce custom emoji designs for web applications and projects. Whether you're a beginner or an experienced web developer seeking to explore the artistic potential of CSS, this tutorial offers valuable insights into crafting unique and expressive emoji illustrations using code.
View Video Transcript
0:00
Did you know you can use a poop emoji to teach yourself CSS
0:04
I'm serious, a poop emoji. The reason you can do this is because of CSS illustrations
0:10
and how great they are at teaching you things such as position, transform
0:14
and how to manipulate elements on a page in CSS. In this video, I'm going to go through three different emojis
0:21
and I'm going to show you how to build all of them using only CSS
0:25
Let's get started now. Welcome back to WebDev Simplified. My name's Kyle, and my job is to simplify the web for you so you can start building
0:36
your dream project sooner. So if that sounds interesting, make sure you subscribe to the channel for more videos just
0:42
like this one. Also, if you enjoyed this video, make sure to check out my full CSS course I have linked
0:48
down in the description if you want to take your CSS learning to the next level
0:53
Now as you can see on the right-hand side here, I have the finished version of the different emojis we're going to make in this video
0:59
We're going to make a very generic smiley face, a surprise face, which is just a variation
1:03
of the smiley face. And then the more complex emoji is going to be this face mask emoji, which I figured was pretty
1:09
much perfect for the timeline that we're living in right now. So to get started with this, all we need to do, create a new file, call it index. HTML
1:18
This is going to be where all of our HTML goes. Hit exclamation point tab
1:22
This is going to be our boilerplate HTML. And then inside the body, all we need to do is create essentially a div structure for the different
1:30
elements in our illustration. So as you can see on the right hand side here, we have essentially three different emojis
1:37
and we want to wrap them in their own emoji class. So we can just say here, we have a div called emoji, and we're going to have three of these
1:44
divs, one for each one of our emojis. This is just going to give us our spacing
1:48
It's not going to do anything else. Then inside of this emoji is where we're going to put that different hierarchy
1:54
So let's think about what our emoji is built out of. This smiley face has the round face portion, it has these actual eyeballs, the left and the
2:01
right, and then it has its mouth. So we need to represent all of these different elements
2:06
The first thing we have is the actual head itself, this yellow section, and then inside the
2:11
head we're going to have our eyes and our mouth. So let's just do something for our eyes here, and then another div, which is going to be for
2:19
our mouth, and then inside of this eyes div, we're going to need to have our left and our
2:24
right eye. So we can just come in here. We're going to have an eye, which is going to be our left
2:28
eye. And we're going to have the exact same thing, but this one is going to be our right side
2:33
eye. And the reason we create our div hierarchy like this is because we're going to be positioning
2:38
these elements and then building them with background colors and width and height. So having them
2:43
in a hierarchy like this allows us to group all of our eyes at once. So both our left and right
2:48
eye can be positioned by this main div here for eyes. Our head will position all of our different
2:53
elements, and then the mouth obviously is just going to be on its own. That way, if we change
2:58
the position of our head, it's going to move everything inside of it as well. So that's why this
3:02
hierarchy is really important. If we just had a flat level where our eyes, for example
3:07
were outside of our head, they wouldn't actually move with our head, and that would be really
3:11
difficult to work with, since if you move your head to a different place, your eyes should
3:16
hopefully follow your body. So let's put that back to how we had it. And here we have our basic
3:20
setup for our very first emoji. Let's create a style sheet here. I want to call it styles
3:26
CSS. And then let's just make sure that we import that so we can just link in that style sheet
3:31
called styles.cass. Now that that's done inside of our style sheet, just like I like to do in
3:37
every single project, I just want to set up our box sizing here. So we can just say for all of our
3:43
elements before and after. We're going to set our box sizing to be border box, just to make sizing our elements a little
3:49
bit easier. And for our body, let's just remove our margin. So we'll set that to zero
3:56
We want to make sure we have a little bit of a background color. This is just going to be here BD repeated three times, just like that
4:03
And then I want to make sure our elements are in the center of our screen. So we're going to change our display to flex
4:08
We're going to justify our content in the center and align our items in the center
4:13
And then if we just come in here and say that emoji is going to have a margin, for example, of 1RAM
4:20
and it's going to have a background color of red and a width of 1RAM and a height of 1RAM
4:31
If I spell background correctly, that'll just give us something to look at. So when we inspect our page here, you can see that we have three different red circles if I zoom in
4:39
all the way up here that represent our three different emojis. I'll just zoom that back to our normal zoom level, just like this
4:45
There we go. Now that we have everything zoomed to how we want, one thing you'll notice is that our red dots are at the top of our screen
4:51
In order to get them in the middle, let's just set a height here to be 100 view height and a width, which is also 100 view width
5:00
Now we save, you can see those red dots are in the center. And instead of having these small sizes, let's create a size variable
5:07
We're just going to call it here emoji size. We're going to set this to, for example, 200 pixels
5:13
And then we're just going to use that variable, which is emoji size for our height and
5:18
our width. And now if we save, we have our three different essentially emoji positions on our page, which
5:23
look very similar to how our emojis are positioned over here. But obviously this background color, we're going to get rid of and replace it with an actual emoji
5:31
Now the first thing that I want to start with is just going to be this circle-shaped head
5:36
So we can just come down here. We can select our head. go over to our actual view to make sure we can see what's happening live as we change this
5:43
And the first thing I want to do is change our border radius. Whoops, border radius
5:48
And I want to make this 50% that's going to give us a circle. And I want to make sure this takes up the entirety of our emoji space
5:55
So we going to set the height and the width here to be 100 And if we just give this a background color I just going to copy over this background color It a yellow emoji color I picked exactly from the emojis If we say you see we now have that yellow circle
6:10
And we can remove our background color on our emoji because we don't actually need that
6:14
So now we have our yellow face circle, which is looking really good. And the next thing that we want to do is make sure that nothing overlaps the edge of our face
6:22
So to do that, we can say overflow hidden. And now anything inside of this head that goes outside of the face
6:28
it will just be completely hidden because obviously we don't want something that's on the face
6:32
to overlap the face and go beyond it because that just doesn't really make sense
6:37
So we're going to hide everything. And also I want to set the position equal to relative because everything inside of our head
6:43
is going to be absolutely positioned inside of it. So we want to make sure it's relative to the actual head itself
6:50
Now the next thing we can move on to is the eyes. And if you remember right, this is this container that contains both our left and our right eye
6:57
So we want to just position where the eyes are going to be on the page
7:01
So we want to make it position absolute. And all we want to do here is set the top, and we want to set the left to some value
7:09
So a really easy way to do this is we can use this emoji size variable and just make it
7:14
a percentage of emoji size. And a really easy way to do that is to use calc
7:19
We take our emoji size, and then we multiply it by some percentage
7:24
In this case, we'll say we want it to be 25% up. So the top is going to be 25% away from the top of the head, so it should line up somewhere
7:32
around here on the face about 75% of the way up the face
7:36
For the left, we want this to be dead centered. So we'll say calc of that same exact variable, which is emoji size, and we'll multiply this
7:43
by .5. Now if we just come in here and set a simple background color of maybe red, and we just give
7:50
it a width of, we'll say 5 rm and a height. of 5 r a m and we save you can see that we get this red looking box which this top left corner
8:00
is going to be dead centered right here and it's going to be about 75% of the way up the face
8:05
that's exactly what we want we don't have to worry about the actual square not being centered
8:09
because this eyes element is not going to have a width or height so the width and height is
8:13
zero so essentially it's going to be right in this top left corner so that's exactly what we
8:17
want for our eyes and now we can move on to styling each of our individual eyes so again we're going to want to
8:24
position these absolutely. So we can come in here and say position absolute, but instead of being
8:29
relative to the head, they're now going to be relative to our eye container, which we know is right
8:33
at this top left corner of this red square. So what we can do is just specify exactly how we want
8:39
our eyes to be sized, and then when we need to position it, we're already positioning off of this
8:43
exact square right here. So let's come in here and set our actual size. We're going to say the
8:48
width is going to be again another calculation, which is based off that emoji size, and we're
8:54
And we're going to multiply here by, for example, 0.075. So it's about 7.5 times the face
9:01
For our height, what we're going to do is we're going to come in here to do a calculation
9:05
off of that emoji size again, and this time we're just going to use .15, so the eyes are
9:09
about twice as tall as they are wide. Next, we're going to set our background color
9:16
This is going to be black, and we're going to set a border radius of 50%, which is going to give
9:21
us this really nice oval shape. And if we save, you now see we have our eyes right in the center of the face, they're both
9:27
overlapping over the top of each other, so right now we just have a really weird looking
9:31
cyclops emoji, which is definitely not what we want. So let's use those I left and I right classes that we created, and actually position these
9:40
elements where we want them to go. So the I left, we're going to set a left, and we want again use a calculation off of that
9:48
emoji size. And here we're going to multiply by a negative value because we want to move it
9:53
it to the left, so if we set our left to a negative value, it'll move to the left
9:58
So we'll say negative 0.2 of the actual face. So 20% of the face over
10:03
And for the eye on the right, we're going to do the exact same thing, but we're going to
10:07
move the right hand side, the same value over. Now if we save, you can see our left eye is over here, and our right eye is over here
10:14
and we essentially have the eye portion of our emoji done. And something that we can actually do to follow this up is if we go into our index
10:21
text out HTML here, we can actually copy this code into our other two emojis because they're
10:27
going to be very similar. This one is not going to have a mouth that's going to have the face mask, and this one down
10:32
here is going to have a different mouth. We'll call it open mouth
10:37
So now if we save, you can see we have our three different emojis lined up because they're all going to share this exact same base level
10:43
If we look over here, you can see they all have the same eyes and the same face
10:47
It's just the mouth portion that's different. So let's work on first our smile
10:51
We'll actually change this to smile to be more clear in the code
10:54
We'll come down here, select that dot smile, and we want to make this smile looking shape here
11:01
So in order to do this, again, we're going to use position absolute, and this again is going
11:07
to be relative to the head as a whole. Let's just go back over to this example here
11:12
And the next thing we want to do, we'll set our background color here, because we know that this is going to be that black color that's the same as our eyes
11:18
Now from here we have some really interesting things that we need to do
11:22
First we need to make this weird looking circle shape where it has a circle on the bottom
11:26
it's very slight rounded corners around the edge here, and then completely flat on the top
11:30
This is actually a fairly complex shape to make, but we can do it pretty easily with border radius
11:36
So first let's set up the width and height of our mouse. So here we can come in and say that the width is going to be again a calculation based on
11:44
our emoji size, so we'll say emoji size. We're going to make this width about 60% of our face, and then for our height, we're going
11:52
to do something very similar, calculation, which is going to be a variable based on emoji
11:56
size, and here we're just going to use .3. And now if I save this and look over here you can see we just have this black box Right now we not actually positioning it anywhere So let make sure we position it from the bottom based again off of that emoji size
12:12
And we're going to say that we want this to be bottom positioned about 15% from the bottom
12:17
And then again, we're going to do our left. This is going to be a calculation, which is going to be dead center
12:22
So we'll say emoji size times 0.5. And if we save, you can see our mouth is positioned vertically where we want it to right here
12:31
but horizontally, it's way off on the right-hand side, and that's because we need to translate this backwards 50% of its own width
12:39
Because what this left does is it sets the left-hand side of our square, and what we want to do is set the actual center
12:45
So we can use a really cool trick where we do transform, translate in the X direction
12:50
and we just translate negative 50%. And what this does is it takes 50% of the width of our mouth
12:56
and moves backwards that amount. So combination with left 50% and transform negative 50%, we get the exact same thing, essentially
13:06
where we're going to have a dead centered object. If I save, you can see our mouth is now dead center
13:11
And right now, this emoji is looking pretty scary with this weird, big, square-shaped mouth
13:15
So let's add in that border radius effect. Now, in order to make our border radius exactly like we want
13:21
let's break out this mouth height here into its own variable. So we say mouth height is going to be equal to this height
13:29
height right here, just like that. And then we can set that down here so we could say mouth height, just like that
13:39
And now we get to our border radius. So let's look over here
13:43
We can see the top left corner and the top right corner both have a very slight border radius
13:49
So the top left is going to be 5%, and the top right is going to be 5%
13:54
Now we have this half circle down here for our bottom left and our bottom right
13:58
and in order to get that perfect half circle look, we can set them both equal to our mouth height
14:04
So we can just say variable mouth height and variable, which is mouth height
14:10
And now what happens if we save and we go over here, whoops, if I put the semicolon in the right spot and save
14:17
you can see we get that exact same mouth shape. We have the nice little 5% rounding up here and up here
14:22
and then the full half circle down here because it's the exact same size as the height of the element itself
14:28
So now next, let's try to make this really surprised looking face because we finish the smile
14:33
now we can move on to the surprised face. And one thing you're going to notice is the surprise mouth and the smiley mouth are in the exact
14:39
same position. They actually share a lot of the same code from over here
14:44
So let's abstract that out into its own mouth shaped class so we can get out here, our position
14:50
our bottom, left, and our transform. Those are going to be exactly the same between all of our different mouths
14:55
our background color is going to be the same. So let's move those into there, just like that
15:01
And now let's add a mouth class to both our smile and down here to our open mouth
15:07
Just like that, if we look over here, our code is exactly the same. But now what we can do is we can select our open mouth
15:16
And we all we need to do in here is just set our width and our height and our border radius
15:20
and it's going to give us our exact mouth that we want. So let's come in here with a width
15:25
Again, going to be based off of that variable, oops, variable emoji size
15:30
And what we're going to do here is we're going to multiply, for example, 0.25
15:34
And we're going to do height, which is going to be very similar. Again, emoji size
15:39
And this one we just want to be slightly taller, so we're going to use 0.3 here, for example
15:44
And then a border radius of 50% is going to give us this nice perfect oval shape
15:49
If I save, and I jump over here, you can see we now have that nice oval shaped surprise face
15:54
surprise face and the smiley face and they're both sharing a lot of the same code so we don't
15:59
have to duplicate that between them which is really handy now the last emoji we have left is going to
16:04
be this face mask emoji and this one like i said is the most complex so let's come over here
16:09
right now we have our face mask emoji in the middle let's add in a face mask class this is going to be
16:16
for containing this square here for our face mask and then we need to add in our four different
16:21
straps. So we can just say we're going to have a strap and then we're going to have a strap
16:26
top left. We're going to copy this down because we're going to have a top right. We're going
16:31
to have a bottom left and we're going to have a bottom right. This is going to be our four
16:38
different corners for the straps that go off the edges of our face so that we have all these
16:42
different straps and they're all inside the face mask. So they're positioned based on the face
16:47
mask position, which is really, really important. So let's save that, go back into our
16:51
style sheet and select our face mask. We can also select our strap while we're at it, but
16:58
let's first style the face mask itself. One thing that we can also do with this face mask
17:02
is it actually is very similar to our mouth. They are actually in the exact same position
17:07
so we can use this mouth class again here in order to make sure that we have this positioned
17:12
correctly. And all we need to do in here, for example, is set a width, which in our case is
17:16
going to be the exact same size as our smiley mouth. So we're just going to say variable, who
17:21
variable of emoji size times .6. And we're going to set our height here, which again is a calculation based off of that emoji size
17:30
We're just going to come in here, multiply this by .35. And we're going to come in here with a border radius, and this is just going to be 10%
17:38
So now if we save, come over here, we now have a black section in the middle
17:43
which just looks like a really scary, screaming mouth. In order to make it look like a face mask, we can just change our background color
17:51
to be white, and that already looks better. And we're going to give this a little bit of a border
17:56
Again, we're going to scale this based on that emoji size. This one's going to be pretty small, though
18:00
We'll just do 2% of that size. It going to be solid and it going to be this grayish color 999 And that gives us this nice little outline around our mask to just kind of emphasize it a mask and maybe not someone with really scarcely white teeth because that would be really scary So now with that mask done let move on to the individual
18:19
straps. We're going to want to position them absolutely, obviously, so we can position them
18:24
properly. We're also going to want to come in here, set the background color to be white
18:30
We're going to want to have essentially the exact same border. So I'm just going to copy this border down, it's going to be exactly the same. We're going to have a width, which is going
18:37
to be based again off of that emoji size. This one's going to be 50% of the width. That way
18:44
it can make sure it spans this entire width. And our height is going to be very similar, but it's
18:49
just going to be 10%. And if we save, you can see our straps are kind of showing up right here
18:53
If I give them, for example, a top of negative 10 pixels should just be a little easier to see
18:59
them. Let me even go a little further. It will be negative 30. And there you can see. our strap up here right underneath the eyes. That's what we have right now. What we need to do
19:07
is position each one of these with a top left, right, rotate, and everything to put one here
19:13
one down here, here, here, and here. So we have the four different corners. So we'll do the
19:17
strap on the top left first. And for this one, we're going to just do a little bit of a rotation
19:22
So we'll say rotate, maybe we'll say 20 degrees. If we save, you see we get that nice little
19:27
rotation, which looks really good. We're also going to set our top here to a calculation, which is
19:33
on that emoji size. And this one's going to be negative, and it's going to be .05, just like that
19:41
And you can see it's essentially positioned itself slightly upward. If we were to have this be 0, that'd be the same as top 0
19:47
You can see it's down a little bit. With this .05, it just positions itself upward slightly, which is exactly what we want
19:55
Now we also need to position on the left-hand side. So we can say a variable here, which is our emoji size
20:01
We're going to do negative 0.4 in this case. And if we save, you can now see that strap has positioned itself where we want it to, but
20:08
there's a problem in that it's in front of our face mask, and obviously we want this to
20:12
be behind our face mask. So to change that, let's make all of our straps have a Z-index, which is going to be negative 2
20:21
And if we save, you're going to actually notice that these don't go behind our face mask or
20:25
the face or anything for that matter. And the reason why that is is because our face mask actually has a stacking context being created
20:33
for it, which is a bit of a confusing concept, but essentially what that means is that everything
20:39
inside of our face mask, so our straps, can never go behind our face mask itself
20:45
So in order to fix us, we need to remove the stacking context from our face mask
20:49
And the reason it has the stacking context is because it has a combination of transform
20:54
and position being set on it. So in order to fix this
20:58
let's just copy our left and transform here down into our face mask
21:03
And what we want to do is remove our transform. So let's just set this to none
21:08
And if we save, you're going to notice our straps are properly being hidden through that negative 2Z index
21:13
but our face mask now is not in the right position. So another way to make this centered
21:18
is just to make this left property here, subtract half of the width from it
21:23
So we can say .5 minus .3, which is going to be .2, and that's going to give us a dead-centered face mask just like this
21:31
Now to make our straps appear in front of our face, we just scroll all the way up to our head here
21:36
and give this a Z-index of negative 1. Now, since our straps have a Z-index of negative 2, they're going to appear behind our head
21:44
and our head with a Z-index of negative 1 is going to appear in front of them. So that is exactly what we want
21:49
And now you can see that our strap is properly in front of our face and behind our face mask
21:55
So now we can move on to all of our other straps. For example, our top right strap, which is going to be very similar to this strap
22:03
All we need to do here is change this from left to right. And if we save, you're going to see if we get our strap in the correct position
22:09
We just need to reverse our rotation. Now if we save, you can see we essentially mirrored the strap on the left with the strap on the right
22:16
Now let's move on to our other straps, which are going to be our bottom left and our bottom right
22:21
So we have first our bottom left. We're going to need to have a different rotation here
22:26
We're going to do a rotation of 30 degrees because it's going to be a little bit of a starker change
22:31
And instead of specifying our top, we want to specify our bottom, which in our case is going to be nearly the same
22:37
We'll just change this to 0.06 instead of 0.05. Now if we save, you're going to notice that's not quite right because this is right
22:44
We need this to be left. And we also need to make sure, up in our strap section here, we remove this top
22:50
This shouldn't be here. That was just for demonstration purposes. And now, if we just change this rotation to be the exact opposite, you can see we have our strap going off of the edge of our face
23:01
Let's do the exact same thing, but with bottom and on the right, all we need to do, reverse our rotation, change left to right, and we should have the exact mirrored strap on the bottom right-hand side
23:12
And now one thing I want to mention is that you noticed we use this variable emoji size
23:17
absolutely everywhere in our code. We didn't hardcode a single number. So the reason for that is because if I go up here and now change our emoji to be 100 pixels
23:27
and save, everything on our page is going to scale based off of that emoji size
23:32
So you can imagine you could put in a slider in JavaScript and increase and decrease that slider
23:36
and change the size of the emojis all over your page. If we made this really big, for example 300, you can see our emojis
23:42
are bigger, we jump it all the way down to 50, and they're way, way smaller
23:46
You can really play around with this value, and since everything is based off that value
23:51
it's going to scale perfectly and it's not going to look any different, which is really cool
23:55
and something most people ignore when it comes to CSS in general
24:00
And that's all it takes to create these CSS illustrations. If you enjoyed this video, make sure to check out my other CSS-related videos, linked over here
24:08
and subscribe to the channel for more videos just like this. Thank you very much for watching and have a good day
#Design
#Programming
#Skins
# Themes & Wallpapers
#Visual Art & Design