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

1. Application de l'attribut box-shadow, format : h-shadow v-shadow flou de propagation de la valeur de l'attribut encart de couleur introduction h-sahdow : position de ombre horizontale, valeurs négatives autorisées

①v-shadow : La position de l'ombre verticale, les valeurs négatives sont autorisées

②blur : Distance du flou

③spread : La la taille de l'ombre, la distance d'expansion, peut être négative

④color : La couleur de l'ombre

⑤inset/outset : Ombre interne ou externe

2. La distance d'expansion de l'ombre est valable pour les quatre côtés et ne peut pas être appliquée à un seul côté.

3. box-shadow prend en charge les paramètres de plusieurs ensembles de valeurs pour prendre effet en même temps

Exemple de code :

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

2. Projection irrégulière

1 Pour les formes générées par border-radius, la projection est bonne, mais si pseudo-éléments. et des translucides sont ajoutés. Les performances de décoration et d'ombre sont très mauvaises et il y aura des problèmes dans les situations suivantes.

① Image semi-transparente, image d'arrière-plan ou image-bordure

② L'élément définit une bordure en pointillés, en pointillés ou translucide, mais n'a pas d'arrière-plan (ou le clip d'arrière-plan n'est pas une bordure- box Quand)

③ Il y a de petits coins à l'intérieur de l'élément qui sont générés à l'aide de pseudo-éléments

④ La forme générée par le chemin du clip

Solution : Utiliser l'ombre portée de svg pour obtenir

Exemple de code :

.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;
        }

4. Effet verre dépoli

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.

5. Effet de coin

É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;
    }

Remarque

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 !