CSS erzielt farbenfrohe und intelligente Schatteneffekte

Hintergrund

Haben Sie sich jemals gefragt, wie Sie einen Schatteneffekt erstellen können, der bestimmte Farben vom Vordergrundelement übernimmt? Lesen Sie diesen Artikel, um herauszufinden wie!

Ich ging neulich Home Depot vorbei und dort hatten sie eine große Ausstellung der intelligenten Lichter, die sie verkauften 💡 . Eines davon war eine Reihe von Glühbirnen, die hinter dem Fernseher angebracht waren und ein Licht projizierten, dessen Farbe der auf dem Vordergrundbildschirm des Fernsehers angezeigten Farbe sehr ähnlich war, ähnlich dem, was Sie auf dem Bild unten sehen können.

Achten Sie darauf, was hinter dem Fernseher passiert. Die im Vordergrund des Fernsehbildschirms angezeigten Farben werden von der Lampe als farbiger Schattenhintergrund projiziert. Wenn sich die Farben auf dem Bildschirm ändern, ändert sich auch die Hintergrundprojektionsfarbe. Echt cool, oder?

Als ich das sah, kam mir als erstes der natürliche Gedanke: Könnte ich mithilfe von web einen bunten Schatten erzeugen, der intelligent genug ist, die Vordergrundfarbe zu simulieren? Es stellt sich heraus, dass dieser Effekt durch die ausschließliche Verwendung CSS durchaus möglich ist. In diesem Artikel sehen wir uns an, wie dies erreicht werden kann.

Lasst uns anfangen!

Mach es möglich

Wie Sie in den folgenden Abschnitten feststellen werden, kann das Erstellen intelligenter farbiger Schatten nur mit CSS zunächst wie eine gewaltige Aufgabe erscheinen, aber wenn wir Schritt für Schritt vorgehen und die schwierigen Teile in kleinere Teile zerlegen, werden Sie feststellen, dass alles leichter zu verstehen und zu verarbeiten ist. In den folgenden Abschnitten erstellen wir ein Beispiel, das wie folgt aussieht:

Was Sie sehen, ist ein Bild von Sushi 🍣 mit einem Schatten dahinter, der der Vordergrundfarbe entspricht. Um zu betonen, dass wir etwas Dynamisches tun, haben wir dem Schatten einen pulsierenden Animationseffekt hinzugefügt. Lassen Sie uns mit diesem funktionierenden Beispiel in der Hand einen Blick darauf werfen, wie Sie alles nur mit HTML und CSS zum Leben erwecken können.

Bilder anzeigen

HTML zur Anzeige des Sushi 🍣 lautet wie folgt und weist keine besonderen Merkmale auf:

<div Klasse="übergeordnet">
  <div Klasse="colorfulShadow Sushi"></div>
</div>

Wir haben ein übergeordnetes div Element .parent , das ein untergeordnetes Element .suchi enthält, das zur Anzeige 🍣 verwendet wird. Wir instanziieren 🍣 , indem wir ein Hintergrundbild verwenden. Die spezifischen Stilregeln des .sushi Elements lauten wie folgt:

.sushi {
  Rand: 100px;
  Breite: 150px;
  Höhe: 150px;
  Hintergrundbild: URL("https://www.kirupa.com/icon/1f363.svg");
  Hintergrundwiederholung: keine Wiederholung;
  Hintergrundgröße: enthalten;
}

In den obigen Stilregeln setzen wir div auf 150 * 150 Pixel in Breite und Höhe und legen background-image und die zugehörigen Eigenschaften fest. Wenn wir die jetzt erzielten Ergebnisse anzeigen, können wir den in der folgenden Abbildung gezeigten Inhalt sehen.

Schatten erstellen

Nachdem wir nun unser Sushi-Bild 🍣 angezeigt haben, ist die Definition des Schattens der interessantere Teil. Wir definieren den Schatten durch die Angabe eines untergeordneten Pseudoelements ::after , das 3 Dinge bewirkt:

• Direkt hinter div , das das Bild enthält;
• Erbt dasselbe Hintergrundbild wie das übergeordnete Element;
• Der Filter erzeugt einen bunten drop-shadow .

Die oben genannten drei Funktionen werden durch die folgenden zwei Stilregeln implementiert:

.colorfulShadow {
  Position: relativ;
}
.colorfulShadow::nach {
  Inhalt: "";
  Breite: 100 %;
  Höhe: 100%;
  Position: absolut;
  Hintergrund: erben;
  Hintergrundposition: Mitte Mitte;
  Filter: Schlagschatten (0px 0px 10px rgba (0, 0, 0, 0,50)) Unschärfe (20px);
  z-Index: -1;
}

Nehmen Sie sich einen Moment Zeit, um die Implementierung hier durchzugehen und achten Sie dabei genau auf jede Eigenschaft und den entsprechenden Wert. Am bemerkenswertesten sind background und filter . Der Wert von background ist inherit , was bedeutet, dass es den Hintergrundwert des übergeordneten Elements erbt:

Hintergrund: erben;

filter definiert zwei Filterwerte: drop-shadow und blur

Filter: Schlagschatten (0px 0px 10px rgba (0, 0, 0, 0,50)) Unschärfe (20px);

Unser drop-shadow erzeugt einen schwarzen Schatten mit 50% Transparenz. Der blur setzt einen 20px Unschärfeeffekt für das Element. Die Kombination dieser beiden Filter kann letztendlich einen bunten Schatten erzeugen. Wenn diese beiden Stilregeln wirksam werden, können wir den bunten Schatten hinter dem Sushi-Bild 🍣 sehen, wie unten gezeigt:

Wir haben bisher viel erreicht. Der Vollständigkeit halber: Wenn Sie möchten, dass Ihre bunten Schatten beim Vergrößern und Verkleinern animiert werden, finden Sie hier einige zusätzliche CSS , die Ihnen dabei helfen:

.colorfulShadow {
  Position: relativ;
}
.colorfulShadow::nach {
  Inhalt: "";
  Breite: 100 %;
  Höhe: 100%;
  Position: absolut;
  Hintergrund: erben;
  Hintergrundposition: Mitte Mitte;
  Filter: Schlagschatten (0px 0px 10px rgba (0, 0, 0, 0,50)) Unschärfe (20px);
  z-Index: -1;
  /* Zeit für Animation! */
  Animation: 1 s oszillieren, kubisch-bézier (.17, .67, .45, 1.32), unendlicher Wechsel;
}

@keyframes oszillieren {
  aus {
    transformieren: Skalierung(1, 1);
  }
  Zu {
    transformieren: Skalierung(1,3, 1,3);
  }
}

Wenn Sie die Interaktivität verbessern möchten, ohne Animationen zu loopen, können Sie auch CSS transition verwenden, um das Verhalten des Schattens zu ändern, z. B. beim hover . Der schwierige Punkt, der hervorgehoben werden muss, ist, dass Sie Pseudoelemente genauso behandeln wie ein in HTML oder dynamisch JavaScript erstelltes Element. Der einzige Unterschied besteht darin, dass dieses Element vollständig und nur mit CSS erstellt wird!

abschließend

Pseudoelemente ermöglichen uns die Verwendung von CSS zum Erstellen von Elementen, die normalerweise im Bereich von HTML und JavaScript ausgeführt werden. Für unsere farbenfrohen Smart Shadows verlassen wir uns darauf, dass das übergeordnete Element über ein Hintergrundbild verfügt. So können wir ganz einfach ein untergeordnetes Element definieren, das die Hintergrunddetails des übergeordneten Elements übernimmt und gleichzeitig Unschärfeeffekte und Schlagschatten festlegt. Das ist zwar schön und gut und erspart uns eine Menge Kopier- und Einfügearbeit, dieser Ansatz ist allerdings auch nicht sehr flexibel.

Was ist, wenn ich einen solchen Schatten auf ein leeres Element anwenden möchte, das nicht nur ein leeres Element mit einem Hintergrundbild ist? Was ist, wenn ich ein HTML Element wie eine Schaltfläche oder eine Kombinationsbox habe, auf das ich diesen Schatteneffekt anwenden möchte? Eine Lösung besteht darin, sich auf JavaScript zu verlassen, um das entsprechende Element im DOM zu kopieren, es unten im Vordergrundelement zu platzieren und den Filter anzuwenden. Dies ist auch eine Methode. Obwohl dies funktioniert, schaudert es mich bei dem Gedanken an diesen ziemlich aufwändigen Prozess des Duplizierens von DOM Elementen. Schlimmer noch: JavaScript ist nicht in der Lage, beliebige visuelle Absichten, die Sie möglicherweise angeben, in ein Renderziel-Bitmap zu übersetzen! 🥶

Dieser Artikel ist eine Übersetzung. Bitte besuchen Sie die Originaladresse: https://www.kirupa.com/html5/creating_colorful_smart_shadows.htm
Artikel-URL: https://www.cnblogs.com/dragonir/p/14758359.html Autor: dragonir

Dies ist das Ende dieses Artikels darüber, wie Sie mit CSS farbenfrohe und intelligente Schatten erzielen. Weitere relevante Inhalte zur CSS-Schattenimplementierung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!