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

Editor to share with you how to achieve the Grid layout of CSS puppy stamps. I hope you will get something after reading this article. Let's discuss it together.

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:40.5em

Height:71em

Font-size:6px

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:-4.5%0104.5%0

}

.stamp:: after {

Left:1.5em

Background-repeat:repeat-x

Background-position:0-2.5% Personality 0102.5%

}

Add the puppy's dom element to the html file, and the child elements represent ears, head, eyes, tongue, body, tail, and claws:

Set the row and column size of the grid layout:

.puppy {

Display:grid

Grid-template-columns:10em22.5em8em

Grid-template-rows:21em12.5em3.75em22.5em

Background-color:tan

Padding:2em

Margin-top:-1em

}

Draw the dog's head, which spans columns 1 and 2, rows 2 and 3, and is a semicircle:

.head {

Grid-column:1/3

Grid-row:2/4

Border-bottom-left-radius:calc (12.5em+3.75em)

Border-bottom-right-radius:calc (12.5em+3.75em)

Background-color:bisque

}

Draw the nose with pseudo elements, which is a fan, and the extra part is hidden:

.head {

Position:relative

Overflow:hidden

}

.head:: before {

Content:''

Position:absolute

Width:7em

Height:7em

Border-bottom-right-radius:100%

Background-color:sienna

}

Draw a semicircular halo:

.eyes {

Grid-column:2

Grid-row:2

Justify-self:end

Position:relative

Height:10.5em

Width:21em

Border-radius:0010.5em10.5em

Background-color:sienna

}

Draw the eyes with a radial gradient:

.eyes {

Background-image:radial-gradient (

Circleat37%33%

Black1.4em

Transparent1.4em

)

}

Draw semicircular ears:

.ear {

Grid-column:2

Grid-row:1

Justify-self:end

Width:10.5em

Border-radius:21em0021em

Background-color:sienna

}

Draw a fan-shaped tongue:

.tongue {

Grid-column:1

Grid-row:3

Width:5.5em

Height:5.5em

Background-color:indianred

Border-bottom-left-radius:100%

}

Draw a fan-shaped body:

.body {

Grid-column:2

Grid-row:4

Background-color:sienna

Border-top-left-radius:100%

}

Use pseudo elements to draw squatting legs through shadows:

.body {

Position:relative

Overflow:hidden

}

.body:: after {

Content:''

Position:absolute

Height:50%

Width:100%

Border-radius:11.25em11.25em00

Box-shadow:2em04emrgba (0pd0re0re0pl 0.3)

Bottom:0

}

Draw a semicircular tail:

.tail {

Grid-column:1

Grid-row:4

Justify-self:end

Align-self:end

Height:17.5em

Width:8.75em

Background-color:bisque

Border-radius:17.5em0017.5em

}

Draw small semicircular claws:

.foot {

Grid-column:3

Grid-row:4

Align-self:end

Height:4em

Background-color:bisque

Border-radius:4em4em00

}

Add some more text to dom, including title, author, and face value:

Puppy

Comehope

eighty

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:sienna

}

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

}

After reading this article, I believe you have a certain understanding of "how to achieve puppy stamps in the Grid layout of CSS". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

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.