Front-end daily combat: # 14 video demonstrates how to book its side effects one kind of pure CSS creation

Results preview

Press the "click Preview" button to the right of the current page preview, click on the link full-screen preview.

https://codepen.io/zhang-ou/pen/deVgRM

Interactive video tutorials

This video is interactive, you can pause the code video, editing video.

Please use chrome, safari, edge open view.

https://scrimba.com/c/cb6pkUE

Source code download

Please download from github.

https://github.com/comehope/front-end-daily-challenges/tree/master/014-three-languages-for-web-development

Code Reading

Define dom, a container comprising a span, with the text within the span:

<div class="book">
    <span>HTML</span>
</div>

Centered:

html, body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top left, white, dimgray);
}

Draw the front of the book:

.book {
    width: 12rem;
    height: 18rem;
    background: linear-gradient(navy, deeppink, tomato);
    transform: skewY(-10deg);
}

Draw the side of the book:

.book {
    position: relative;
}

.book::before {
    content: '';
    position: absolute;
    width: 1.5rem;
    height: 100%;
    background: linear-gradient(navy, deeppink, tomato);
    top: 0;
    left: -1.5rem;
    transform: skewY(45deg);
    transform-origin: right;
    filter: brightness(0.6);
}

Draw a top surface of the book:

.book::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1.5rem;
    background: white;
    top: -1.5rem;
    left: 0;
    transform-origin: bottom;
    transform: skewX(45deg);
    filter: brightness(0.9);
}

Book shaded to make it appear more three-dimensional:

.book {
    box-shadow: -10px 5px 30px rgba(0, 0, 0, 0.5);
}

Setting text style:

.book span {
    color: whitesmoke;
    font-size: 2.2rem;
    font-family: sans-serif;
    display: block;
    background: silver;
    text-align: center;
    height: 8rem;
    margin-top: 5rem;
    padding-top: 2rem;
    box-sizing: border-box;
    text-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
    position: absolute;
    width: 100%;
}

Draw the text side, similar to the method of painting the side of the book:

.book span {
    position: relative;
}

.book span::before {
    content: '';
    position: absolute;
    width: 1.5rem;
    height: 100%;
    background: silver;
    top: 0;
    left: -1.5rem;
    transform-origin: right;
    transform: skewY(45deg);
    filter: brightness(0.6);
}

Next add a line of text small font text:

.book span::after {
    content: 'development';
    display: block;
    font-size: 1rem;
}

dom books to 3, included in a container, and were named style classes:

<div class="books">
    <div class="book html">
        <span>HTML</span>
    </div>
    <div class="book css">
        <span>CSS</span>
    </div>
    <div class="book js">
        <span>JavaScript</span>
    </div>
</div>

3 book layout:

.books {
    display: flex;
    width: calc(12rem * 3 + 3rem * 2);
    justify-content: space-between;
    margin-top: 6rem;
}

.book:nth-child(2) {
    top: -3rem;
}

.book:nth-child(3) {
    top: -6rem;
}

3 color book:

.book.html span,
.book.html span::before {
    background: orange;
}

.book.css span,
.book.css span::before {
    background: yellowgreen;
}

.book.js span,
.book.js span::before {
    background: royalblue;
}

3 Set small font text book:

.book.html span:after {
    content: '<devolopment />';
}

.book.css span::after {
    content: '.devolopment::';
}

.book.js span::after {
    content: '{ devolopment }';
}

Finally, to increase the mouse across the book effect:

.book {
    transition: 0.3s;
}

.book:hover {
    margin-top: -1.5rem;
}

We're done!

Knowledge Point

• justify-content https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
• skewY () https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY
• skewX() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX
• transform-origin https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
• brightness() https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness