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

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!

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.