How to use CSS Grid layout to implement puppy stamps (source code attached)

The content of this article is about how to use CSS Grid layout to implement puppy stamps (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. helped.

Effect preview

Source code download

https://github.com/comehope/front-end-daily -challenges

Code Interpretation

Define dom, the container represents the stamp:

<div>
</div>

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;
}

Use a repeating background to draw the perforations of the stamp:

.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, teal 50%, transparent 50%),
    radial-gradient(circle, teal 50%, transparent 50%);
    background-size: 3.5em 3.5em;
}

.stamp::before {
    top: 1.5em;
    background-repeat: repeat-y;
    background-position: -4.5% 0, 104.5% 0;
}

.stamp::after {
    left: 1.5em;
    background-repeat: repeat-x;
    background-position: 0 -2.5%, 0 102.5%;
}

Add the dom element of the puppy to the html file. The sub-elements represent ears, head, eyes, tongue, body, tail and paws respectively:

<div>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

Set the row and column dimensions of the grid layout:

.puppy {
    display: grid;
    grid-template-columns: 10em 22.5em 8em;
    grid-template-rows: 21em 12.5em 3.75em 22.5em;
    background-color: tan;
    padding: 2em;
    margin-top: -1em;
}

Draw the puppy’s head, spanning the 1st and 2nd columns, 2nd and 3rd rows, as 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;
}

Use pseudo elements to draw the nose, which is a fan shape, and the excess 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 eye halo:

.eyes {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    position: relative;
    height: 10.5em;
    width: 21em;
    border-radius: 0 0 10.5em 10.5em;
    background-color: sienna;
}

Use radial Draw the eyes with gradient:

.eyes {
    background-image: radial-gradient(
        circle at 37% 33%,
        black 1.4em,
        transparent 1.4em
    );
}

Draw the semicircular ears:

.ear {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 10.5em;
    border-radius: 21em 0 0 21em;
    background-color: sienna;
}

Draw the 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 the fan-shaped body:

.body {
    grid-column: 2;
    grid-row: 4;
    background-color: sienna;
    border-top-left-radius: 100%;
}

Use pseudo elements to draw the squatting legs through shadows:

.body {
    position: relative;
    overflow: hidden;
}

.body::after {
    content: '';
    position: absolute;
    height: 50%;
    width: 100%;
    border-radius: 11.25em 11.25em 0 0;
    box-shadow: 2em 0 4em rgba(0, 0, 0, 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.5em 0 0 17.5em;
}

Draw a semicircular small paw:

.foot {
    grid-column: 3;
    grid-row: 4;
    align-self: end;
    height: 4em;
    background-color: bisque;
    border-radius: 4em 4em 0 0;
}

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

<div>
    <div>
        <!-- 略 -->
    </div>
    <p>
        <span>Puppy</span>
        <span>comehope</span>
        <span>80</span>
    </p>
</div>

Set the text style of 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 text style of the author:

.text .author {
    position: absolute;
    font-size: 3em;
    bottom: -1.2em;
    color: dimgray;
}

Set the text style of the face value:

.text .face-value {
    position: absolute;
    font-size: 14em;
    right: 0;
    line-height: 0.9em;
    color: darkcyan;
}

You’re done!

The above is the detailed content of How to use CSS Grid layout to implement puppy stamps (source code attached). For more information, please follow other related articles on the PHP Chinese website!