Visual effect

  1. projection
  2. Irregular projection
  3. The dyeing effect
  4. Frosted glass effect
  5. Effect of Angle

1 the projection

Box-shadow: horizontal offset Vertical offset Fuzzy distance Extended radius color inset

Unilateral projection

css

.item1 {
    background:  #9198e5;
    box-shadow: 0 0 0 10px # 000;
}
.item2 {
    background:  #9198e5;
    box-shadow: 0 10px 0 0  # 000 ;
}
.item3 {
    background:  #9198e5;
    box-shadow: 0 10px 5px 0  # 000 ;
}
.item4 {
    background:  #9198e5;
    box-shadow: 0 10px 5px -5px  # 000 ;
}
Copy the code

Box-shadow is an underlying background that can be moved around according to x and y, with additional blur effects. The fourth value can be understood as the radius of expansion and contraction in or out

After a single axis move, set an extra blur distance and then zoom in the same distance to get a single shadow

Adjacent side projection

.item1 {
    background:  #9198e5;
    box-shadow: 10px 10px 15px -10px  # 000 ;
}
.item2 {
    background:  #9198e5;
    box-shadow: -10px -10px 15px -10px  # 000 inset;
}
Copy the code

The expansion radius determines the width of the solid color display

Bilateral projection

Two unilateral projections superimposed

.item1 {
    background:  #9198e5;
    box-shadow: 
        10px 0 5px -5px  # 000 ,
        -10px 0 5px -5px  # 000 ;
}
Copy the code

Irregular projection

Problem description

For dotted border, corner cutting effect and clipping path introduced in the previous chapter, the transparent part or no shadow effect will be ignored by default when adding shadows

The solution

Filter: the filter: drop – shadow ()

.item1 {
    background:  #9198e5;
    position: relative;
    border-radius: 10px;
    box-shadow: 5px 5px 10px  # 000;
}
.item1::before{
    content: ' ';
    position: absolute;
    top:20%;left: 100%;
    width: 10%;
    height: 20%;
    background: inherit;
    clip-path: polygon(0 0.100% 50%.0 100%);
}

.item2 {
    background:  #9198e5;
    position: relative;
    border-radius: 10px;
    filter: drop-shadow(5px 5px 10px  # 000);
}
.item2::before{
    content: ' ';
    position: absolute;
    top:20%;left: 100%;
    width: 10%;
    height: 20%;
    background: inherit;
    clip-path: polygon(0 0.100% 50%.0 100%);
}
.item3{
    border:10px dashed #58a;
    box-shadow: 5px 5px 5px  # 000;
}
.item4{
    border:10px dashed #58a;
    filter: drop-shadow(5px 5px 5px  # 000);
}
Copy the code

The effect

Drop-shadow () does not extend the radius or inset. You can add a shadow to any non-transparent part of the text. Text with a transparent background will also have a shadow

3 Dyeing Effect

Problem description

To add a color effect to a grayscale image, switching between different images adds an additional HTTP request to try to process a single image

Filter based scheme

Single filter can not be achieved, use a combination of multiple filters

.item1 {
    background: url(./img.png) 0 0 /100% 100%;
    filter: sepia(1);
}
.item2 {
    background: url(./img.png) 0 0 /100% 100%;
    filter:  saturate(4); }.item3 {
    background: url(./img.png) 0 0 /100% 100%;
    filter:  hue-rotate(295deg);
}
.item4 {
    background: url(./img.png) 0 0 /100% 100%;
    filter: sepia(1) saturate(4) hue-rotate(295deg);
}
.item4:hover..item4:focus{
    filter: none;
}

Copy the code

  • Dark brownsepia()
  • saturationsaturate(4)
  • Hue rotationhue-rotate()

Hybrid mode based solution

Nested element background blending, single element multi-background blending

.item1 {
    background: hsl(335.100%.50%);
}
.item1 >img{
    width: inherit;
    height: inherit;
    mix-blend-mode: luminosity;
}
.item1:hover{
    background-color: transparent;
}
.item2{
    background:
        url(./img.png) 0 0 /100% 100%.hsl(335.100%.50%);
    background-blend-mode: luminosity;
}
.item2:hover{
    background-blend-mode: normal;
}
Copy the code

The effect

4 Frosted glass effect

Problem description

.item1 {
    background: url(./img.png) center/ cover ;
}
.item1 main{
    background: hsla(0.0%.100%.3);
}

.item2 {
    background: url(./img.png) center/ cover ;
}
.item2 main{
    background: hsla(0.0%.100%.5);
}

.item3 {
    background: url(./img.png) center/ cover ;
    filter: blur(2px);
}
.item3 main{
    background: hsla(0.0%.100%.5);
}
Copy the code

If the opacity is too low, the content will not stand out easily. If the opacity is too high, the content will be blurred by blue()

The solution

Use background-attachment: fiexd to add a false element to the child element. The background of the child element is the same as the background of the parent element

Place the pseudo-element below the child element and above the parent element so that the solid background of the parent element can be covered without blocking the child element content

Blur () is set to the pseudo-element, adjust the margin to spread out, and overflow: Hidden is set to the child element to remove the excessive blur effect. You can adjust the transparency of the background of the child element to achieve different frothed glass effects

css

.item1 {
    background: url(./img.png) 0/ cover fixed;
    z-index: -10;
}
.item1 main{
    position: relative;
}
.item1 main::before{
    content: ' ';
    position: absolute;
    top:0;right: 0;bottom: 0;left:0;
    background: rgba(255.0.0.5);
    z-index: -1;
}

.item2 ,.item2 main::before{
    background: url(./img.png) 0/ cover fixed;
    z-index: -10;
}
.item2 main{
    position: relative;
    background: hsla(0.0%.100%.1);
}
.item2 main::before{
    content: ' ';
    position: absolute;
    top:0;right: 0;bottom: 0;left:0;
    filter: blur(20px);
    z-index: -1;
}

.item3 ,.item3 main::before{
    background: url(./img.png) 0/ cover fixed;
    z-index: -10;
}
.item3 main{
    position: relative;
    background: hsla(0.0%.100%.1);
    overflow: hidden;
}
.item3 main::before{
    content: ' ';
    position: absolute;
    top:0;right: 0;bottom: 0;left:0;
    filter: blur(20px);
    z-index: -1;
    margin: -30px;
}
Copy the code

The effect

The idea: Add a layer between the parent and child elements, and blur the layer separately

Other methods

Backdrop – filter filter, can be set in the bottom of the element without interlayer and fixed background can achieve the effect of frosted glass, transparency can only set elements

Corner effect later updates…