Fortgeschrittene Stileffekte

Box-Schatten

box-shadow ermöglicht es Ihnen, ein oder mehrere Schlagschatten auf das Box-Element eines Elements anzuwenden. Wie Text-Schatten werden Box-Schatten in den meisten Browsern gut unterstützt, einschließlich IE9+ und Edge. Benutzer älterer IE-Versionen müssen möglicherweise ohne Schatten auskommen, daher sollten Sie Ihre Designs testen, um sicherzustellen, dass Ihr Inhalt auch ohne sie lesbar ist.

Ein einfacher Box-Schatten

Schauen wir uns ein einfaches Beispiel an, um zu beginnen. 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 werden sehen, dass wir vier Elemente im box-shadow-Eigenschaftswert haben:

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

Sie können alle Längen- und Farbeinheiten verwenden, die sinnvoll zur Definition dieser Werte sind.

Mehrere Box-Schatten

Sie können auch mehrere Box-Schatten in einer einzigen box-shadow-Deklaration angeben, indem Sie sie mit Kommata 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;
}

Nun erhalten wir dieses Ergebnis:

Wir haben hier etwas Lustiges gemacht, indem wir eine erhabene Box mit mehreren farbigen Schichten erstellt haben, aber Sie könnten es in jeder gewünschten Weise verwenden, zum Beispiel um durch mehrere Lichtquellen erzeugte Schatten für einen realistischeren Look zu erzeugen.

Andere Box-Schatten-Funktionen

Im Gegensatz zu text-shadow hat box-shadow ein inset-Schlüsselwort, das am Anfang einer Schattendeklaration verwendet werden kann, um ihn zu einem inneren Schatten anstelle eines äußeren Schattens zu machen. Lassen Sie uns einen Blick darauf werfen, was wir damit meinen.

Zuerst verwenden wir für dieses Beispiel einen anderen HTML-Code:

<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 eine Schaltflächen-Styling zusammen mit Fokus/Hover/Aktiv-Zustände eingerichtet. Die Schaltfläche hat standardmäßig einen einfachen schwarzen Box-Schatten, sowie ein paar innere Schatten, einen hellen und einen dunklen, die auf entgegengesetzten Ecken der Schaltfläche platziert sind, um einen schönen Schattierungseffekt zu erzielen.

Wenn die Schaltfläche gedrückt wird, verursacht der aktive Zustand, dass der erste Box-Schatten durch einen sehr dunklen inneren Schatten ersetzt wird, was den Anschein erweckt, dass die Schaltfläche eingedrückt wird.

Filter

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

Im folgenden Beispiel haben wir zwei verschiedene Werte für filter verwendet. Der erste ist blur() — diese Funktion kann mit einem Wert versehen werden, um anzugeben, wie stark das Bild unscharf gemacht werden soll.

Der zweite ist grayscale(); durch die Verwendung eines Prozentsatzes legen wir fest, wie viel Farbe entfernt werden soll.

Spielen Sie mit den Prozent- und Pixelparametern im folgenden Beispiel, um zu sehen, wie sich die Bilder ändern. Sie könnten die Werte auch durch einige andere ersetzen. Versuchen 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 bewirken sehr ähnliche Dinge wie andere CSS-Features, zum Beispiel funktioniert drop-shadow() auf sehr ähnliche Weise und erzeugt einen ähnlichen Effekt wie box-shadow oder text-shadow. Der wirklich schöne Aspekt von Filtern ist jedoch, dass sie auf die genauen Formen des Inhalts innerhalb des Kastens wirken, nicht nur auf den Kasten selbst als einen großen Abschnitt, daher lohnt es sich, 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, folgt der Drop-Shadow-Filter der exakten Form des Textes und der Rand-Strichelung. Der Box-Schatten folgt einfach 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%);
}

Mischmodi

CSS-Mischmodi ermöglichen es uns, Mischmodi zu Elementen hinzuzufügen, die einen Blendungseffekt angeben, wenn zwei Elemente sich überschneiden — die endgültige Farbe, die für jedes Pixel angezeigt wird, ist das Ergebnis einer Kombination der ursprünglichen Pixel-Farbe und der des Pixels in der darunter liegenden Schicht. Mischmodi sind wiederum 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, die auf einem einzigen Element gesetzt sind, miteinander vermischt.
• mix-blend-mode, der das Element, auf dem es gesetzt ist, mit den Elementen vermischt, die es überlagert — sowohl Hintergrund als auch Inhalt.

Sie finden viel mehr Beispiele als hier verfügbar auf unserer blend-modes.html-Beispielseite (sehen Sie sich den Quellcode an) und auf der <blend-mode>-Referenzseite.

background-blend-mode

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

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

Nun 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("colorful-heart.png") no-repeat center 20px;
  background-color: green;
}

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

Das Ergebnis, das wir erhalten, ist dieses — Sie sehen das Original links und den Multiply-Blendenmodus rechts:

mix-blend-mode

Schauen wir uns nun mix-blend-mode an. Hier präsentieren wir dieselben zwei <div>s, aber jedes befindet sich jetzt über einem einfachen <div> mit einem lilafarbenen Hintergrund, um zu zeigen, wie die Elemente zusammenblenden:

<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 gestalten werden:

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("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 das Multiply-Mix-Blending nicht nur die beiden Hintergrundbilder zusammengemischt hat, sondern auch die Farbe aus dem <div> darunter.

CSS-Formen

Auch wenn alles in CSS ein rechteckiger Kasten ist und Bilder physisch rechteckige Kästen sind, können wir es so aussehen lassen, als ob unser Inhalt um nicht-rechteckige Dinge fließt, indem wir CSS-Formen verwenden.

Die CSS-Formen-Spezifikation ermöglicht das Umfließen von Text um eine nicht-rechteckige Form. Dies ist besonders nützlich, wenn Sie mit einem Bild arbeiten, das über einen Leerraum verfügt, den Sie mit Text umfließen möchten.

Im folgenden Bild haben wir einen ansprechend runden Ballon. Die eigentliche Datei ist rechteckig, aber durch das Schweben des Bildes (Formen gelten nur für schwebende Elemente) und die Verwendung der shape-outside-Eigenschaft mit einem Wert von circle(50%) 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 circle-Funktion ihren Mittelpunkt als den Mittelpunkt der Bilddatei, als ob wir einen Zirkel in der Mitte der Datei platziert und einen Kreis gezeichnet hätten, der in die Datei passt. Um diesen Kreis fließt der Text.

Die circle()-Funktion ist nur eine von wenigen grundlegenden Formen, die definiert sind, jedoch gibt es eine Reihe verschiedener Möglichkeiten, Formen zu erstellen. Für weitere Informationen und Beispielcode zu CSS-Formen sehen Sie sich die Leitfäden zu CSS-Formen auf MDN an.

-webkit-background-clip: text

Ein weiteres Feature, das wir kurz erwähnen wollten, ist der text-Wert für background-clip. Bei Verwendung zusammen mit der proprietären -webkit-text-fill-color: transparent; Funktion ermöglicht diese Funktion, Hintergrundbilder auf die Form des Textes eines Elements zuzuschneiden, was einige nette Effekte ermöglicht. Dies ist kein offizieller Standard, wurde jedoch über mehrere Browser hinweg implementiert, da es beliebt ist und von Entwicklern relativ häufig verwendet wird. Wenn es in diesem Kontext verwendet wird, benötigen beide Eigenschaften ein -webkit--Anbieterpräfix, selbst für nicht auf WebKit/Chrome basierende 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("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 angefangen, Webseiten mit -webkit- Präfixen zu implementieren, dass es begann, so auszusehen, als ob die anderen Browser nicht funktionieren würden, obwohl sie in Wirklichkeit die Standards befolgten. Sie waren daher gezwungen, einige solcher Funktionen zu implementieren. Dies unterstreicht die Gefahr der Verwendung von nicht standardmäßigen und/oder präfixierten CSS-Funktionen in Ihrer Arbeit — nicht nur verursachen sie Browser-Kompatibilitätsprobleme, sondern sie sind auch Änderungen unterworfen, sodass Ihr Code jederzeit brechen könnte. Es ist viel besser, sich an die Standards zu halten.

Wenn Sie solche Funktionen in Ihrer Produktionsarbeit verwenden möchten, stellen Sie sicher, dass Sie gründlich in verschiedenen Browsern testen und prüfen, dass die Seite auch dort noch verwendbar ist, wo diese Funktionen nicht funktionieren.

Zusammenfassung

Wir hoffen, dieser Artikel hat Spaß gemacht — mit glänzenden Spielzeugen zu spielen, ist im Allgemeinen unterhaltsam, und es ist immer interessant zu sehen, welche Arten von fortgeschrittenen Styling-Tools in modernen Browsern zur Verfügung stehen.