This is the 8th day of my participation in the More text Challenge. For details, see more text Challenge

Ground glass effect

problem

One of the first uses of translucent colors is as a background. Stack it on top of a photo class or other fancy back layer to reduce contrast and ensure text readability. In traditional graphic design, the solution to this problem is usually to blur the part of the picture that is covered by the text layer.

With the blur() filter, we gain the ability to blur elements in CSS. If you use the blur() filter directly, the entire element will be blurred, making the text even more unreadable. Is there a way to apply this filter only to the back layer of an element (that is, the part of the background that is obscured by the element)?

The solution

Instead of blurring the element itself directly, a pseudo-element is processed and positioned below the element, and its background will seamlessly match the background of .

<style>
    body {
        min-height: 100vh;
        box-sizing: border-box;
        margin: 0;
        padding-top: calc(50vh - 6em);
        font: 150%/1.6 Baskerville, Palatino, serif;
    }

    body.main::before {
        background: url("1.jpg") 0 / cover fixed;
    }

    main {
        position: relative;
        margin: 0 auto;
        padding: 1em;
        max-width: 23em;
        background: hsla(130.72%.24%.0.25) border-box;
        overflow: hidden;
        border-radius:.3em;
        box-shadow: 0 0 0 1px hsla(0.0%.100%.3) inset,
            0 .5em 1em rgba(0.0.0.0.6);
        text-shadow: 0 1px 1px hsla(249.64%.23%.0.3);
    }

    main::before {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: -30px;
        z-index: -1;
        -webkit-filter: blur(20px);
        filter: blur(20px);
    }

    blockquote {
        font-style: italic
    }

    blockquote cite {
        font-style: normal;
    }
</style>

<body>
    <main>
        <blockquote>"The only way to get rid of a dilemma is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, With desire for what its laws have made photocatalysis and unlawful."</em>
            <footer>-<cite>Oscar Wilde, The Picture of Dorian Gray</cite></footer>
        </blockquote>
    </main>
</body>
Copy the code

Effect of Angle

problem

It has become a very popular decorative technique to treat one corner of an element (usually the upper right corner or the lower right corner) as a kind of angular shape, with more or less a quasi-object style.

Implemented methods usually work by adding two triangles in the upper right corner: a triangle to represent the shape of the fold, and a white triangle to cover one corner of the element to simulate the notch created by the fold. Both triangles are usually generated by the classic border technique.

However, when the Angle element is not solid color or Angle is not 45°, the existing solution is not satisfactory.

45° Angle bending solution

Create a 0.5em bevel cut in the top right corner of the rectangle with the code:

background: yellowgreen; /* Fallback style */
background:
    linear-gradient(-135deg, transparent 2em, yellowgreen 0);
Copy the code

All you need to do is add a dark triangle to make the folding effect. You do this by adding another gradient to generate the triangle and positioning it in the upper right corner so you can control the size of the fold using background-size.

background: yellowgreen; /* Fallback style */
background:
    linear-gradient(to left bottom,transparent 50%.rgba(0.0.0.4) 0) no-repeat 100% 0 / 2em 2em.linear-gradient(-135deg, transparent 2em, yellowgreen 0);
Copy the code

However, seeing that the folding Angle is not what you expect, the 2EM folding Angle size in the second layer of gradient is written in the color code, so it is measured along the gradient axis, is the diagonal size; The 2em length in background-size is the width and height of the background patch, which is measured in horizontal and vertical directions. So to align the two:

  1. To preserve the 2em length of the diagonal, multiply background-size by 2.
  2. To preserve the 2em length in both the horizontal and vertical directions, divide the angular gradient by 2\ SQRT {2}2.

Since background-size uses two lengths, it is more appropriate to use the second scheme, so its value is 22\frac{2}{\ SQRT {2}}2 2.

background: yellowgreen; /* Fallback style */
background:
    linear-gradient(to left bottom,transparent 50%.rgba(0.0.0.4) 0) no-repeat 100% 0 / 2em 2em.linear-gradient(-135deg, transparent 1.4 em, yellowgreen 0);
Copy the code

Alternative solutions

.note {
    width: 150px;
    height: 120px;
    position: relative;
    background: yellowgreen;
    /* Fallback style */
    background:
        linear-gradient(-150deg,
        transparent 1.5 em, yellowgreen 0);
    border-radius:.5em;
}

.note::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to left bottom,
        transparent 50%.rgba(0.0.0.2) 0.rgba(0.0.0.4)) 100% 0 no-repeat;
    width: 1.73 em;
    height: 3em;
    transform: translateY(-1.3 em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: inherit;
    box-shadow: -.2em .2em .3em -.1em rgba(0.0.0.15);
}
Copy the code

Mixins spelled

@mixin folded-corner($background, $size, $angle: 30deg) {
    position: relative;
    background: $background;
    /* Fallback style */
    background:
        linear-gradient($angle - 180deg,
        transparent $size, $background 0);
    border-radius:.5em;
    $x: $size / sin($angle);
    $y: $size / cos($angle);

    &::before {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;
        background: linear-gradient(to left bottom,
            transparent 50%.rgba(0.0.0.2) 0.rgba(0.0.0.4)) 100% 0 no-repeat;
        width: $y;
        height: $x;
        transform: translateY($y - $x) rotate(2*$angle - 90deg);
        transform-origin: bottom right;
        border-bottom-left-radius: inherit;
        box-shadow: -.2em .2em .3em -.1em rgba(0.0.0.2); }}/* When called... * /
.note {
    @include folded-corner(#58a, 2em.40deg);
}
Copy the code

One last word

If this article is helpful to you, or inspired, please pay attention to it. Your support is the biggest motivation for me to keep writing. Thank you for your support.