Effets visuels de l'application des nouvelles fonctionnalités CSS3

Cet article présente les effets visuels des nouvelles fonctionnalités de CSS3, notamment les ombres unilatérales, les projections irrégulières, les effets de chromosomes, les effets de verre dépoli et les effets de coins. L'implémentation spécifique est la suivante :

1, Ombre unilatérale

.wrap{
            width: 200px;
            height: 120px;
            background: yellowgreen;
            box-shadow: 2px 0px 4px -2px black,
                        -2px 0px 4px -2px black;
        }

2. Projection irrégulière

.wrap{
            width: 200px;
            height: 120px;
            border: 6px dotted yellowgreen;
            --box-shadow: 0px 0px 4px 0px black;
            -webkit-filter: drop-shadow(2px 0px 2px rgba(0,0,0,1))
        }

3. 🎜>1. En fonction de l'implémentation du filtre, appliquez les valeurs pertinentes de l'attribut de filtre pour ajuster la saturation, la luminosité et d'autres valeurs de l'image

2. . Implémentation basée sur min-blend-mode, rôle : réaliser le contenu et l'arrière-plan des éléments Et les éléments suivants sont "mixtes"

3 Implémentation de base du background-blend-mode, fonction : réaliser le mélange de l'arrière-plan. couleur et image de fond, image de fond et image

Exemples de trois situations Code :

.wrap1{
            width: 200px;
            height: 120px;
            overflow: hidden;
        }
        .wrap1 > img{
            max-height: 100%;
            max-width: 100%;
            -webkit-filter: sepia(1) saturate(4) hue-rotate(150deg);
        }

        .wrap2{
            width: 200px;
            height: 120px;
            background: hsl(335, 100%, 50%);
            overflow: hidden;
        }
        .wrap2 > img{
            height: 100%;
            width: 100%;
            mix-blend-mode: luminosity;
        }

        .wrap3{
            width: 200px;
            height: 120px;
            background-size: cover;
            background-color: hsl(335, 100%, 50%);
            background-image: url("../img/cat.png"); 
            background-blend-mode: luminosity;
        }

Principe principal de mise en œuvre : L'arrière-plan du pseudo-élément de contenu est le même que l'image de l'arrière-plan sous-jacent et ajoutez un filtre : filtre de flou. Notez que le flou ne peut pas être appliqué à l'arrière-plan sous-jacent, ni à l'arrière-plan de l'élément (cela rendra l'élément lui-même flou, rendant le texte invisible), et ne peut être utilisé que sur des pseudo-éléments. .

Le code est le suivant :

body{
    background: url("../img/cat.png") no-repeat;
    background-size: cover;
}
.wrap{
    position: relative;
    width: 500px;
    margin: 0px auto;
    padding: 10px;
    line-height: 1.5;
    background: hsla(0, 0%, 100%, .3);
    overflow: hidden;
}
.wrap::before{
    content: '';
    background: url("../img/cat.png") 0/cover fixed;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    filter: blur(20px);
    z-index: -1;
    margin: -30px;
}

Description du code : 1. Le corps et wrap pseudo-elements Appliquer la même image d'arrière-plan

2. Définissez la pièce jointe d'arrière-plan du wrap sur fixe, afin que l'image d'arrière-plan ne bouge pas avec le défilement

3. Définissez le pseudo-wrap -élément au positionnement absolu, et z-index Le niveau est seulement supérieur à l'arrière-plan

4 Utilisez le flou pour définir la taille du flou du pseudo-élément d'enveloppement

5. valeurs pour augmenter la largeur et utilisez overflow:hidden pour l'élément parent pour masquer le débordement et rendre l'arrière-plan plus réel.

Étapes de mise en œuvre

1. Utilisez d'abord un dégradé linéaire pour obtenir l'effet de coupe de coin 2, puis utilisez linéaire. -gradinet pour le générer Un triangle et définir sa position, sa largeur et sa hauteur

Le code est le suivant :

.wrap{
        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.4em, #58a 0);
        width: 200px;
        height: 120px;
    }

1. 100% 0/2em 2em positionne la position, la largeur et la hauteur de l'élément d'arrière-plan, en particulier la largeur et la hauteur de 2em sont les largeur normale de l'élément d'arrière-plan.

2. Le 1,4em dans le deuxième dégradé linéaire est mesuré le long de l'axe du dégradé, qui est la distance entre l'axe du dégradé et le bord supérieur de l'élément. l'axe du dégradé vers le bord supérieur droit.

3. vers le bas gauche signifie que le dégradé commence à partir du coin inférieur gauche

Ce qui précède est tout le contenu de cet article, j'espère que ce sera le cas. utile à l'apprentissage de chacun, et j'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés aux effets visuels des nouvelles fonctionnalités CSS3, veuillez faire attention au site Web PHP chinois !