How to use pure CSS to realize a card commemorating Chaplin
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!
