Create a Flat Illustration With CSS

1. Welcome: Hello. I'm Musharraf had rebel ago and I welcome you to my class today. We're going to be creating acute illustration using just CSS and HTML five. This is the illustration we will be creating from scratch. A cute cartoon woman. As you can see, it has a flat design. Looked at it. No. I'm going to show you how to make this In less than 15 minutes after this class, you will have understood that there's so much more you can do with CSS once you have mastered its basics. So what are you waiting for? Just open the next lesson and even dive right into the code. 2. Create the Face: Welcome back. We will be writing all our court on court pen, so just use your browser and go to court pen dot io You can sign in if you want to, but it's not really necessary here. Pressed the create button and select new pen. We won't be writing any JavaScript today, so just minimize this panel. The first thing you need to do is create a deaf element for the entire illustration. Now, you can type in all this HTML the old way, but I suggest that you use Emmett Instant because it is faster. So with Emmett, all you need to do to create a new development that has a class name is user dart, followed by the class name and then press tab. Next, inside this, let's create a new dove for the face. So again, press dot followed by face and dab. All right, now, inside the festive, we're going to create new developments for the ice. So I'm going to call them I want and I do. Now. Both the ice are going to share a lot of seasons properties. So let us add a common class to them. I'm going to call it I Okay, now we'll need a Dhofar knows. Similarly, we will need a dough for the mount. Okay, that's enough. It's demo for now. Let's write some CSS. The first thing I'm going to do is change the background color of the entire page to something a little more pleasing. So let's select the body of the page and use the background property. I'm going to go with a faint pinkish color on hash. F F E A F three is good for that. Now let's start working on the illustration, so select the person class. We must first set its position property. To related. This way, we will be able to position all the elements inside it more easily. Next, I'm going to place the illustration somewhere closer to the center of the screen. So just, say, 200 pixels from the top and 200 pixels from the left. You're free to use any other values here. All right, let's move on to the face. Let's say the face has over 200 pixels and the height off another 100 pixels that makes it a square. We still can't see the face, so give it a background color off hash F F c eight b three. This is a skin tone that most artists used these days. We don't want a complete square face, so let's round off its bottom two gardeners To do that, used the barter radius property and leave the top left and top right corners at zero pixels . But change the bottom left and bottom right corners to 50 pixels. As you can see, this is much better. Let's more onto the ice now. First, let's work on the common class called. I Give it a background color off hash. 880061 This is a nice purple color. The eyes are going to be much smaller than the face, so give them avert off 12 pixels and the hide off 12 pixels again. They are currently squares to make them perfect circles, give them a border radius off 50% and lastly, set the position Attribute toe Absolute because we want to be able to move them around. Okay, now let's work on the first. I all meaning to say here is set the top property to 45 pixels and the left property to 25 pixels. Similarly, select the second I and said it stopped property toe, 45 pixels and the left property to around 63 pixels. Feel free to are just these values. Still, your illustration looks correct. Okay, Now select the north class. This is going to be, Ah, 10 rectangle. So set its bit 28 pixels and its height 2 25 pixels. The color of the nose can be slightly pinker than the face. So I'm going to give it a background off hash FF 78 to again set the position property toe absolute. And then said the left to for these expenses and the top 2 50 pixels, I would again like to remind you these values don't have to be exact. You can experiment with them till your illustration looks correct to you. The North is now ready. Time to work on the mouth. Let's give it over Toff. 20 pixels and a height off 20 pixels. This is going to be a semi circle, so let us first give it a barter radius off 50%. We want this circle to be slightly tika, so use the barter property to give it a solid border off three pixels whose color is hash db four e 61 Okay, now said its position to absolute and move it such that it partially goes below the nose. A top off 60 pixels and the left off 37 pixels is good. At this point, we want to roughly cut off the top 70% of the circle. To do that, use the clip part property. Here, we're going to create a polygon that covers the bottom 30% of the circle. The first point of the polygon will be at X zero and why 70%? The next point will be at X 100%. And why a 70%. So this forms the topside off our polygon. The next point, which is the bottom right corner off our polygon, will be at X 100%. And why 100%? The last point, which is the bottom left corner of the polygon, will be at X zero. And why 100% and that's it. Are smiling. Face is complete. Go to the next lesson. Now where I show you how to draw the hair and the Tarso off our illustration 3. Create the Hair and Body: Welcome back to the final lesson of this class. Let's work on the hair of this woman. Now we're going to work on the hair in three different sections to inner hair sections, which will be on the face, and one outer hair section, which will be behind the face. So inside the face, Dev add a do for the first inner hair section. All the hair sections are going to have a lot off common properties, so let's say the common class for them is here. Next Creator Dove for the second inner hair section, okay, now outside the face to create a new dove for the outer hair section. All right, let's go to the CSS panel now selling the hair class and give it a background off hash F E five F 37 This is a nice orange color that will look good with the color of the face. Additionally, said the position Attribute toe absolute. Now select the first inner hair section. This is going to be, ah, large, perfect circle. So said it's vert and height 200 pixels and give it, ah, barter radius off 50%. That's nice. Now move it towards the top right corner of the face by giving it a top off negative 65 pixels and the left off 30 pixels. Let's more under the next inner hair section. This is also going to be rounded, but it wouldn't be an exact circle. So give it a word off 70 pixels and the height off 100 pixels again set the barter ideas to 50%. They should go towards the top left corner of the face, so give it a top off negative 50 pixels and the left off negative 30 pixels. These circles don't exactly look like here currently, and that's because they are going outside the festive to make sure that they are confined to the borders of the festive, go to the CSS of the face glass and add a property called Overflow said its value to hidden . This won't work unless you also said the position property of the face to absolute. And now this looks much better. Okay, we can now work on the outer hair section, select the outer hair section. This is going to be a square whose corners are rounded. It's what can be 1 20 pixels and high it can be another 1 20 pixels. Now this dough must be behind the face. Therefore, you must change its Zed Index property and set it to something negative. Minus two will do next. Let's position it correctly. So set the top two minus 30 pixels and the left to minus 10 pixels. Finally, we must make sure that the corners are rounded by using the barter radius property. We want the top two cardinals to be completely round, so use a value off 60 pixels for both, which is half of it of the square. We want the bottom corners to be only slightly rounded, so you the value off about 10 pixels. For them, Onda hair is ready. Now let's create the rest of this illustration. So, in the HTML window additive for the neck. Similarly, add a dough for the Tarso. Okay, back in the CSS section, select the next class. This is going to be a tall, rounded rectangle. So said it's with 2 20 pixels and its height to 50 pixels. The color of the neck must be slightly darker, so let's say it is hash F F 98 6 and now make its position absolute, so we can see it moving towards the center of the face and below it. By setting it stopped to 70 pixels and left to 40 pixels. This has to go behind the face. So Centered said in next toe minus two. Again, lastly, make its corners rounded with the radios off 10 pixels by using the barter radius property , we're almost done. All we need to do next is apply styles to the Tarso de so selected and give it overt off. 1 20 picks is and hide off 1 30 pixels. Next set its color toe, another shade of pink. This time it can be hash FC. Foresee 60 again make its position absolute and said it stopped 200 pixels and left toe minus 10 pixels. They should go behind the neck. So centered, sitting next to minus three, which is a value that is less than the said index off the neck and finally used the border radius property to make sure that the shoulders are fully rounded. Art, 60 pixels and optionally make the bottom corners slightly rounded by setting their areas to 10 pixels, and that's it. Are cured illustration is ready you now know how to use simple CIA's the styles to create beautiful, flat illustrations. If you like this class, please do complete the class project. It's gonna be good practice for you. Thank you for watching a master of hot available.