LabEx
LoginBeitreten

Erstellung dynamischer CSS-Schatten

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir untersuchen, wie man dynamische Schatten mit CSS erstellt. Du wirst lernen, wie man das ::after-Pseudo-Element und verschiedene CSS-Eigenschaften wie background, filter, opacity und z-index verwendet, um einen Effekt zu erzeugen, der einem Box-Shadow ähnelt, aber auf den Farben des Elements selbst basiert. Am Ende dieses Labs wirst du in der Lage sein, eine zusätzliche Tiefe und Dimensionierung zu deinen Designs hinzuzufügen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 94% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Dynamischer Schatten

index.html und style.css wurden bereits in der VM bereitgestellt.

Um einen Schatten zu erstellen, der auf den Farben eines Elements basiert, folge diesen Schritten:

  1. Verwende das ::after-Pseudo-Element mit position: absolute und width und height auf 100% gesetzt, um den verfügbaren Platz im Eltern-Element zu füllen.

  2. Vererbe den background des Eltern-Elements, indem du background: inherit verwendest.

  3. Verschiebe das Pseudo-Element leicht mit top. Dann verwende filter: blur() um einen Schatten zu erstellen und setze opacity, um ihn halbtransparent zu machen.

  4. Stelle das Pseudo-Element hinter seinem Eltern-Element, indem du z-index: -1 setzt. Setze z-index: 1 auf das Eltern-Element.

Hier ist ein Beispiel für HTML- und CSS-Code:

<div class="dynamic-shadow"></div>
.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}

.dynamic-shadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}

Bitte klicke in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Dann kannst du die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Du hast das Lab zu dynamischen Schatten abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.