Interprétation détaillée des effets visuels dans l'application des nouvelles fonctionnalités CSS3

Table des matières

• Arrière-plan et bordure, première partie

• Arrière-plan et bordure, deuxième partie

• Formes

• Visuels

• Typographie

• Expérience utilisateur

• Structure et mise en page

• Transition et animation

• Téléchargement du code source

1. Ombre unilatérale

• Application de l'attribut box-shadow, format : h-shadow v-shadow flou propagation couleur encart valeur de l'attribut introduction

• h-sahdow : La position de l'ombre horizontale, les valeurs négatives sont autorisées

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

• flou : distance de flou

• étalement : la taille de l'ombre, la distance d'expansion, peut être négative

• couleur : la couleur de l'ombre

• encart/début : ombre intérieure ou extérieure

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

• box-shadow prend en charge les paramètres de plusieurs ensembles de valeurs pour prendre effet simultanément

• 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

• En utilisant la forme générée par border-radius, il est bon d'utiliser la projection, mais si des pseudo-éléments et la moitié sont ajoutés Pour une décoration transparente, les performances des ombres sont très mauvaises et il y aura des problèmes dans les situations suivantes. L'élément

• image translucide, image d'arrière-plan ou border-image

• est défini sur pointillé, pointillé ou bordure translucide, mais pas de fond (ou lorsque background-clip n'est pas border-box)

• Les petits coins à l'intérieur de l'élément sont générés à l'aide de pseudo-éléments

• Forme générée par le chemin du clip

• Solution : utilisez 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. Effet chromosomique

• Basé sur la mise en œuvre du filtrage Mirror, appliquer les valeurs pertinentes​​de l'attribut de filtre, ajuster la saturation, la luminosité et d'autres valeurs​​de la image

• en fonction de min- blend-mode Implémentation, fonction : réaliser le "mélange" du contenu de l'élément et de l'arrière-plan et des éléments suivants

• Implémentation de base du mode background-blend-mode, fonction : réaliser la couleur d'arrière-plan et l'image d'arrière-plan, l'image d'arrière-plan et le mélange d'images

• Exemple de code pour trois situations :

.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

Le principal principe 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 ajouter 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 d'un élément (cela entraînera le flou de l'élément lui-même, rendant le texte invisible). Il ne peut être utilisé que sur le pseudo . -élément .

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 :

• corps et pseudo-élément wrap La même image d'arrière-plan est appliquée

• la pièce jointe d'arrière-plan de wrap est définie sur fixe, de sorte que l'image d'arrière-plan ne bouge pas avec le défilement

• envelopper le pseudo-élément Régler sur positionnement absolu, et le niveau d'index z n'est que supérieur à l'arrière-plan

• Utiliser le flou pour définir la taille du flou du pseudo-élément wrap

• Utilisez des valeurs de marge négatives pour augmenter la largeur et utilisez overflow:hidden sur l'élément parent pour masquer le débordement, rendant l'arrière-plan flou plus réaliste.

5. Effet de coin

Étapes de mise en œuvre

• Utilisez d'abord un dégradé linéaire pour obtenir un coin. Effet de coupe

• Utilisez ensuite Linear-gradinet pour générer un triangle, et définissez 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

• 100% 0/2em 2em lors du positionnement de la position, de la largeur et hauteur des éléments d'arrière-plan, en particulier La largeur et la hauteur de 2em sont la largeur normale de l'élément d'arrière-plan.

• 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é en haut à droite La distance entre le haut du bord

• et le bas à gauche signifie que le dégradé commence à partir du coin inférieur gauche

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!