Das Sonnenlicht am frühen Abend durch Bl?tter erzeugt ein ruhiges, warmes Glühen. Künstler setzen dieses "Dappled Light" meisterhaft ein, um einen weichen, faszinierenden Effekt zu erzielen. Wir k?nnen diesen bezaubernden Look im Webdesign replizieren und in ansonsten weltlichen Inhalten ein neues Leben einhauchen, indem wir ihn auf Fotos und Illustrationen anwenden. Dieses Tutorial zeigt einen einfachen CSS-basierten Ansatz.

Vor dem Eintauchen in den Code ist das Verst?ndnis der Zusammensetzung von Dappled Light von entscheidender Bedeutung. Es besteht aus gro?en, kreisf?rmigen oder elliptischen Lichtflecken, die von Schatten durchsetzt, die von Laub gegossen wurden - Licht, das an Bl?ttern und Zweigen vorbeirutscht. Diese Schatten weisen h?ufig weiche, verschwommene Kanten auf, was das Ergebnis von Licht durch zahlreiche, weniger definierte R?ume erfolgt und das Licht diffundiert und verzerrt, wenn es Schatten aus der Ferne wirft.

Beobachten Sie den Unterschied zwischen einer einfachen wei?en Wand und einer durch ein Dappled -Licht beleuchteten: [Illustrativvergleich würde hier gehen]

In diesem Tutorial wird der Effekt anhand von Text (Buchstaben, Symbole, Emojis) hergestellt, CSS -Schatten nutzt und die Kunst der Natur nachahmt. Alternative Methoden werden ebenfalls untersucht.

Die Bühne setzen

Wir werden Textelemente - Buchstaben, Symbole, Emojis - verwenden, um leichte Patches darzustellen. Diese werden blasse, durchscheinende Farben sein und sich eher auf einen weichen, diffusen Effekt als auf scharfe Kontraste abzahlen. Elliptische oder l?ngliche Zeichen sind ideal und reflektieren die unterschiedlichen Formen von Dappled Light. Experimente ist der Schlüssel zur Erreichung der gewünschten ?sthetik. Für dieses Beispiel werden wir für ihre elliptischen und schr?gen Formen verwenden.

Diese Charaktere sind in Abs?tze innerhalb eines übergeordneten Elements für ein .backdrop eingewickelt:

<div class="backdrop">
  <p class="shapes">?</p>
  <p class="shapes">?</p>
  <p class="shapes">\</p>
</div>

Der .backdrop dient als Oberfl?che, auf das Licht und Schatten projiziert werden. Es verwendet ein Hintergrundbild für die Textur, hat eine explizite Breite und H?he sowie overflow: hidden um Schatten zu enthalten, die sich über seine Grenzen hinaus erstrecken. CSS Grid zentren die leichten Elemente:

 .backdrop {
  Hintergrund: Mitte / Cover No-Repeat-URL ('Image.jpeg');
  Breite: 400px; H?he: 240px;
  überlauf: versteckt;
  Anzeige: Grid;
}
.backdrop> * {
  Grid-Area: 1/1;
}

Eine pr?zise Ausrichtung von Formen ist nicht kritisch. überlappung ist ausreichend. Fühlen Sie sich frei, die Positionierung für einzigartige Dappled -Lichtmuster anzupassen.

Stylen des Dappled -Lichts mit CSS

Die wichtigsten CSS-Eigenschaften für die Emojis sind: transparente Farbe, semi-transparenter schwarzer Hintergrund (mit rgba() ), einem verschwommenen wei?en Textschatten, einer gro?en Schriftgr??e und mix-blend-mode zum Gl?tten:

 .shapes {
  Farbe: transparent;
  Hintergrundfarbe: RGBA (0, 0, 0, 0,3);
  Text-Shadow: 0 0 40px #fff;
  Schriftart: mutiger 320pt/320pt Monospace;
  Mix-Blend-Mode: Multiplizieren;
}

mix-blend-mode: multiply die Farben des Elements mit seinem Beh?lter, sodass der Hintergrund durch helle Farben angezeigt wird, w?hrend dunkle Farben aufrechterhalten werden, was zu einem natürlicheren Dapply-Hell-Effekt führt.

Farben und Kontrast raffinieren

Um die Helligkeit des Hintergrundbildes zu verbessern, wird filter: brightness(1.6) angewendet. Alternativ kann background-blend-mode mehrere Hintergründe verbinden. Emojis k?nnen auch als Hintergrundbilder verwendet werden, wie unten gezeigt:

<svg xmlns="http://www.w3.org/2000/svg"><foreignobject height="240px" width="400px"><div style="font: bolder 720pt/220pt monospace;
       color: transparent;
       text-shadow: 0 0 40px floralwhite;
       background: rgba(0, 0, 0, 0.3);" xmlns="http://www.w3.org/1999/xhtml">
      ?
    </div>
  </foreignobject></svg>

Für benutzerdefinierte Bildformen verwischen die Kanten für einen weichen Lichtffekt mit dem CSS blur() -Filter. @supports k?nnen für Browser-spezifische Schattenanpassungen verwendet werden.

Lassen Sie uns das erste Beispiel erneut besuchen und Inhalte hinzufügen:

<div class="backdrop">
  <p class="shapes">?</p>
  <p class="shapes">?</p>
  <p class="shapes">\</p>
</div>


  
  Top zehn Touristenpl?tze für die Sommerferien



  Hier sind die beliebtesten Orte ...

.backdrop und .shapes -Stile bleiben gleich. .content verwendet isolation: isolate um einen neuen Stapelkontext zu erstellen, wodurch das Mischen mit dem Dappled Light -Effekt verhindert wird.

Animierung der Lichtquelle

Eine subtile Animation wird mit @keyframes on .backdrop:hover hinzugefügt:

 .backdrop: schwebe>.
  Animation: 2S-In-Out Infinite Alternative Move;
}
.backdrop: schwebe>.
  Animation: 4S-In-Out Infinite Alternate Move-1;
}

@keyframes bewegen {
  von {textindent: -20px; }
  zu {textindent: 20px; }
}
@keyframes move-1 {
  von {textindent: -60px; }
  zu {textindent: 40px; }
}

Animating text-indent erzeugt subtile Bewegung, simuliert wechselnde Wolken und ?nderte Lichtrichtung.

Abschluss

In diesem Tutorial wird gezeigt, wie man mit CSS einen Dappel -Licht -Effekt erzeugt und sich von Natur und Kunst inspirieren l?sst. Der Schlüssel liegt darin, Farbe auf Textelemente mit verschwommenen Textschatten für leichte und halbtransparente Hintergründe für Schatten anzuwenden. Ein strukturierter Hintergrund mit ausreichendem Kontrast vervollst?ndigt den Effekt.

Das obige ist der detaillierte Inhalt vonEin gelassener CSS -Dappel -Licht -Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!