Shulou(Shulou.com)06/01 Report--

This article is about how to use pure CSS to implement a card commemorating Chaplin. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Code interpretation

Define dom. The container contains three elements that represent a hat, a beard, and a walking stick:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

}

Define the container size and set the child elements to center horizontally:

.chaplin {

Width:40em

Height:30em

Font-size:10px

Background-color:#eee

Box-shadow:003emrgba (0Pert 00.2pm)

Display:flex

Flex-direction:column

Align-items:center

}

Define the default color, which is referenced later with currentColor:

.chaplin {

Color:#555

}

Draw the outline of the hat:

.chaplin {

Position:relative

}

.hat {

Position:absolute

Width:6.4em

Height:4.6em

Background-color:currentColor

Border-radius:2.3em2.3em00

Top:1.4em

}

Draw the brim of the hat with pseudo elements:

.hat:: before {

Content:''

Position:absolute

Width:10em

Height:0.8em

Background-color:currentColor

Border-radius:0.4em

Top:calc (100%+0.4em)

Left:calc ((100%-10em) / 2)

}

Draw the beard:

.beard {

Position:absolute

Width:1.5em

Height:0

Top:11.6em

Border:solidtransparent

Border-width:00.4em1em0.4em

Border-bottom-color:currentColor

}

Draw the stick of a walking stick:

.stick {

Position:absolute

Width:0.8em

Height:10.5em

Background-color:currentColor

Bottom:0

}

Use:: before pseudo element to draw the handle of the walking stick:

.stick:: before {

Content:''

Position:absolute

Box-sizing:border-box

Width:5.6em

Height:3em

Border:0.8emsolid

Border-radius:5.6em5.6em00

Border-bottom:none

Top:-3em

}

Modify the end of the handle with:: after pseudo elements to make it round and natural:

.stick:: after {

Content:''

Position:absolute

Width:0.8em

Height:0.8em

Background-color:currentColor

Border-radius:50%

Left:calc (5.6em-0.8em)

Top:-0.4em

}

Center the walking stick horizontally:

.stick {

Left:calc ((100%-(5.6em-0.8em)) / 2)

}

At this point, the abstract image of Chaplin is complete, and then typesetting his famous quote.

Add a .paragraph element to the dom and divide the sentence into three paragraphs:

Adaywithout

Laughter

Isadaywasted

Locate the text and arrange 3 paragraphs of text vertically:

.quote {

Position:absolute

Left:50%

Bottom:2.5em

Font-family:sans-serif

Text-transform:uppercase

Font-weight:bold

Display:flex

Flex-direction:column

}

Adjust the font size and spacing to align 3 paragraphs of text:

.quotespan:nth-child (1) {

Letter-spacing:0.05em

}

.quotespan:nth-child (2) {

Font-size:1.6em

}

Thank you for reading! This is the end of the article on "how to use pure CSS to realize a card commemorating Chaplin". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.