Erweiterte Styling-Effekte

Box-Schattierungen

box-shadow erlaubt es Ihnen, einem Box-Element einen oder mehrere Schlagschatten hinzuzufügen. Wie Textschattierungen werden Box-Schattierungen gut über verschiedene Browser hinweg unterstützt, einschließlich IE9+ und Edge. Benutzer älterer IE-Versionen müssen möglicherweise ohne Schatten auskommen, testen Sie also Ihre Designs, um sicherzustellen, dass Ihre Inhalte auch ohne diese lesbar sind.

Ein einfacher Box-Schatten

Beginnen wir mit einem einfachen Beispiel. Zuerst etwas HTML:

<article class="simple">
  <p>
    <strong>Warning</strong>: The thermostat on the cosmic transcender has
    reached a critical level.
  </p>
</article>

Nun das CSS:

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 25%));
}

.simple {
  box-shadow: 5px 5px 5px rgb(0 0 0 / 70%);
}

Dies ergibt das folgende Ergebnis:

Sie sehen, dass wir vier Elemente im box-shadow Eigenschaftswert haben:

1. Der erste Längenwert ist der horizontale Versatz — die Entfernung nach rechts, die der Schatten vom ursprünglichen Kasten aus versetzt wird (oder nach links, wenn der Wert negativ ist).
2. Der zweite Längenwert ist der vertikale Versatz — die Entfernung nach unten, die der Schatten vom ursprünglichen Kasten aus versetzt wird (oder nach oben, wenn der Wert negativ ist).
3. Der dritte Längenwert ist der Unschärferadius — die Menge der Unschärfe, die auf den Schatten angewendet wird.
4. Der Farbwert ist die Grundfarbe des Schattens.

Sie können beliebige Längen- und Farbeinheiten verwenden, die sinnvoll sind, um diese Werte zu definieren.

Mehrere Box-Schattierungen

Sie können in einer einzigen box-shadow Deklaration auch mehrere Box-Schattierungen angeben, indem Sie diese mit Kommas trennen:

<article class="multiple">
  <p>
    <strong>Warning</strong>: The thermostat on the cosmic transcender has
    reached a critical level.
  </p>
</article>

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 25%));
}

.multiple {
  box-shadow:
    1px 1px 1px black,
    2px 2px 1px black,
    3px 3px 1px red,
    4px 4px 1px red,
    5px 5px 1px black,
    6px 6px 1px black;
}

Jetzt erhalten wir dieses Ergebnis:

Wir haben hier etwas Spaß gemacht, indem wir eine erhobene Box mit mehreren farbigen Schichten erstellt haben, aber Sie könnten es in jeder gewünschten Weise nutzen, zum Beispiel um ein realistischeres Aussehen mit Schatten zu erzeugen, die auf mehreren Lichtquellen basieren.

Andere Box-Schatten-Features

Anders als text-shadow hat box-shadow ein inset Schlüsselwort verfügbar — wenn dies am Anfang einer Schattendeklaration steht, wird es zu einem inneren Schatten statt eines äußeren Schattens. Schauen wir uns das genauer an.

Zuerst verwenden wir für dieses Beispiel etwas anderes HTML:

<button>Press me!</button>

button {
  width: 150px;
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 10px;
  border: none;
  background-image: linear-gradient(to bottom right, #777777, #dddddd);
  box-shadow:
    1px 1px 1px black,
    inset 2px 3px 5px rgb(0 0 0 / 30%),
    inset -2px -3px 5px rgb(255 255 255 / 50%);
}

button:focus,
button:hover {
  background-image: linear-gradient(to bottom right, #888888, #eeeeee);
}

button:active {
  box-shadow:
    inset 2px 2px 1px black,
    inset 2px 3px 5px rgb(0 0 0 / 30%),
    inset -2px -3px 5px rgb(255 255 255 / 50%);
}

Dies ergibt das folgende Ergebnis:

Hier haben wir ein Button-Styling zusammen mit Fokus-/Hover-/Aktivzuständen eingerichtet. Der Button hat standardmäßig einen einfachen schwarzen Box-Schatten sowie ein paar innere Schatten, einen hellen und einen dunklen, die an gegenüberliegenden Ecken des Buttons platziert sind, um einen schönen Schattierungseffekt zu erzeugen.

Wenn der Button gedrückt wird, ersetzt der aktive Zustand den ersten Box-Schatten durch einen sehr dunklen inneren Schatten, was den Anschein erweckt, als ob der Button eingedrückt wird.

Filter

Während Sie die Zusammenstellung eines Bildes nicht mit CSS ändern können, gibt es einige kreative Dinge, die Sie tun können. Eine sehr nette Eigenschaft, die Ihnen helfen kann, Interesse an Ihre Designs zu bringen, ist die filter Eigenschaft. Diese Eigenschaft ermöglicht Photoshop-ähnliche Filter direkt aus CSS.

Im untenstehenden Beispiel haben wir zwei verschiedene Werte für den Filter verwendet. Der erste ist blur() — diese Funktion kann mit einem Wert übergeben werden, um anzugeben, wie stark das Bild verschwommen sein soll.

Der zweite ist grayscale(); durch die Verwendung eines Prozentsatzes legen wir fest, wie viel Farbe wir entfernen möchten.

Spielen Sie mit den Prozentsatz- und Pixelparametern im untenstehenden Beispiel, um zu sehen, wie sich die Bilder ändern. Sie könnten die Werte auch für einige andere austauschen. Probieren Sie contrast(200%), invert(100%) oder hue-rotate(20deg) im obigen Live-Beispiel. Schauen Sie sich die MDN-Seite für filter an, um viele andere Optionen zu finden, die Sie ausprobieren könnten.

<div class="wrapper">
  <div class="box">
    <img
      alt="balloons"
      class="blur"
      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
  </div>
  <div class="box">
    <img
      alt="balloons"
      class="grayscale"
      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
  </div>
</div>

.wrapper {
  display: flex;
  align-items: flex-start;
}

.wrapper > * {
  margin: 20px;
  flex: 1;
}

.box {
  border: 5px solid darkblue;
}

img {
  height: 100%;
  width: 100%;
  display: block;
  object-fit: cover;
}

.blur {
  filter: blur(10px);
}

.grayscale {
  filter: grayscale(60%);
}

Sie können Filter auf jedes Element und nicht nur auf Bilder anwenden. Einige der verfügbaren Filteroptionen tun ähnliches wie andere CSS-Funktionen, zum Beispiel funktioniert drop-shadow() auf sehr ähnliche Weise und bietet einen ähnlichen Effekt wie box-shadow oder text-shadow. Das wirklich schöne an Filtern ist jedoch, dass sie auf die genauen Formen des Inhalts innerhalb des Kastens wirken, nicht nur auf den Kasten selbst als großen Block, daher ist es wichtig, den Unterschied zu kennen.

Im nächsten Beispiel wenden wir unseren Filter auf einen Kasten an und vergleichen ihn mit einem Box-Schatten. Wie Sie sehen können, folgt der drop-shadow-Filter der genauen Form des Textes und der Rahmenelemente. Der Box-Schatten folgt nur dem Quadrat des Kastens.

<p class="filter">Filter</p>
<p class="box-shadow">Box shadow</p>

body {
  font-family: sans-serif;
}
p {
  margin: 1em 2em;
  padding: 20px;
  width: 100px;
  display: inline-block;
  border: 5px dashed red;
}

.filter {
  filter: drop-shadow(5px 5px 1px rgb(0 0 0 / 70%));
}

.box-shadow {
  box-shadow: 5px 5px 1px rgb(0 0 0 / 70%);
}

Sie können viel mehr Beispiele als hier verfügbar auf unserer filters.html Beispielseite (siehe Source-Code) und auf der filter Referenzseite finden.

Mischmodi

CSS Mischmodi erlauben es, Mischmodi zu Elementen hinzuzufügen, die einen Misch-Effekt angeben, wenn zwei Elemente überlappen — die endgültige Farbe, die für jedes Pixel angezeigt wird, wird das Ergebnis einer Kombination der ursprünglichen Pixelfarbe und der des darunterliegenden Pixels sein. Mischmodi sind wieder sehr vertraut für Benutzer von Grafikprogrammen wie Photoshop.

Es gibt zwei Eigenschaften, die Mischmodi in CSS verwenden:

• background-blend-mode, der mehrere Hintergrundbilder und Farben auf einem einzelnen Element miteinander vermischt.
• mix-blend-mode, der das Element, auf dem er gesetzt ist, mit den Elementen, die es überlappt, mischt — sowohl Hintergrund als auch Inhalt.

Sie können viel mehr Beispiele als hier verfügbar auf unserer blend-modes.html Beispielseite (siehe Source-Code) und auf der <blend-mode> Referenzseite finden.

background-blend-mode

Lassen Sie uns noch einmal einige Beispiele betrachten, um dies besser zu verstehen. Zuerst background-blend-mode — hier zeigen wir ein paar einfache <div>s, damit Sie das Original mit der gemischten Version vergleichen können:

<div></div>
<div class="multiply"></div>

Jetzt etwas CSS — wir fügen dem <div> ein Hintergrundbild und eine grüne Hintergrundfarbe hinzu:

div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background: url("https://mdn.github.io/shared-assets/images/examples/colorful-heart.png")
    no-repeat center 20px;
  background-color: green;
}

.multiply {
  background-blend-mode: multiply;
}

Das Ergebnis sieht so aus — Sie sehen das Original auf der linken Seite und den "Multiply" Mischmodus auf der rechten Seite:

mix-blend-mode

Schauen wir nun auf mix-blend-mode. Hier zeigen wir dieselben zwei <div>s, aber jedes sitzt nun auf einem einfachen <div> mit einem violetten Hintergrund, um zu zeigen, wie sich die Elemente miteinander vermischen:

<article>
  No mix blend mode
  <div></div>
  <div></div>
</article>

<article>
  Multiply mix
  <div class="multiply-mix"></div>
  <div></div>
</article>

Hier ist das CSS, mit dem wir dies stylen:

article {
  width: 280px;
  height: 180px;
  margin: 10px;
  position: relative;
  display: inline-block;
}

div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
}

article div:first-child {
  position: absolute;
  top: 10px;
  left: 0;
  background: url("https://mdn.github.io/shared-assets/images/examples/colorful-heart.png")
    no-repeat center 20px;
  background-color: green;
}

article div:last-child {
  background-color: purple;
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: -1;
}

.multiply-mix {
  mix-blend-mode: multiply;
}

Dies ergibt die folgenden Ergebnisse:

Sie können hier sehen, dass die "Multiply"-Mischung nicht nur die beiden Hintergrundbilder, sondern auch die Farbe des darunterliegenden <div>s gemischt hat.

CSS Formen

Zwar ist es wahr, dass in CSS alles ein rechteckiger Kasten ist und Bilder einen physischen rechteckigen Kasten haben, wir können es so aussehen lassen, als ob unser Inhalt um nicht-rechteckige Dinge herumfließt, indem wir CSS Shapes verwenden.

Die CSS Shapes-Spezifikation ermöglicht das Umfließen von Text um eine nicht-rechteckige Form. Es ist besonders nützlich, wenn Sie mit einem Bild arbeiten, das etwas Leerraum hat, um den Sie Text herumlaufen lassen möchten.

Im untenstehenden Bild haben wir einen angenehm runden Ballon. Die eigentliche Datei ist rechteckig, aber indem wir das Bild floaten (Formen gelten nur für gefloatete Elemente) und die shape-outside Eigenschaft mit einem Wert von circle(50%) verwenden, können wir den Effekt erzeugen, dass der Text der Linie des Ballons folgt.

<div class="wrapper">
  <img
    alt="balloon"
    src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>

body {
  font-family: sans-serif;
}
img {
  float: left;
  shape-outside: circle(50%);
}

Die Form in diesem Beispiel reagiert nicht auf den Inhalt der Bilddatei. Stattdessen nimmt die Kreisfunktion ihren Mittelpunkt von der Mitte der Bilddatei, als ob wir einen Zirkel in die Mitte der Datei gesetzt und einen Kreis gezeichnet hätten, der in die Datei passt. Es ist dieser Kreis, um den der Text herumfließt.

Die circle() Funktion ist nur eine von wenigen definierten Grundformen, jedoch gibt es eine Reihe unterschiedlicher Möglichkeiten, Formen zu erstellen. Für mehr Informationen und Beispielcode zu CSS Shapes siehe die Leitfäden zu CSS Shapes auf MDN.

-webkit-background-clip: text

Ein weiteres Feature, das wir kurz erwähnen möchten, ist der text Wert für background-clip. Wenn es zusammen mit dem proprietären -webkit-text-fill-color: transparent; Feature verwendet wird, ermöglicht es Ihnen, Hintergrundbilder auf die Form des Textelements zuzuschneiden, was zu einigen netten Effekten führt. Dies ist kein offizieller Standard, wurde jedoch in mehreren Browsern implementiert, da es populär und ziemlich weit verbreitet bei Entwicklern ist. In diesem Kontext erfordern beide Eigenschaften ein -webkit- Vendor-Prefix, selbst für nicht auf WebKit/Chrome-basierte Browser. Sie können dies im folgenden Live-Beispiel in Aktion sehen:

<h2>WOW</h2>
<h2 class="text-clip">WOW</h2>

body {
  font-family: "impact", sans-serif;
}

h2 {
  width: 250px;
  height: 250px;
  text-align: center;
  line-height: 250px;
  font-size: 50px;
}

h2 {
  color: white;
  display: inline-block;
  background: url("https://mdn.github.io/shared-assets/images/examples/colorful-heart.png")
    no-repeat center;
}

.text-clip {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Warum haben andere Browser ein -webkit- Präfix implementiert? Hauptsächlich für die Browser-Kompatibilität — so viele Webentwickler haben begonnen, Websites mit -webkit- Präfixen zu implementieren, dass es so aussah, als ob die anderen Browser kaputt wären, während sie in Wirklichkeit den Standards folgten. Daher waren sie gezwungen, einige solcher Features zu implementieren. Dies zeigt die Gefahr der Verwendung nicht standardisierter und/oder mit Präfixen versehener CSS Features in Ihrer Arbeit auf — sie verursachen nicht nur Browser-Kompatibilitätsprobleme, sondern unterliegen auch Änderungen, sodass Ihr Code jederzeit brechen könnte. Es ist viel besser, sich an die Standards zu halten.

Wenn Sie solche Features in Ihrer Produktionsarbeit verwenden möchten, stellen Sie sicher, dass Sie sie gründlich über verschiedene Browser hinweg testen und überprüfen, dass, wo diese Features nicht funktionieren, die Website dennoch nutzbar ist.

Zusammenfassung

Wir hoffen, dieser Artikel war unterhaltsam — das Spielen mit glänzenden Spielzeugen ist es generell, und es ist immer interessant zu sehen, welche Arten von erweiterten Styling-Tools in modernen Browsern verfügbar werden.