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

This article mainly introduces how to use the Grid layout of CSS to achieve the effect of squirrel stamps, the article is very detailed, has a certain reference value, interested friends must read it!

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

Height:63em

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%0104%0

}

.stamp:: after {

Left:1.5em

Background-repeat:repeat-x

Background-position:0-3% Jol 0103%

}

Add the dom element of the chicken to the html file, and the child elements represent ears, head, body, lower tail, upper tail, legs, and claws:

Set the row and column size of the grid layout:

.squirrel {

Display:grid

Grid-template-columns:11.5em7em15.5em10.5em

Grid-template-rows:13em5em11.5em22.5em

Background-color:silver

Padding:2em

Margin-top:-2em

}

Draw a fan-shaped head:

.head {

Grid-column:1

Grid-row:3

Background-color:chocolate

Border-bottom-left-radius:100%

}

Draw the eyes with a radial gradient:

.head {

Background-image:radial-gradient (

Circleat58%22%

Black1.4em

Transparent1.4em

);

}

Draw fan-shaped ears:

.ear {

Grid-column:2

Grid-row:2

Width:5em

Background-color:bisque

Border-bottom-right-radius:100%

}

Draw a fan-shaped body:

.body {

Grid-column:2/4

Grid-row:4

Background-color:chocolate

Border-top-right-radius:100%

Position:relative

Overflow:hidden

}

Use pseudo elements to draw curled legs through shadows:

.body:: before {

Content:''

Position:absolute

Width:100%

Height:50%

Box-shadow:2em-2em4emrgba (0pd0re0re0pl 0.3)

Bottom:0

-w:calc ((7em+15.5em) / 2)

Border-top-left-radius:var (- w)

Border-top-right-radius:var (- w)

}

Draw small semicircular claws:

.foot {

Grid-column:1

Grid-row:4

Height:4em

Width:8em

Background-color:saddlebrown

Justify-self:end

Align-self:end

Border-radius:4em4em00

Filter:brightness (0.8)

}

Draw the lower part of the semicircular tail:

. tail-start {

Grid-column:4

Grid-row:4

-- h:calc (22.5em-1.5em)

Height:var (- h)

Background-color:bisque

Align-self:end

Border-radius:0var (- h) var (--h) 0

}

Draw the upper part of the semicircular tail:

. tail-end {

Grid-column:3

Grid-row:1/5

-- h:calc (13em+5em+11.5em+1.5em)

Height:var (- h)

Background-color:chocolate

Border-radius:var (-) 00var (--h)

}

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

Squirrel

Comehope

two hundred

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

}

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

}

The great task has been completed!

The above is all the contents of this article entitled "how to use CSS's Grid layout to achieve the effect of Squirrel Stamps". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.