How to use Grid layout of CSS to realize Chicken Stamp
This article mainly introduces how to use CSS Grid layout to achieve chicken stamps, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.
Code interpretation
Define dom, and the container represents the stamp:
Centered display:
Body {
Margin:0
Height:100vh
Display:flex
Align-items:center
Justify-content:center
Background-color:teal
}
Set the container size:
.stamp {
Position:relative
Width:57em
Height:71em
Font-size:5px
Padding:5em
Background-color:white
}
Draw the perforation of the stamp with a repetitive background:
.stamp {
Display:flex
Flex-direction:column
Align-items:center
Justify-content:center
}
.stamp:: after
.stamp:: before {
Content:''
Width:100%
Height:100%
Position:absolute
Background:
Radial-gradient (circle,teal50%,transparent50%)
Radial-gradient (circle,teal50%,transparent50%)
Background-size:3.5em3.5em
}
.stamp:: before {
Top:1.5em
Background-repeat:repeat-y
Background-position:-3%0103%0
}
.stamp:: after {
Left:1.5em
Background-repeat:repeat-x
Background-position:0-2.5% Personality 0102.5%
}
Add the dom element of the chicken to the html file, and the child elements represent head, beak, body, tail, legs, claws, sun, and orange respectively:
Set the row and column size of the grid layout:
.rooster {
Display:grid
Grid-template-columns:22.5em13em1.75em14.5em4.5em
Grid-template-rows:12.5em14.5em15em8em5.5em
Background-color:wheat
Padding:2em
Margin-top:-2em
}
Draw a fan-shaped head:
.head {
Grid-column:4
Grid-row:2
Background-color:burlywood
Border-top-left-radius:100%
}
Draw the blush on the chicken's eyes and face:
.head {
Position:relative
}
.head:: after {
Content:''
Position:absolute
Width:2.8em
Height:2.8em
Border-radius:50%
Background-color:black
Right:30%
Box-shadow:2em4em4emrgba (255ppm 100pr 0pr 0.5)
}
Draw a fan-shaped beak:
.beak {
Grid-column:5
Grid-row:2
Height:4.5em
Background-color:darkorange
Border-bottom-right-radius:100%
}
Draw a semicircular body:
.body {
Grid-column:2/5
Grid-row:3
Width:30em
Background-color:saddlebrown
Border-radius:0015em15em
}
Use pseudo elements to draw wings through shadows:
.body {
Position:relative
Overflow:hidden
}
.body:: after {
Content:''
Position:absolute
Width:20em
Height:10em
Border-radius:inherit
Box-shadow:4em2em4emrgba (0pd0re0re0pl 0.3)
Left:calc ((30em-20em) / 2)
}
Draw a fan-shaped tail:
.tail {
Grid-column:1
Grid-row:1/3
Height:22.5em
Background-color:burlywood
Align-self:end
Border-top-left-radius:100%
}
Draw fan-shaped legs:
.leg {
Grid-column:4
Grid-row:4
Width:8em
Background-color:burlywood
Border-bottom-right-radius:100%
}
Draw small fan-shaped claws:
.foot {
Grid-column:4
Grid-row:5
Width:5.5em
Background-color:darkorange
Border-top-right-radius:100%
}
Draw a semicircle of the sun:
.sun {
Grid-column:3/5
Grid-row:1
Width:17em
-- h:calc (17em/2)
Height:var (- h)
Background-color:darkorange
Border-radius:00var (-) var (--h)
}
Draw round oranges and semicircular leaves. Note that the method of drawing the leaves here is different from that of the semicircle:
. orange-stuff {
Grid-column:1
Grid-row:3/6
Width:16em
Height:16em
Background-color:darkorange
Align-self:end
Justify-self:end
Border-radius:50%
Position:relative
}
. orange-stuff::before {
Content:''
Position:absolute
Width:8em
Height:8em
Background:linear-gradient (45 degmending transparent50% memorialsaddlebrown50%)
Border-radius:50%
Top:-6.8em
Left:10%
}
Add some more text to dom, including title, author, and face value:
Rooster
Comehope
one hundred and twenty
Set the text style for the title:
.text {
Position:relative
Width:calc (100%+2em*2)
Height:6em
Font-family:sans-serif
}
.text.title {
Position:absolute
Font-size:6em
Font-weight:bold
Color:brown
}
Set the author's text style:
.text.author {
Position:absolute
Font-size:3em
Bottom:-1.2em
Color:dimgray
}
Set the text style for the face value:
. text.face-value {
Position:absolute
Font-size:14em
Right:0
Line-height:0.9em
Color:darkcyan
}
Thank you for reading this article carefully. I hope the article "how to use CSS's Grid layout to achieve Chicken Stamps" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
