This is the 16th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

Ground-glass effects follow

Before introducing how to generate a parallelogram, one of my previous posts used pure CSS to generate ground-glass effects. This property.

So first of all, let’s take a look at what the Backdrop filter is.

Let’s take a look at the effect, which is shown below, and it’s pretty good.

Complete code:

<! DOCTYPEhtml>
<title>Ground glass effect</title>

<body>
    <div class="background-box">
        <div class="txt-box">Context-backdrop: Backdrop -filter: blur(20px);</div>
    </div>
</body>
<style>
    .background-box {
        width: 800px;
        height: 600px;
        background: url("https://cdn.pixabay.com/photo/2021/07/12/19/49/landscape-6421773__340.jpg") 0 / cover fixed;
        /* background-attachment: fixed; * /

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .txt-box {
        z-index: 2;
        width: 600px;
        height: 400px;
        font-size: 20px;
        font-weight: bold;
        /* background: hsla(0, 0%, 100%, .3); * /

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(20px);
    }

</style>

</html>
Copy the code

So far, we have learned a simple way to generate frosted glass effect!! Thank Forx – Js.

parallelogram

There’s a transform function called skew, and there’s also skewX and skewY, so let’s see what happens.

But there is a serious problem that the text also deforms with the whole deformation, so how to make the text not change, only the graphics change? According to the idea in the ground-glass article, we set the colored graph as the pseudo-element of z-index: -1, the next layer of the text element, and use the skew function to distort the pseudo-element, while the DOM of the text itself remains unchanged. Here is the effect:

The source code is as follows:

<! DOCTYPEhtml>
<title>parallelogram</title>
<body>
    <div class="box">
        skewX(-45deg)
    </div>
</body>
<style>
    body {
        width: 100%;
        height: 100vh;

        Centered / * * /
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .box {
        height: 200px;
        width: 400px;
        font-size: 30px;

        Centered / * * /
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        transform: skew(0.0);
        
        position: relative;
        border: 1px solid black;
        
    }
    .box::before {
        animation: skew 3s infinite;
        background-color: lightblue;
        content: ' '; /* Use pseudo elements to generate a rectangle */
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: -1;
        background: lightblue;
    }

    @keyframes skew {
        from {
            transform: skewX(0);
        }

        to {
            transform: skewX(-45deg); }}</style>
</html>
Copy the code