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

Three.js realizes Facebook Metaverse 3D dynamic logo effect

Table of contents background What is the Metavers...

How to use the Linux nl command

1. Command Introduction nl (Number of Lines) adds...

Problems and solutions encountered when deploying a project when upgrading the Mysql database from version 5.6.28 to version 8.0.11

The problems and solutions encountered when deplo...

Introduction to using Unicode characters in web pages (&#,\u, etc.)

The earliest computers could only use ASCII chara...

Mysql updates certain fields of another table based on data from one table (sql statement)

The following code introduces MySQL to update som...

How to quickly deploy Redis as a Docker container

Table of contents getting Started Data storage Co...

Detailed tutorial on building a JMeter+Grafana+Influxdb monitoring platform with Docker

We all know that Jmeter provides native result vi...

An example of how to query data in MySQL and update it to another table based on conditions

This article uses an example to describe how MySQ...

MySQL 5.7.23 decompression version installation tutorial with pictures and text

It is too troublesome to find the installation tu...

A brief discussion on the correct approach to MySQL table space recovery

Table of contents Preliminary Notes Problem Repro...

Navicat connects to MySQL8.0.11 and an error 2059 occurs

mistake The following error occurs when connectin...

How to configure Nginx domain name rewriting and wildcard domain name resolution

This article introduces how to configure Nginx to...

A brief discussion on several ways to pass parameters in react routing

The first parameter passing method is dynamic rou...

How to solve the problem of MySQL query character set mismatch

Find the problem I recently encountered a problem...

Design a simple HTML login interface using CSS style

login.html part: <!DOCTYPE html> <html l...