Detaillierte Interpretation visueller Effekte bei der Anwendung neuer CSS3-Funktionen

Inhaltsverzeichnis

• Hintergrund und Rand Teil Eins

• Hintergrund und Rand Teil Zwei

• Formen

• Visuals

• Typografie

• Benutzererfahrung

• Struktur und Layout

• Übergang und Animation

• Quellcode-Download

1. Einseitiger Schatten

• Anwendung des Box-Shadow-Attributs, Format: H-Shadow V-Shadow Blur Spread Color Inset-Attributwert-Einführung

• h-sahdow: Die Position des horizontalen Schattens, negative Werte sind zulässig

• v-shadow: Die Position des vertikalen Schattens, negative Werte sind zulässig erlaubt

• Unschärfe: Unschärfeabstand

• Spreizung: Die Größe des Schattens, Ausdehnungsabstand, kann negativ sein

• Farbe: die Farbe des Schattens

• Einsatz/Anfang: innerer oder äußerer Schatten

• Der Ausdehnungsabstand Die Darstellung des Schattens gilt für alle vier Seiten und kann nicht nur auf eine Seite angewendet werden.

• box-shadow unterstützt Einstellungen für mehrere Wertesätze, die gleichzeitig wirksam werden

• Beispielcode:

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

2. Unregelmäßige Projektion

• Die durch den Randradius erzeugte Form ist gut zu verwenden Projektion, aber wenn Pseudoelemente und Hälften hinzugefügt werden Bei transparenter Dekoration ist die Schattenleistung sehr schlecht und es treten in den folgenden Situationen Probleme auf.

• transluzentes Bild, Hintergrundbild oder Randbild

• -Element ist auf gepunktet, gepunktet eingestellt oder durchscheinender Rand, aber kein Hintergrund (oder wenn background-clip kein border-box ist)

• Kleine Ecken innerhalb des Elements werden mithilfe von Pseudoelementen generiert

• Durch Clip-Pfad generierte Form

• Lösung: Verwenden Sie den Schlagschatten von SVG, um

• <🎜 zu erreichen >Beispielcode:

.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. Chromosomeneffekt

• Basierend auf der Filterspiegelimplementierung, Wenden Sie die relevanten Werte des Filterattributs an, passen Sie die Sättigung, Helligkeit und andere Werte des

  Bilds

• basierend auf den Mindesteinstellungen an. bl

  End-Modus-Implementierung, Funktion: Realisieren Sie das „Mischen“ von Elementinhalt und Hintergrund und den folgenden Elementen

• Grundlegende Hintergrund-Mischmodus-Implementierung, Funktion: Hintergrundfarbe und Hintergrundbild, Hintergrundbild und Bild mischen realisieren

• Beispielcode für drei Situationen:

.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. Milchglaseffekt

Das Hauptimplementierungsprinzip: Der Hintergrund des Inhaltspseudoelements ist derselbe wie das Bild des darunter liegenden Hintergrunds und fügt Filter hinzu: Unschärfefilter. Beachten Sie, dass die Unschärfe nicht auf den darunter liegenden Hintergrund und auch nicht auf den Hintergrund eines Elements angewendet werden kann (dies führt dazu, dass das Element selbst unscharf wird und der Text unsichtbar wird). Es kann nur auf dem

-Pseudo verwendet werden -element .

Der Code lautet wie folgt:

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

Codebeschreibung:

• Körper und Wrap-Pseudoelement Das gleiche Hintergrundbild wird angewendet

• Wraps Hintergrundanhang ist auf „Fest“ eingestellt, sodass sich das Hintergrundbild beim Scrollen nicht bewegt

• Pseudoelement umschließen Auf

  absolute Positionierung eingestellt, und die Z-Index-Ebene ist nur höher als der Hintergrund

• Verwenden Sie Unschärfe, um die Unschärfegröße festzulegen des Wrap-Pseudoelements

• Verwenden Sie negative Randwerte, um die Breite zu erhöhen, und verwenden Sie overflow:hidden für das übergeordnete Element, um den Überlauf auszublenden, wodurch der unscharfe Hintergrund realistischer wird.

5. Eckeffekt

Implementierungsschritte

• Verwenden Sie zunächst den linearen Gradienten, um eine Ecke zu erreichen Schnitteffekt

• Dann verwenden Sie linear-gradinet, um ein Dreieck zu generieren und legen Sie dessen Position, Breite und Höhe fest

• Der Code lautet wie folgt:

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

Hinweis

• 100 % 0/2em 2em bei der Positionierung der Position, Breite und Höhe des Hintergrundelements, insbesondere Breite und Höhe von 2em sind die normale Breite des Hintergrundelements.

• Die 1,4em im zweiten linearen Gradienten werden entlang der Gradientenachse gemessen, was in diesem Fall der Abstand von der Gradientenachse zur Oberkante des Elements ist die Verlaufsachse nach rechts oben. Der Abstand von der Oberkante der Kante

• nach links unten bedeutet, dass der Verlauf in der unteren linken Ecke beginnt

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation visueller Effekte bei der Anwendung neuer CSS3-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!