Draw a pikachu

Pikachu

When I finished learning HTML and CSS, I thought I’d try it. After all, the proof is in the pudding. Just look at the things learned before how to master, and before the two master assigned a homework, but when doing a lot of things are not version, do not do well, it is better to pull it out and improve it

Let’s sort out the parts before we draw pikachu

  • First of all, we want to make sure that the layout of the entire page is absolutely centered, so that we don’t scatter our features all over the page, which we used hereDisplay: flex(Elastic layout),displayProperty specifies the type of box that the element should generate, whileflexProperty sets how space is allocated for children of an elastic box model object. If the element is not a child of an elastic box model object, the Flex property has no effect.
  • In the layout, I also want to give the whole thing a pikachu color, and then spread it all over the page, which we use herebackgroundTo indicate the color to be set, this is a background abbreviation property, you can set all background properties in one declaration, or you can use itbackground-colorTo specify the background color you want to use
body{
    background: yellow;display:flex;
  	width:50px;
    height:20px;
}
Copy the code
  • Once the layout is complete, we can begin to draw pikachu’s nose. We can draw a circle first and then cut out the sides of the circleborderProperty, which specifies the style, width, and color of the element’s border. The properties that can be set in this order are:Border-width, border-style, border-colorTo turn the square Angle of the nose into a curved fan, you can useborder-radiusTo set the outer border rounded corner of the element,
#nose{
    border:10px solid transparent
    position: absolute;border-radius:50%; }Copy the code
  • The eye part requires a pseudo-element::before,::after“, we can draw an eyeball first, and then use the border to make a border, but such eyes look dull. At this point, we need to draw the eyes with the appearance of glowing when we receive surprise, so we need to use the pseudo-element to draw the part to be superimposed above the eyes
.eye::before..eye::after{
    content: ' ';
    display: block;
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 15px;
    left: 8px;
    position: absolute;
    border: 2px solid black;
}
Copy the code
  • The blush area is similar to the eye area, draw a square first, then useborder-radiusSet the rounded corner of the border, we give it a value of 50%, so that it is exactly a circle, and then add a border to the blush.
  • The mouth is relatively complex, which is divided into two parts: the curved corners of the mouth and the tongue. First of all, let’s solve the part of the upper lip. Maybe we can draw a square first, and then useBorder - top: noneTo hide the unwanted edges for it, the mouth is also divided into left and right sides to draw, the whole mouth part we need to usez-indexTo superimpose the lip elements on top of the tongue, a positive z-index means the object will be above it, and a negative z-index means the object will be below it, specifying the order in which the elements are stacked
.upperLip{
    position: absolute;
    top:120px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1;
}
Copy the code
  • For the tongue let’s think about drawing a square and then usingborder-bottom-left-radiusPut a rounded border on the bottom left corner, and so on, put a rounded border on both corners of the tongue, but we’re going to have a long tongue, and we don’t want pikachu to be weird, so that’s what we’re going to useoverflowAttribute, this attribute is the content of the overflow of an element box, followed by the content you want to operate, here is definitely to make pikachu’s extra tongue disappear, so here we can useOverflow: hiddenTrim the tongue beyond the lips so it doesn’t appear.

Once we know the general structure of Pikachu, we can get started

The page layout

Having said that, what we want is for our features to be in the middle and not to be floating around on the web. How do we write it?

First we can use display: Flex to give the layout a perfectly centered effect,

attribute value
flex-direction Row: horizontally arranged from left to right (left-aligned)

Row-reverse: Sort from right to left, with the last item in front

Column: indicates the vertical array
justify-content Flex-start: Makes the child nodes in the Flex container to the left

Flex-end: places the child nodes in the Flex container to the right

Center: Center the child nodes in the Flex container

Space-between: Spread it evenly over this row, equal to flex-start if the remaining space is negative

Space-around: evenly distributed on this row, with half of the space between each side, equal to center if the remaining space is negative
flex-wrap Nowrap: The Flex container is a single row, which may overflow the container

Wrap: The Flex container is multi-line, the overflow will be placed in the new line, and line breaking will occur inside Flex
align-items Stretch: Is a default value for elements that are stretched to fit the container

Center: The element is in the center of the container

Flex-start: Element at the beginning of the container

Flex-end: Element at the end of the container

Now that we have the absolute center effect, we need to give pikachu a skin tone, so we can use background to give pikachu a color

value describe
background-color Specifies the background color to use
background-position Specifies the position of the background image
background-size Specifies the size of the background image
background-repeat Specify how to repeat the background image
background-origin The location area of the background image
background-clip The painted area of the background image
background-attachment Sets whether the background image is fixed or scrolls along the rest of the page
background-image Specifies which background images to use for spoof or multiple

Here I want to add a box model to the whole picture

The overall box model looks like this, but under the standard model, the width and height we give to the elements only apply to the content, and any other values for the inside margins and borders are set separately. Now that we know the layout of the page, we can start writing code

<body>
    <div id="box">
        
    </div>
</body>
Copy the code
#box{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 300px;
    width: 180px;
    position: relative;
}

#box::before.#box::after{
    box-sizing: border-box;
}


body{
    background: #ffe000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;    
}

Copy the code

eyes

For the eye, we first give it an absolute position using the position property

attribute value
position Absolute: Generates an absolute position relative to the first parent element other than the static position

Fixed: Generates fixed positioned elements relative to the browser window

Relative: Generates elements that are positioned relative to their normal position

Static: the default value

Sticky: sticky location based on the scrolling position of the user

Then I can start to draw a square with the same width and height, but the eyes are round, not square, so I use border-radius to set the outer border of the element rounded corners, and then I can color the eyes, the eyes should also have a border around it. So we use the border property to put a border around the inside shape, and then we use the top property to position the eye where the outside border is, so we are halfway done with the eye, and we also need to draw a point in the eye, In this case, pseudo-elements ::before, ::after are used to place the painting above the eye,

::before Inserts content in front of the selected element, usingcontentProperty to specify what to insert
::after The selector inserts content after the last child of the selected element, usingcontentProperty to specify what to insert

So here we use display: block to say what is the type of box

attribute value
display None: Indicates that the element will not be displayed

Block: indicates that the element will be displayed as a block-level element

Inline-block: represents a block element within a line

List-item: indicates that the element will be displayed as a list

Now that we’ve calculated these numbers, we also need to put the left and right sides of the eye in the right position, so we can say right: 50%, you might be wondering, why 50%, which attribute is it? At this point, you can go back to the front of the eye, what is the value of your top property set, the value set below will also be affected, and then we can start to draw the eyes, here we divide into the left and right eyes

<div class="eye eye-left"></div>
        <div class="eye eye-right"></div>
Copy the code
.eye{
    position:absolute;
    width: 60px;
    height: 60px;
    background-color: #2e2e2e;
    border:2px solid black;
    border-radius: 50%;
    top:65px;
}

.eye-left{
    right: 50%;
    margin-right: 90px;
}

.eye-right{
    left: 50%;
    margin-left: 90px;
}

.eye::before..eye::after{
    content: ' ';
    display: block;
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 15px;
    left: 8px;
    position: absolute;
    border: 2px solid black;
}
Copy the code

nose

Pikachu’s nose is an inverted triangle with rounded corners. At the beginning, I thought whether I could draw a fan or a square first, and then hide some of the extra patterns for it. Finally, we will use border-radius to modify the two corners of the nose, give the element a rounded corner of the outer border, and use % to define the shape of the corner, so we can write it like this

<div id="nose"></div>
Copy the code
#nose{
    border: 10px solid transparent;  
    position: absolute; 
    left:50%;
    top:90px; 
    transform: translateX(-50%); 
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid black;
    border-radius: 50%;
}
Copy the code

Cheek is red

The blush area is similar to the eye area. You can draw a square, then use border-radius to set the outer border of the element, and then surround it with a border. Here we will write the left and right sides.

<div class="face face-left"></div>
    <div class="face face-right"></div>
Copy the code
.face{
    position: absolute;
    border:3px solid black;
    background: red;
    top:180px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.face-left{
    right: 50%;
    margin-right: 130px;
}

.face-right{
    left: 50%;
    margin-left: 130px;
}
Copy the code

The mouth

Display: Flex to set an absolute center for the lips. Position: Absolute Generates an absolute position element, and justify-content: Center the child node in the Flex container. We also want to keep the lip part on top, otherwise it will be covered by the tongue when we draw the tongue later, so we can use z-index: 1 to try it, z – said the index attribute is specified for an element of the stacking sequence, followed by 1 said he is in the above, so that when the painting is not covered by the tongue, ready to do a good job, we can begin painting Pikachu mouth, here we draw according to habit or split into left and right sides, to draw a square, Then hide the unwanted lines at the top and near the nose with None, but all four corners of the square are right angles, so it’s clear that the corners of pikachu’s mouth won’t be a right Angle, So this way also need to use border – bottom – left – radius border – bottom – right – the radius to add a rounded corners of the mouth on both sides of the borders, let the corners of the mouth has a radian, here I used the two values, the first one is used for the radian of bottom border, The second one is for the arc of the left border, so we have a lip, but we want to make Pikachu happy, so we also use transform: rotateZ (-23deg) to rotate the mouth 23 degrees counterclockwise along the Z axis, and we have a lip.

attribute value
transform None: indicates that the definition is not converted

TranslateX (x%) : indicates that only the X-axis values are used for conversion

TranslateY (y%) : indicates that only the Y-axis value is used for conversion

TranslateZ (z%) : indicates conversion with the z-axis value

RotateX (DEG) : Represents 3D rotation along the X-axis

RotateY (DEG) : represents 3D rotation along the Y-axis

RotateZ (DEG) : Represents 3D rotation along the Z-axis

Skew (x-Angle,y-angle) : Defines 2D skew conversions along the x and y axes

After the lips are done we will draw the tongue. First I will draw a rough shape, here I will draw a square, then I will also use border-bottom-left-radius and border-bottom-left-radius to add a rounded border at the tip of the tongue. Pikachu also has a shadow near the lips, right? We can use box-shadow here to add that shadow, and we also want to make it curved, not a flat line, We can use border-top-left-radius and border-top-right-radius to set the shape of the rounded border. The box-shadow attribute adds one or more drop shadows to the box, separated by commas

attribute value
box-shadow H-shadow: Position of horizontal shadow. Negative values are allowed

V-shadow: Vertical shadow position. Negative values are allowed

I don’t have a blur

Spread: size of shadow

Color: The color of the shadow

Inset: Changes the inner shadow of the shadow from the beginning of the outer shadow

There is an important step here, after our tongue is drawn, it will be extremely long, longer than the skull, but what about the part beyond that we don’t want? We can use the overflow property here, and this property says that if something overflows that element’s box, the value behind it means you want to do something about that element. We don’t want it here, so let’s hide it with the hidden property

attribute value
overflow Visible: Indicates the default value, in which the content is not pruned and is rendered outside the element box

Hidden: The content is pruned, and the rest of the content is not visible

Scroll: The content will be trimmed, but the browser will display a scroll bar for viewing the rest of the content

Auto: If the content is trimmed, the browser displays a scroll bar to view the rest of the content

Inherit: Specifies that the overflow property value should be inherited from the parent element

Now let’s try to draw the mouth

   <div class="upperLip"></div>
        <div class="lowerLip-wrapper"> 
        <div class="lowerLip"></div>
    </div>
Copy the code
.upperLip{
    position: absolute;
    top:120px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1;
}

.upperLip::before{
    content: "";
    width: 80px;
    height: 26px;
    border: 3px solid black;
    border-top:none;
    border-right: none;
    border-bottom-left-radius: 80px 40px;
    transform: rotateZ(-23deg);
    background: #ffe000;
}

.upperLip::after{
    content: ' ';
    width: 80px;
    height: 26px;
    border: 3px solid black;
    border-top: none;
    border-left: none;
    border-bottom-right-radius: 80px 40px;
    transform: rotateZ(23deg);
    background: #ffe000;
}



.lowerLip{
    position: absolute;
    border: 3px solid black;
    bottom: 0px;
    height: 1300px;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
    border-top: none;
    border-bottom-left-radius: 100px 650px;
    border-bottom-right-radius: 100px 650px;
    border-top-left-radius: 100px 100px;
    border-top-right-radius: 100px 100px;
    background: #ff444f;
    box-shadow: inset 0 1145px 0 20px #9f000a;
}
.lowerLip-wrapper{
    position: absolute;
    width: 180px;
    top: 130px;
    height:160px;
    overflow: hidden;
}

Copy the code

Write in the last

First contact Pikachu quite excited, like the kind of feeling, to explore new things like this should be a very powerful great god can make even the days even dream is on the way to knock the code, just close your eyes on the mind is how to layout for each attribute, should be placed where is better, But then do this part of the mouth when I was feeling a little resistance, as if that it has not been control your tongue, and then slowly want to give up, sometimes in a place touched but no progress is really easy to lose patience, even to pick it up again will also feel a bit fidgety, think about how is it!

But finally did not give up it (boss does not give up the opportunity ha ha ha) to make it, some did not think of the place in some guidance under the modification, originally, I did not have the tongue of the redundant part to trim it off; Although I gave an absolute center effect in the page layout, but because the layout of the HTML in front of it was not good enough to cause it to become a decoration, so the back of the page when a zoom in and out is two pictures, or crowded into a group, or very apart; Originally, I didn’t put my lips at the top, so when MY tongue moved up, my lips disappeared. I thought I had learned CSS, but there was more to learn than just what was in the book. CSS is really an amazing thing, it can be transformed from nothing to nothing in a fraction of a second.