Use HTML and CSS to create your own warm man "Dabai"

Use HTML and CSS to create your own warm man "Dabai"

The final result is like this, isn’t it cute…

PS: It’s best if you have some knowledge of HTML and CSS, but it doesn’t matter if you are a newbie, it’s also okay for a newbie to meet a “newbie”!

1. Preparation

Go to the /home/shiyanlou/ directory and create a new blank document:

Name it Baymax.html (other names are OK, but the suffix must be .html):

Use gedit to open and prepare to edit the code:

2. Write HTML

Fill in the following code:

XML/HTML CodeCopy content to clipboard
  1. <!doctype html >   
  2. < html >   
  3.     < head > < meta   charset = "utf-8" > < title > Baymax </ title > </ head >   
  4. < body >   
  5.   
  6.       < div   id = "baymax" >   
  7.   
  8.          <!-- Define the head, including two eyes and mouth -->   
  9.          < div   id = "head" >   
  10.              < div   id = "eye" > </ div >   
  11.              < div   id = "eye2" > </ div >   
  12.              < div   id = "mouth" > </ div >   
  13.          </ div >   
  14.   
  15.          <!-- Defines the torso, including the heart -->   
  16.          < div   id = "torso" >   
  17.              < div   id = "heart" > </ div >   
  18.          </ div >   
  19.   
  20.          <!-- Defines the belly, including the cover (the connection with the torso) -->   
  21.          < div   id = "belly" >   
  22.              < div   id = "cover" > </ div >   
  23.          </ div >   
  24.   
  25.          <!-- Define the left arm, including two fingers, one large and one small -->   
  26.          < div   id = "left-arm" >   
  27.              < div   id = "l-bigfinger" > </ div >   
  28.              < div   id = "l-smallfinger" > </ div >   
  29.          </ div >   
  30.   
  31.          <!-- Define the right arm, also including two fingers, one large and one small -->   
  32.          < div   id = "right-arm" >   
  33.              < div   id = "r-bigfinger" > </ div >   
  34.              < div   id = "r-smallfinger" > </ div >   
  35.          </ div >   
  36.   
  37.          <!-- define left leg -->   
  38.          < div   id = "left-leg" > </ div >   
  39.   
  40.          <!-- define right leg -->   
  41.          < div   id = "right-leg" > </ div >   
  42.   
  43.      </ div >   
  44. </ body >   
  45. < html >   
  46.   

3. Add CSS styles

We have used HTML to define the various elements of "Dabai". Now we need to use CSS to draw its style appearance.

Since "Dabai" is white, we set the background to a dark color for easier identification.

Then first the head:

CSS CodeCopy content to clipboard
  1. body {
  2.      background : #595959 ;
  3. }
  4.   
  5. #baymax {
  6.      /*Set to center*/        
  7.      margin : 0 auto ;
  8.   
  9.      /*high*/       
  10.      height : 600px ;
  11.   
  12.      /*Hide overflow*/        
  13.      overflow : hidden ;
  14. }
  15.   
  16. #head {
  17.      height : 64px ;
  18.      width : 100px ;
  19.   
  20.      /*Define the shape of the rounded corners in percentage*/        
  21.      border -radius: 50%;
  22.   
  23.      /*background*/        
  24.      background : #fff ;
  25.      margin : 0 auto ;
  26.      margin-bottom : - 20px ;
  27.   
  28.      /*Set the style of the bottom border*/        
  29.      border-bottom : 5px   solid   #e0e0e0 ;
  30.   
  31.      /*Attribute sets the stacking order of elements; elements with a higher stacking order will always be in front of elements with a lower stacking order*/        
  32.      z-index : 100;
  33.   
  34.      /*Generate relatively positioned elements*/        
  35.      position : relative ;
  36. }
  37.   

Effect preview:

Let’s add the eyes and mouth!

CSS CodeCopy content to clipboard
  1. #eye ,
  2. #eye2 {
  3.      width : 11px ;
  4.      height : 13px ;
  5.      background : #282828 ;
  6.      border -radius: 50%;
  7.      position : relative ;
  8.      top : 30px ;
  9.      left : 27px ;
  10.   
  11.      /*Rotate the element*/        
  12. transform: rotate(8deg);
  13. }
  14.   
  15. #eye2 {
  16.      /* Make it rotationally symmetric */        
  17. transform: rotate(-8deg);
  18.      left : 69px ; top : 17px ;
  19. }
  20.   
  21. #mouth {
  22.      width : 38px ;
  23.      height : 1.5px ;
  24.      background : #282828 ;
  25.      position : relative ;
  26.      left : 34px ;
  27.      top : 10px ;
  28. }
  29.   

A mini "Dabai" takes shape:

Next up is the torso and abdomen:

CSS CodeCopy content to clipboard
  1. #torso ,
  2. #belly {
  3.      margin : 0 auto ;
  4.      height : 200px ;
  5.      width : 180px ;
  6.      background : #fff ;
  7.      border -radius: 47%;
  8.   
  9.      /*Set border*/        
  10.      border : 5px   solid   #e0e0e0 ;
  11.      border-top : none ;
  12.      z-index : 1;
  13. }
  14.   
  15. #belly {
  16.      height : 300px ;
  17.      width : 245px ;
  18.      margin-top : -140px ;
  19.      z-index : 5;
  20. }
  21.   
  22. #cover {
  23.      width : 190px ;
  24.      background : #fff ;
  25.      height : 150px ;
  26.      margin : 0 auto ;
  27.      position : relative ;
  28.      top : - 20px ;
  29.      border -radius: 50%;
  30. }
  31.   

Give "Dabai" a heart that symbolizes life:

CSS CodeCopy content to clipboard
  1. #heart {
  2.    width : 25px ;
  3.    height : 25px ;
  4.    border -radius:50%;
  5.    position : relative ;
  6.   
  7.    /*Add shadow effect around the border*/   
  8. box-shadow: 2px   5px   2px   #ccc   inset ;
  9.   
  10.    right right :- 115px ;
  11.    top : 40px ;
  12.    z-index :111;
  13.    border : 1px   solid   #ccc ;
  14. }
  15.   

Now the "Dabai" looks like this:

There are no hands or feet yet, so cute... "Dabai" needs a warm arm:

CSS CodeCopy content to clipboard
  1. #left -arm,
  2. #right -arm{
  3.      height : 270px ;
  4.      width : 120px ;
  5.      border -radius: 50%;
  6.      background : #fff ;
  7.      margin : 0 auto ;
  8.      position : relative ;
  9.      top : -350px ;
  10.      left : - 100px ;
  11. transform: rotate(20deg);
  12.      z-index : -1;
  13. }
  14.   
  15. #right -arm{
  16. transform: rotate(-20deg);
  17.      left : 100px ;
  18.      top : - 620px ;
  19. }
  20.   

No fingers yet:

CSS CodeCopy content to clipboard
  1. #l-bigfinger,
  2. #r-bigfinger{
  3.      height : 50px ;
  4.      width : 20px ;
  5.      border -radius: 50%;
  6.      background : #fff ;
  7.      position : relative ;
  8.      top : 250px ;
  9.      left : 50px ;
  10. transform: rotate(-50deg);
  11. }
  12.   
  13. #r-bigfinger{
  14.      left : 50px ;
  15. transform: rotate(50deg);
  16. }
  17.   
  18. #l-smallfinger,
  19. #r-smallfinger{
  20.      height : 35px ;
  21.      width : 15px ;
  22.      border -radius: 50%;
  23.      background : #fff ;
  24.      position : relative ;
  25.      top : 195px ;
  26.      left : 66px ;
  27. transform: rotate(-40deg);
  28. }
  29.   
  30. #r-smallfinger{
  31.      background : #fff ;
  32. transform: rotate(40deg);
  33.      top : 195px ;
  34.      left : 37px ;
  35. }
  36.   

A bit interesting:

Can’t wait to add legs to “Dabai”?

CSS CodeCopy content to clipboard
  1. #left -leg,
  2. #right -leg{
  3.      height : 170px ;
  4.      width : 90px ;
  5.      border -radius: 40% 30% 10px 45%;
  6.      background : #fff ;
  7.      position : relative ;
  8.      top : - 640px ;
  9.      left : - 45px ;
  10. transform: rotate(-1deg);
  11.      z-index : -2;
  12.      margin : 0 auto ;
  13. }
  14.   
  15. #right -leg{
  16.      background : #fff ;
  17.      border -radius:30% 40% 45% 10px ;
  18.      margin : 0 auto ;
  19.      top : - 810px ;
  20.      left : 50px ;
  21. transform: rotate(1deg);
  22. }
  23.   

duang~ duang~ duang~ Stunt completed!

Your sweetheart Dabai is here by your side, don’t you feel safe?

<<:  MySQL essential basics: grouping function, aggregate function, grouping query detailed explanation

>>:  Solution to web page confusion caused by web page FOUC problem

Recommend

Methods and techniques for designing an interesting website (picture)

Have you ever encountered a situation where we hav...

Detailed explanation of the commonly used functions copy_from_user open read write in Linux driver development

Table of contents Common functions of linux drive...

A detailed introduction to for/of, for/in in JavaScript

Table of contents In JavaScript , there are sever...

Detailed explanation of how to solve the problem that the docker container cannot access the host machine through IP

Origin of the problem When using docker, I unfort...

Implement group by based on MySQL to get the latest data of each group

Preface: The group by function retrieves the firs...

MySQL Quick Data Comparison Techniques

In MySQL operation and maintenance, a R&D col...

Docker compose deploys SpringBoot project to connect to MySQL and the pitfalls encountered

Earlier, we used Docker to simply deploy the Spri...

A brief analysis of the difference between FIND_IN_SET() and IN in MySQL

I used the Mysql FIND_IN_SET function in a projec...

HTML page common style (recommended)

As shown below: XML/HTML CodeCopy content to clip...

Public free STUN servers

Public free STUN servers When the SIP terminal us...

Brief analysis of the introduction and basic usage of Promise

Promise is a new solution for asynchronous progra...

How to build a new image based on an existing image in Docker

Building new images from existing images is done ...

A brief discussion on whether CSS will block page rendering

Maybe everyone knows that js execution will block...

Detailed tutorial on using Docker to build Gitlab based on CentOS8 system

Table of contents 1. Install Docker 2. Install Gi...

Commands to find domain IP address in Linux terminal (five methods)

This tutorial explains how to verify the IP addre...