Up next in 10
I Drew Myself With CSS
626 views
Feb 7, 2024
"I Drew Myself With CSS" is a captivating video where the creator demonstrates the process of using CSS (Cascading Style Sheets) to draw a self-portrait. Throughout the video, viewers witness the artist skillfully manipulating CSS properties to create various shapes, colors, and gradients, ultimately forming a detailed representation of themselves. The tutorial provides valuable insights into leveraging CSS for artistic expression, showcasing how versatile CSS can be beyond its traditional role in web development. Whether you're a web designer looking to expand your CSS skills or an artist seeking a new medium for self-expression, this video offers inspiration and practical techniques for creating art using code.
View Video Transcript
0:00
Recently, I lost to Kevin Powell in a CSS battle, and I decided that I needed to redeem myself
0:05
so I decided to create myself with CSS, and in this video, I'm going to show you exactly how I did it
0:14
Welcome back to WebDev Simplified. My name's Kyle, and my job is to simplify the web for you
0:19
so you can start building your dream project sooner. So if that sounds interesting, make sure you subscribe to the channel for more videos just like this
0:25
Now as you can see on the right hand side, we have the final version of what we're going to be creating
0:30
I think it at least somewhat looks like me. I'm not really an artist, so forgive me on the artsiness of it, but the CSS is really solid and really interesting to take a look at
0:38
because it requires tons of different CSS skills that you don't normally see or use that often, but are really important to understand
0:46
So get started creating this. Obviously, we're going to need some index.html. So let's create that HTML file
0:51
And we're just going to call this with the title of Kyle here, because, you know, it's me
0:55
And then let's link in here a style sheet. We're just going to call it styles. CSS
1:01
Let's create that styles.css. And then let's open this up with Live Server, so it shows up on the right
1:07
It's just going to be a blank screen because obviously we haven't done anything yet. Now, before we get started, I kind of want to think about what the design of this is going to look like
1:15
As you can see, we have a bunch of different parts of the body that we need to encapsulate into one single set of HTML
1:21
So the most obvious thing is we have a head. So, just going to create a div with the class head, and that's going to be essentially this
1:28
palish-colored, skin-colored circle that you can see here, that's the head. That's what this class is going to be, and it's going to contain all of our other elements
1:35
The next thing that we're going to have is going to be our hair. So we're going to have a hair element. We're going to have some eyes, and inside of the eyes, we're going to have two different
1:43
eye classes. The reason that I'm doing this right now is because if we have a single class that encapsulates
1:48
both of our eyes, we can move our eyes based on this eyes class, instead of having to move each
1:53
I individually, we can position them with one single class instead of doing it on each class
1:57
individually. It just makes it a little bit easier to work with. Same logic, we're going to have
2:01
some eyebrows. I'm going to use a browse class as well as two separate brows inside of that
2:07
browse class. Same exact thing we did with the eyes. If we really want, we can put this up here
2:11
above the eyes just so it can kind of flow from top to bottom. Next, we have a nose here
2:15
and we have a mouth. So let's get both of those. We can have a nose. And we can have a mouth
2:21
And then the final thing that we're going to have is just our ears. And ears are going to be the exact same as the other things where we had a wrapper class of ears
2:29
to help us position both of them vertically so they line up. And then each individual ear can be positioned by its ear class
2:35
And that right there is pretty much all the HTML we're going to need. It's just a bunch of empty divs that we can style, add background colors, add different sizes to
2:42
inside of our CSS. So when we save, you're going to notice no actual changes are made
2:46
And that's just because we haven't styled any of it yet. That's what the style sheet is going to be really useful for
2:51
And the first thing I like to do in pretty much any project is I like to set up my box sizing
2:55
So if we just select everything here, our before and after elements, we can set our box sizing
3:01
to be border box. And it just makes it so much easier to work with sizing of every element
3:05
And if you're confused with what border box is, I have a tutorial that's going to cover it exactly
3:09
I'll link up in the cards or description down below. And the next thing I want to do is center this element in the middle of our screen
3:15
And a really easy way to do that is if we say display flex, and we have here, justify
3:21
content in the center, line items in the center, and all we need to do is make sure that our width
3:28
is 100 view width, and our height is 100 view height. That's just going to make sure that this
3:33
element is centered in the dead center of our screen. And if, for example, we take our head class
3:37
here and just give it a little bit of style so we can see it, let's just say background red
3:43
height, 100 pixels, width, 100 pixels. And if we come over here, you can see that we have this
3:50
red cube centered. And just to get rid of the scroll bars, set our margin to zero, and there cube centered. And just to get rid of the scroll bars, set our margin to zero, and there
3:55
we go, we have a red cube right in the dead center of our screen. Now the only other thing I want to do is just get a dark background color going. So our background color here is going
4:03
to be this blue hue, which is 200, 50% saturation, and only 12% lightness, which is going
4:08
to give us a really dark blue color, which we're going to use as the background. That way we can have the rest of our CSS elements contrast pretty well with this dark background
4:16
so that they show up as opposed to a white background, which would kind of get blurred with the light skin tone on my face. So back over to the working example we have. Our head is clearly not going
4:25
to be red. So let's give it an actual good looking skin tone. For my example, I used 19 as a hue
4:31
76% as the saturation and 88% as lightness. This gives me this fairly good looking skin tone
4:38
a fairly light pinkish-looking color. Now as for sizing on this, it's a bit of experimentation
4:43
but most heads are slightly taller than they are wide. So we're going to have, for example, a width
4:48
which is 300 pixels, and then our height we just want to be slightly bigger than that
4:51
So, for example, 340 pixels. That's going to give us a shape. If we look over here, that's vaguely head shaped, obviously very cube head shaped
4:59
but it's still a little bit of like an eggish shape, and most heads are kind of that egg shape
5:03
So to give our head a little bit of rounding, we can just use border radius. And originally when I did this, I used 100% border radius because I thought, you know
5:11
that's a pretty normal looking head shape. But actually, when it comes to adding hair onto the top of the head
5:16
you need the top of the head to be much more flat than the bottom of the head because that's where
5:20
your hair is going to go and you need to be able to fill all that space with your hair so your head
5:23
is not going to be really round otherwise in this example if i did 100% the head would start to cut off
5:28
here and not go all the way up to where the hair is so instead of doing 100% border radius all the way
5:33
around we want the top border radiuses to only be 70% and then we'll use 100% on the bottom sides
5:39
and that's going to give us a little bit more of a head shape here as you can see the top is less
5:43
round than the bottom. Again, more of like an egg shape where the top is less rounded and the
5:47
bottom is more rounded. Now the only other thing love to do with the head is I want to center
5:52
everything on the element because as you can see pretty much everything is going to be positioned
5:56
based on the center. The eyes are almost always in the dead center of someone's face and everything
6:00
else kind of follows that middle line of centeredness. As you can see the nose and the mouth are centered along the axis here and the ears are centered with the eyes. So if you just center
6:09
everything, it makes it so much easier to position everything. So we can use display flex
6:14
justify content in the center, and align items in the center. And this is just going to center
6:19
all of the elements inside of our head, which in our case is literally everything, which is going to
6:23
make styling and positioning everything so much easier. So let's move on to the eyes, since they're
6:28
the first thing that you think of when you look at a face, and they're generally going to be one of the easier things to create. So we have our eyes container, and then we have each one of our
6:37
individual eyes. And this eyes container, is purely going to be for positioning the eye element, and then these eye classes are going to be for
6:44
styling out each of the eyes. Now before I start positioning both of the eyes, I just want to start styling the eyes
6:50
Let's just get us really simple here. Background color of red, height, 100 pixels, width, 100 pixels, just so we can see what we're
6:59
working with. We should have one square right in the middle. Or actually, we have two squares because they're positioned right directly on top of each other
7:04
Perfectly fine. We're not worried about position yet. So the first thing I want to do is get these in the correct sense
7:09
sizing that we want. If we look over here, the eyes are obviously whiter than they are tall
7:14
So we want our height to be smaller than our width. And again, this will take some experimentation
7:18
but in my case, I found 40 pixels and 65 pixels to look pretty good. And that's going to give
7:23
the shape over here. And if we just give them a little margin so we can see, this is our two
7:28
different eye shapes that we have right next to each other, stacked on top of each other. And that's a
7:32
fairly good eye shape. We just need to get that rounding of the corners in place. And actually
7:36
We can get away with just doing a completely 100% border radius, and that's going to give us this nice oval shape, which looks pretty good for the eye
7:44
It's the same thing that we have over here. Now the next step is obviously to change this background color from red
7:50
We're going to change this to white because the eyes are white. That looks much better And also I want to add some eye lids to these eyes at the top and at the bottom As you can see over here we have eyelids on the top and bottom that are kind of this darker color this darker pinkish brown color And it actually pretty simple to do We can just
8:06
use a border on the top and bottom to give us that effect. So we could say, for example
8:10
border top, and we could give it a three pixel solid border. And we just need to choose a
8:16
color. I'm going to choose almost this exact same color. So I'm going to choose the same hue
8:19
I'm going to choose here a slightly less saturated color, so we use 46%
8:24
It's a little bit of a darker, grayer looking color. And then we're going to change here the lightness to 68%
8:29
So it's not only darker, but also less pinkish looking. If we save that, you can see we get that eyelid on the top
8:36
We can copy the exact same thing for the bottom, and now we have an eyelid on the top and the bottom, and it looks pretty good
8:41
If you want, you can make the eyelid on the bottom a little bit less, or you can make the eyelid on the bottom bigger
8:46
It really doesn't matter. It's all up to personal preference at this point. But in my opinion, I think it looks about best when the eye load on the top and the bottom look about the same
8:55
So this is most of the code that we need for creating our eye. Obviously, we don't have the pupil yet or any of the coloring inside the eye
9:02
Those are going to be pseudo elements that I'm going to add in later. But first, I want to position the eyes so that it looks a little bit less like this crazy-looking stacked cyclops
9:10
So to position our eyes, generally on a human face, the distance between your eyes is about the same size as one of your eyes
9:17
So I just want to take the width of my eyes, which is 65 pixels, multiply by 3, and that's the width of our eye container, which in our case is 195 pixels
9:26
Then to make it so these elements are side by side next to each other, we can use a display of flex, and as you can see they're going to be positioned side by side
9:34
We can remove our margin for now as well. And then to space them out from each other, we can just justify our content with space between
9:41
It's going to put as much space between them as possible, and that spaces our two eyes out as you can see
9:45
and we have those really demented alien-looking face right now. Also, one thing that's pretty important is I want to make sure I position this element absolutely
9:53
And the reason of doing that is that I have all these other elements, these eyebrows, I have the nose, the mouth, the ears, the hair
9:58
All of this is all inside of the head, and I want all of them to be dead center. So I position all of them absolutely
10:04
They're just going to stack right on top of each other instead of stacking above or below each other
10:08
which is exactly what I want. I want them all to be on the exact same position. Later, I can remove this and show you what I'm talking about once we start styling things like the hair
10:15
So with our eye, the next step is going to be working on the pupil and the actual coloring
10:20
in the eye. So we're going to have our before element, and we're going to have here the after element
10:28
One of these is for the pupil and the other one is for the color. Now inside of here, we just need to make sure we put content as nothing
10:34
And if you're kind of confused by pseudo elements, I have a full tutorial on them. I'll link in the cards and description down below
10:39
We also want to position this absolutely, again, just so we can get everything stacking on top of each other
10:44
And in order to see what we're looking at, let's just put in here a width of, let's say, 40 pixels, a height of 40 pixels, and a background color, oops, background, color of red
10:56
And let's see, there we go. Now we have this red square, which is going to represent the color portion of our eye
11:01
And in my case, the color that I chose that matched my eyes somewhat was this 78 for the hue
11:07
We had 10% as the saturation, so fairly gray looking, and then 42% for the lightness
11:12
And if I save, it kind of gives us this greenish, grayish-looking color, which is somewhat matching my eye color
11:17
It's difficult to choose an exact color, especially when you're limited by, you know, CSS colors
11:22
And the next thing I want to do is center this. So to center it, we're just using our eye here. We can change the display to flex, justify our content in the center, and align our items in the center
11:31
And that'll center everything, just like this, as you can see. And then to make this a circle, we'll just use border radius of 100%
11:39
And that gives us a circle. But one thing I want to do is make my green portion of my eye slightly taller than the rest of my eye
11:45
So we're going to actually use 41 pixels for the width and height. It's just going to make it slightly bigger
11:50
And then for the eye itself, I just want to set overflow to hidden. That way, the eye doesn't actually overflow its container
11:56
One thing you'll notice, though, is that actually didn't make any difference. It's still overflowing, and that's because I first need to set the position of my eye to relative
12:04
And there we go. Now you can see that the green portion of my eye that's outside of the eyelids is now being cut off by this overflow
12:10
hidden, which is exactly what we want. Now the next step is to work on the actual pupil
12:15
I'm going to copy this down because we're going to have very similar colors here. Here I just want to have like this grayish black color, not completely black because it's too
12:21
harsh, but this grayish black color of 333 looks pretty good. We obviously want the pupil to be much smaller, so I'm going to use about 15 pixels
12:29
If I save, you can now see we have a pupil in this under the eyes. But since the eyes are staring directly at you, it kind of is really creepy, almost
12:35
doll-like looking, and it doesn't really look good in my opinion. It's just kind of scary looking
12:39
So what I did in this example is just offset the eyes a little bit
12:43
To make it look like this character is looking up into the top right corner of the screen
12:47
it just makes it look a little bit less frightening and scary and doll-like, as you can see here
12:51
So to do that, we just use some simple margin. I'm going to say the margin on the left is 10 pixels
12:57
and the margin on the bottom is 5 pixels. As you can see, that's going to offset this green portion of the eye up into the top right
13:04
And to make the black portion of the eye follow the pupil, let's just do the exact same thing. margin on the left we use 15 pixels so that it offsets a little bit further to really emphasize the fact you're looking in that direction
13:15
And then we'll have the margin on the bottom also be slightly further with seven pixels
13:20
That again emphasizes the fact that you're looking off into this direction now you can see that this eye setup makes it look like I'm looking up into the top right corner as opposed to staring directly into your soul which is very off putting
13:31
Now that right there pretty much covers everything to do with the eyes you can see they're exactly the same between these two examples
13:36
And the next thing I want to work on is this brow, this eyebrow, because it actually follows very similar code to the way that the eye
13:42
especially the eyelids work. It's going to be almost exactly the same. So we can select each one of our individual brows to style them
13:50
And to make these eyebrows, I want them to essentially be the same exact width as my eye, which is 65 pixels
13:55
And for the height, you can kind of play around with this number. The more you change it, the thicker or thinner you can make your eyebrow
14:01
But in my case, I ended up going with the height of 32 pixels because it gives us a nice thick-looking eyebrow approach
14:05
and my eyebrows are pretty thick. And then what we need to do is actually give it the color
14:10
So instead of doing like a background color and then applying something like a, you know
14:14
width and height, what we're going to do is just apply a border. And that's because, as you can see
14:18
we have this nice rounded look to our eyebrows. And this is actually really easy to achieve
14:22
if you use just a border. So instead of here, a background color
14:26
we're going to use border on the top. And we're going to make it a 10 pixel border, which is going to be about 10 pixels wide of eyebrow space
14:33
We want it to be solid. And we want the HSL here to just be the, brownish color, which I chose for my hair, which is 27, 33% for the saturation, and 28
14:42
for the lightness. Now if we save this, you'll see we get these nice straight brown marks
14:47
Obviously not quite what we're looking for, but that's okay because we can change this
14:51
and make it rounded by just applying a border radius of 100%
14:58
Now if we save this, you can see that these kind of have this rounded eyebrow look, and by changing the height, for example, we change this to 12, you can see that we can make these eyebrows
15:05
more or we can make them less rounded. So this is much more rounded with a larger height
15:09
or, you know, with this height of 32, it follows the roundness very closely to our actual
15:14
eye itself. Also, we could change this border on the top to make them thinner eyebrows
15:18
or we can make them really thick eyebrows. It really depends on what you're trying to create
15:22
In my case, I think this looked pretty good. So now to position these eyebrows, actually we're
15:27
just going to use this exact code right here for eyes. We can just hop on the brows class
15:31
here because the brows are very similar to the eyes. They're wrapped in this browse class
15:36
and we know the eyebrows are the exact same distance apart as the eyes are. So we can just copy
15:41
this exact code. And if we save, you can notice that it doesn't quite work. That's because
15:45
the eyebrows are actually appearing behind the eye. If we move this browse below the eye
15:51
we can actually see that there the eyes are or the brows are I sorry they appearing right behind the eye Clearly that not quite what we looking for So what we need to do is just offset our brows by adding a little bit of margin on the bottom
16:03
In our case, a margin of 35 pixels is going to put them in about the place that we want them to be
16:08
And again, we could change this. We can make it much closer to the eye. We can make it further away from the eye
16:13
We could even make it really far away from the eye, make it look like you're kind of shrugging your eyes up. It's entirely up to you
16:17
You can really play around with this and even animate it to give your character a little bit more
16:21
life-like face. But in our case, we're just going to stick with 35, kind of just a normal looking
16:27
no expression, no animation eyebrow. Now the next step is going to be the nose. And honestly
16:32
on pretty much every face, the nose is by far the most difficult thing to draw, at least for me
16:36
I went through multiple different iterations of noses before I landed on this one, which is fairly
16:40
simple. It's not too crazy. It doesn't look too bad, in my opinion. It's definitely not amazing
16:45
but it's assible. This is what we're going to build out. And it's a fairly straightforward design
16:49
As you can see, we have this rounded bottom, and then these straight sides. And again, the best way to do this is just with borders
16:55
We can use borders to get these rounded sides. And then, of course, we can remove the border from the top to give it this nice kind of U-shaped look
17:02
So let's go back to our actual design, select our nose class. And inside of here, what I want to do is first get the position of this
17:09
and we're just going to set it to an absolute position, so we can have it, you know, not overlapping anything else on our screen
17:15
Then instead of using a background color, we're again going to use a border in this example
17:19
We're going to use a 4-pixel border, which is solid. We're going to use this exact same color that we used up here for the eyelids
17:26
It's the exact same thing. So let's just select that hue. You could use these as CSS variables as you want
17:31
It would probably even be better. But in our case, we're just hard-coding each one. So this is going to give us a nice little cube shape here
17:38
But obviously, we want more than a cube. We want this to be essentially a U-shaped
17:42
So to give us this U-shape that we have over here, we just need to add some height and some width
17:46
So let's just come in here. We can say the width is going to be. 40 pixels, and the height is 30 pixels. Now as you can see, we have this really square-ish
17:56
rectangle-shaped object right in the center of our face. Not very nose-like yet, we need to add the
18:01
rounding on the bottom. So to do that, let's say our border radius is going to be 0% rounded
18:06
on the top, but 100% rounded on the bottom. Now you can see we have this U shape, which is going
18:12
to be perfect for our nose. The last thing to do is just take the border on the top, remove that
18:18
and that's going to give us the U shape as opposed to having it connect, which looks so much better
18:23
And then if we just set some margin on the top, in our case, 100 pixels looks pretty good
18:27
and brings us down to about where we want. But again, you can play around with this number. Make it a really low nose
18:32
You can make it a much higher up nose. It's entirely up to you, but 100 pixels looks generally good, in my opinion
18:39
Now, the last thing on the actual main face is going to be the mouth, and this is going to be another one that's fairly straightforward to construct
18:45
because, again, if you look at the mouse, You can see that it's very similar shape to the nose, actually just slightly less rounding on the bottom and a little bit more rounding on the top
18:53
And you can see we kind of have our lips being constructed. And that's just, again, by using borders
18:58
So a combination of border and border radius is going to give us exactly what we want
19:01
This kind of combines what we do with our nose and what we did with our eyes into one single element
19:06
That's going to give us this interesting mouth shape. So to get started, first thing, obviously, position absolute, just so they stack on top of each other
19:14
We're going to have a width here. In our case, 100 pixels, I think, is going to look pretty good, and a height, which is going to be 40 pixels
19:20
And just to see this actual shape, we're going to set our background here to white
19:25
If we save that, you can see at the top here, we have our mouth. And now, just to move it down a little bit, but say that our margin on the top here, it's going to be 225 pixels that just moves it down into place
19:35
Again, you can play around with this number. Make it 200 pixels, make it a little higher, make it 250, so it's really low
19:40
I just think 225 looks about right. So this is our mouth shape
19:45
Now what we need to do is actually curve it into the correct shape. There's a lot of different ways that you can do this
19:50
So obviously border radius is going to be what we want. We have our top values, and then we have our bottom values
19:56
And for our top, we don't quite want it to be zero-zero. Because if we do zero-zero and 100%, 100%
20:02
you can see it has a very sharp edge right here when the mouth goes to the top section
20:06
I'd prefer to have it curve a little bit like it does here. It just gives rid of some of that sharpness
20:10
So we're going to use 20% and 20% here. And it gives just a very slight curve, which makes it a little bit more gentle to look at
20:18
and not quite as abrupt of a change. And that gives us the mouth look, which looks really good
20:23
Now to add in the lips, that's going to be just our border. So we're going to create a border, which is going to be four pixels, solid, and we're going to use that color
20:31
which is that peachy, darker color. Now if we save that, you can see we have this dark border going around everything
20:37
This is obviously a bit too thick, though, especially on the sides. So on the left and right, I want to just change the border left width to be one pixel
20:45
I want to do the exact same thing on the right side as well
20:49
And that's going to make those sides much smaller. And even I think the border on the top, that width should also be smaller, something maybe like two pixels
20:58
That's going to give us a much better look where the bottom lip is the biggest, because on a face the bottom lip is bigger
21:03
The top lips a little smaller. And then these sides just have the different coloring there, more so for shading than anything
21:09
It just kind of gives it a little bit more. depth. And that pretty much covers the mouth. So the next thing I want to move on to is actually
21:14
the ears. Because the hair is by far the hardest thing to style. It's so much easier to style
21:19
the hair once you have the rest of the face designed, especially the ears because it really
21:23
places where the hair is going to go on the head and how far down things like sideburns are
21:27
going to go. So ears, we know we have a wrapper class, and then we just have each individual
21:33
ear itself. In this ear's wrapper class, we essentially want to be whiter than the head because
21:37
because we want the ears to poke out on the side of the head. And our head, we scroll all the way up to our head class, we decided it is 300 pixels
21:45
We want this ears class to be wider than our head. So let's set the width here to like 340 pixels
21:52
And that is going to give us essentially enough space to fit two ears that are about 20 pixels wide
21:56
I also want to make sure that I position this, absolutely, and I use that same trick where we display
22:01
flex and we justify our content with space between. and it's going to space our ears out from each other as far as possible
22:09
If we just make our ears here a width of 20 pixels, a height of, let's say, 50 pixels for now
22:16
and we just say background red, we can see that we have these two ears on the sides of our face
22:21
But you'll notice something interesting. There's this blue color that kind of seeps in behind the face
22:25
If I zoom in really far, and I zoom out a little further because that was too far
22:29
you can see this blue color kind of seeping in outside of the ear. The ear is just slightly too thin
22:34
It needs to be slightly wider. If we do 25 pixels, you can see now the ear is fully overlapping the face, which is exactly
22:40
what we want. So in order to get the actual ear to be behind the face, let's just take our ears, set the Z-index
22:47
to negative 1. That's going to make it so the ears appear behind the face, and obviously that makes sense
22:52
because the ears should never be in front of your face. Now, in my opinion, these ears are a little bit too short
22:58
Let's bump up these height here to 70 pixels. That looks a little bit better, especially as we start to round these corners
23:03
and to round them, we're just going to again use border radius. And this time we want to round the left or the right side
23:10
So we're going to start by rounding just one set of them. So the 100% and 0
23:15
As you can see, that's rounding the right set of our ear, but obviously our left ear doesn't quite look right
23:20
So we just say ear first child. This is going to give us our left ear
23:25
We can take our border radius and just completely flop it. So we can have the right be 0 and the left be 100%
23:32
And now that gives us a nice curved look. for our ear on the left side and the right side
23:36
As for the background, we need to make this very similar to our skin color, but if we make
23:40
it exactly our skin color, the ears kind of blend in. So what I want to do is actually just make it slightly darker
23:46
If I just change this lightness from 88 to 85 that gives us just a hair darker on the ears which makes it look a little better because the ears are further back than the front of your face so it shades them a little bit and it not so dark that they look completely different as in they not even attached to your body So it a very similar
24:01
color, just slight shading to make them appear like they're not a directly part of the face
24:07
Also, I want to add a little bit of a border around the ears to really accentuate them
24:10
so we'll say two pixels, solid, and we're going to use that exact same skin tone color
24:16
that we use, that darker skin tone. Let's just copy that. And
24:20
If we save, you can see we get a little border around the ears, kind of to represent that little flap that you have on your ears
24:25
That's what this border is representing for us. Now that pretty much covers everything except for the hair
24:30
As you can see, these two elements have the exact same things on them except for the hair
24:34
But of course, the hair is the hardest thing to style because it's one of the largest element
24:38
and it's one of the most distinguishing features for a lot of people. So to style our hair, we have this nice hair class that we can use, and the hair here is just going to be a rectangle
24:46
You can imagine, forget about the sideburns, but you can imagine this top part, the straight line is, it's just a rectangle that has some rounding on the top
24:53
So in order for us to actually get this effect, what we need to do is first just create a
24:57
rectangle shape that's going to be as wide as the head. So what we can do here is we can say that the width of our hair is going to be 300 pixels
25:05
and the height can be really anything. We just are going to use 125 because that's about the right shape
25:11
Then we can set the background color equal to our hair color, which is the same that we used
25:16
on our eyebrows. So let's just copy that in. And you can see, we now have what appears to be a right
25:20
really ugly mask, but is really going to be our hair. So of course, let's move the hair upward
25:25
Let's do a position of absolute on it first. In order to move it up, we just need to set the margin
25:31
on the bottom of 300 pixels. It's going to move the hair up to a position that I think actually
25:37
looks pretty good on the face. Obviously, this square haircut is super ugly, so we want to round it a little
25:42
bit. And the first thought that you may have is, okay, well, we're going to just do a border radius
25:46
of 100%. But of course that doesn't quite look good, so maybe you think, oh, we'll only do a border radius of 100% on the top
25:54
And that's going to give us kind of this bowl-ish shape. But obviously, this is not what my haircut looks like
25:59
It's a little bit taller on one side and a little short on the other. So what we need to do is make the border radius on one side slightly less
26:05
and it will appear taller. So if we take this border radius down to 50%
26:09
you'll see that this side rounds less, which means it actually goes up higher on the head
26:14
while this side rounds more, so it swoops kind of down. So it gives a little bit of a swooping effect
26:18
which is about what my hairstyle looks like. So this right here looks pretty good
26:23
But you'll notice, the hair kind of looks more like a hat than anything because it's tearing off the edge of my face
26:27
and it really just kind of looks like it was plastered on there and not actually a part of the actual face itself
26:32
In order to get around this, we're going to do two things. The first thing we're going to do is add sideburns onto the side of the face
26:38
That's just going to make the hair connect much more to the actual head, which is really important
26:42
And to do that, we can actually use before and after elements. So we can say before
26:47
And we can come in here with the hair after. And, of course, content is going to be an empty string
26:55
Position is absolute, so we can position them properly. And we want to have the background color be the same as our hair color
27:02
So let's just get that hair color here. And then finally, we need to create a size for these things
27:08
So height on this is going to be about 100 pixels. That'll bring it down to about where our ears are
27:12
And that looks good. That's why we did our ears first, so we know how far down to bring our sideburns
27:17
And then for the width, we want it to be fairly small, so we're going to use about 10 pixels
27:21
but again, it's something you can experiment with. So if we save this, you're going to notice these rectangles appear on the left side over
27:27
here, and that's not quite where we want them. We want them to actually appear way down here
27:30
We want to translate them all the way so that the top portion of it is all the way at the bottom of the hair
27:35
There's two ways we can do that. We can set the top to 100 pixels. That's going to move it all the way down
27:40
Or we could do a transform. where we translate the Y direction negative 100%
27:46
actually positive 100%, and that'll again move it down by its whole height
27:49
which is 100 pixels. Either way works, it's entirely up to you. Now right now, both of our hair is on this left side of the face
27:56
So what we want to do is just take our hair, one of them, we'll choose after in this case
28:01
set the right to zero, and that's going to move one of them all the way over to the right-hand side
28:05
So now we have the two looking sideburns, which looks pretty good, but one important detail is missing
28:10
It looks very boxy. As you can see, where the sideburns hit the hair, it's like a hard edge, 90-degree angle
28:16
And nothing else on our face has these hard 90-degree angles. So we want to move these 90-degree angles
28:21
We want to get rid of them completely. And the best way to do that, at least that I found, was just to add these nice little short angles
28:27
that alleviate that 90-degree angle and give you a little bit more of a curved look
28:31
It's not a true curve, but it's close enough, and it looks pretty good in this case
28:35
And we've already run out of suit elements. We only have two. So to do this, we just need to go to our actual hair here here
28:40
We need to add some classes that are going to be for our corners. We're going to call them hair corner
28:45
We're going to have two of these, one for the left and one for the right. And actually, instead of doing two separate hair corners, we're just going to use one
28:52
and we're just going to use pseudo elements to style these. Very similar to how we did browse with the two elements inside of it
28:57
We're going to use hair corner, and then two pseudo elements inside of that for our spacing. So in here, we can select our hair corner, make sure that we do position absolute
29:06
just like we've done on everything else. and the width, I just want to be 100%, so it's the entire width of our hair
29:12
We could manually set it to 300 pixels, but 100% is going to do the exact same thing
29:17
Then, if we just gave this some color, so we could see it, we said background, red, and we give it like a random height of 100 pixels, you'll see that if we go over here
29:24
we just have, you know, this giant red square on the top of our head. That is the space that this hair corner is taking up, which is exactly what we want
29:30
Obviously, we don't need a height or a background color so we can remove those, but we know that it's taking up this full width
29:35
And the next thing to do is actually to style these hair corners. So we're going to use before and after elements again
29:40
So we can say before. And we can have our hair corner after
29:47
And of course, make sure I spell corner correctly. And this is actually the trickiest part of the entire design
29:53
because it was a lot of trial and error for me to get the piece exactly the right size
29:56
that it looked substantial enough you could see it, but not too big that it was overflowing off the page, for example
30:02
So in my case, we'd of course need content, empty, position absolute, so we can position
30:08
these properly, and what I chose was a width of 14 pixels and a height of 20 pixels
30:14
And like I said, it was just a bunch of trial and error for me. But to give us this nice little edged look, this 45 degree angle, we can do a transform
30:21
where we just rotate this element 45 degrees just like that, and that's going to give us a
30:27
slightly rotated look. And of course, background color on this, we're going to set to red for
30:32
now just so we can see these elements, but we're going to change it to brown as soon as we get
30:36
them in the right position. So as you can see, both of them are right here in the same position, and that's fine
30:41
Once we position one, we'll work on positioning the other one. So what we can do is just play around with our top value
30:47
We know if we set it to 100 pixels, it'll bring it all the way down to essentially the bottom
30:50
of the hair. If we want to move it a little further, we can do something like 115, and it's going to move it down
30:55
a little bit further onto the face, which looks pretty good. Now, to move it inward from the sideburns, we can just set a left value, and I just
31:02
chose half the value of the sideburns. So five pixels. As you can see, that lines up really well
31:07
without actually going off the page at all. So then what we can do, you just come down here
31:12
say here, corner, after. This is going to be the one that's going to be on the right set of our
31:16
screen. So we'll set right to five pixels. And you know that those, that actually doesn't do
31:20
anything. And that's because our left needs to be reset to its initial value. Now that's been
31:25
moved over to the right. What we can do is just rotate it. The other direction, so we'll do
31:29
negative 45 degrees and now you can see that that section looked really good as well
31:33
All we need to do is change the background color here to be our hair color, just like this
31:37
Now you can see those hair corners line up really well. And that's all it takes to create me with CSS. If you enjoyed this video
31:44
make sure check on my other CSS drawing style videos linked over here and subscribe to the channel
31:49
for more videos just like this. Thank you very much for watching and have a good day
#Design
#Online Goodies
#Online Media
#Skins
# Themes & Wallpapers