Leitfaden für CSS-Funktionen

url()

.el {
  background: url(/images/image.jpg);
}

attr()

/* <div data-example="foo"> */
div {
  content: attr(data-example);
}

calc()

.el {
  width: calc(100vw - 80px);
}

lang()

p:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019" "\201C" "\201D" "\2018" "\2019";
}

:not()

h3:not(:first-child) {
  margin-top: 0;
}

:nth-child()

.el:nth-child(3n) {
  background-color: #eee;
}

nth-child() ermöglicht es Ihnen, ein oder mehrere Elemente aus einer Gruppe von Elementen auszuwählen, die sich auf derselben Ebene im Document Object Model (DOM) befinden.

In den richtigen Händen ist :nth-child() unglaublich leistungsstark. Sie können damit sogar FizzBuzz lösen! Wenn Sie nach einem guten Einstieg suchen, hat Chris eine Sammlung nützlicher Pseudo-Selektor-Rezepte.

:nth-last-child()

.el:nth-last-child(2) {
  opacity: 0.75;
}
.el:last-child {
  opacity: 0.5;
}

Dieser Pseudo-Klassen-Selektor zielt auf Elemente in einer Gruppe von einem oder mehreren Elementen ab, die sich auf derselben Ebene im DOM befinden. Er beginnt vom letzten Element der Gruppe zu zählen und arbeitet sich rückwärts durch die Liste der verfügbaren DOM-Knoten.

:nth-of-type()

h2:nth-of-type(odd) {
  text-indent: 3rem;
}

:nth-of-type() wählt eine bestimmte Sammlung von Elementen eines bestimmten Typs aus. Zum Beispiel würde eine Deklaration von img:nth-of-type(5) das fünfte Bild auf einer Seite ansprechen.

:nth-last-of-type()

section:nth-last-of-type(3) {
  background-color: darkorchid;
}

Dieser Pseudo-Klassen-Selektor kann ein Element in einer Gruppe von Elementen eines ähnlichen Typs ansprechen. Ähnlich wie bei :nth-last-child() beginnt er beim letzten Element der Gruppe zu zählen. Im Gegensatz zu :nth-last-child überspringt er Elemente, die nicht zutreffen, während er rückwärts zählt. 

cubic-bezier()

.el {
  transition-timing-function: 
    cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

Anstelle von Schlüsselwortwerten wie ease, ease-in-out oder linear können Sie cubic-bezier() verwenden, um eine benutzerdefinierte Timing-Funktion für Ihre Animation zu erstellen. Während Sie die Mathematik hinter kubischen Bézier-Kurven lesen können, ist es meiner Meinung nach viel spaßiger, damit herumzuspielen.

path()

.clip-me {
  clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
}
.move-me {
  offset-path: path("M56.06,227 ...");
}

Diese Funktion ist mit der offset-path-Eigenschaft (oder eventuell mit der clip-path-Eigenschaft) gekoppelt. Sie ermöglicht es Ihnen, einen SVG-Pfad zu „zeichnen“, dem andere Elemente animiert folgen können.

Sowohl Michelle Barker als auch Dan Wilson haben hervorragende Artikel veröffentlicht, die sich detaillierter mit diesem Animationsansatz befassen.

steps()

.el {
  animation: 2s infinite alternate steps(10);
}

Diese relativ neue Funktion ermöglicht es Ihnen, die Easing-Zeit über eine Animation einzustellen, was mehr Kontrolle darüber gibt, welcher Teil der Animation wann stattfindet. Dan Wilson hat einen weiteren hervorragenden Artikel darüber, wie sie sich in die bestehende Landschaft des Animations-Easing einfügt. 

scaleX(), scaleY(), scaleZ(), scale3d() und scale()

.double {
  transform: scale(2);
}

Skalierungsfunktionen ermöglichen es Ihnen, die Größe von etwas entlang einer oder mehrerer Achsen zu vergrößern oder zu verkleinern. Wenn Sie scale3d() verwenden, können Sie dies sogar in drei Dimensionen tun!

translateX(), translateY(), translateZ(), translate3d() und translate()

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Translate-Funktionen ermöglichen es Ihnen, ein Element entlang einer oder mehrerer Achsen neu zu positionieren. Ähnlich wie bei Skalierungsfunktionen können Sie diese Manipulation auch in drei Dimensionen erweitern.

perspective()

.cube {
  transform: perspective(50em) rotateY(50deg)
}

Diese Funktion lässt Sie das Erscheinungsbild eines Objekts anpassen, sodass es aussieht, als ob es sich von seinem Hintergrund abhebt und nach vorne projiziert.

rotateX(), rotateY(), rotateZ(), rotate3d() und rotate()

.avatar {
  transform: rotate(25deg);
}

Rotate-Funktionen ermöglichen es Ihnen, ein Element entlang einer oder mehrerer Achsen zu drehen, ähnlich wie beim Greifen eines Balls und dem Drehen in der Hand.

skewX(), skewY() und skew()

.header {
  transform: skew(25deg, 15deg);
}

Skew-Funktionen unterscheiden sich geringfügig von Skalierungs- und Rotationsfunktionen, da sie einen Verzeichnungseffekt relativ zu einem einzigen Punkt anwenden. Der Verzeichnungsbetrag ist proportional zum angegebenen Winkel und Abstand, was bedeutet, dass je weiter der Effekt in eine Richtung fortschreitet, desto ausgeprägter wird er. 

Jorge Moreno hat uns allen einen Gefallen getan und ein großartiges Tool namens CSS Transform Functions Visualizer entwickelt. Es ermöglicht Ihnen, Größen und Skalierungen in Echtzeit anzupassen, um besser zu verstehen, wie all diese Funktionen zusammenarbeiten.

Als verantwortungsbewusste Webprofis sollten wir die Bedürfnisse unserer Benutzer berücksichtigen und die Tatsache, dass sie möglicherweise keine neuen oder leistungsstarken Geräte zur Anzeige unserer Inhalte verwenden. Große und komplizierte Animationen können die Erfahrung verlangsamen oder in extremen Fällen sogar zum Absturz des Browsers führen.

Um dies zu verhindern, können wir Techniken wie will-change verwenden, um den Browser auf das Kommende vorzubereiten, und die update Media Feature, um Animationen auf Geräten zu entfernen, die keine schnelle Bildwiederholrate unterstützen. 

brightness()

.avatar:hover {
  filter: brightness(150%);
}

Diese Funktion passt an, wie, ähm, hell etwas erscheint. Wenn sie auf einen niedrigen Wert eingestellt ist, sieht es so aus, als ob ein Schatten darüber geworfen wurde. Wenn sie auf einen hohen Wert eingestellt ist, wird sie überbelichtet, wie bei einem überbelichteten Foto.

blur()

.ghost {
  filter: blur(50%);
}

Wenn Sie mit dem Gaußschen Weichzeichner-Filter von Photoshop vertraut sind, wissen Sie, wie blur() funktioniert. Je mehr davon Sie anwenden, desto unschärfer wird das Ding, auf das Sie es anwenden.

contrast()

.wow {
  filter: contrast(200%);
}

contrast() passt den Unterschied zwischen den hellsten und dunkelsten Teilen des angewendeten Objekts an.

grayscale()

.no-color {
  filter: grayscale(100%);
}

grayscale() entfernt die Farbinformationen von dem, worauf es angewendet wird. Denken Sie daran, dass dies kein Alles-oder-Nichts-Angelegenheit ist! Sie können einen teilweisen Graustufen-Effekt anwenden, um etwas verwittert oder ausgewaschen aussehen zu lassen.

Eine interessante Anwendung von grayscale() könnte leichte Anwendung auf Bilder sein, wenn der Dunkelmodus aktiviert ist, um die allgemeine Farbbrillanz in einer Situation zu verringern, in der der Benutzer weniger Augenbelastung wünscht.

invert()

Während invert() verwendet werden kann, um etwas wie ein Negativ eines Fotos aussehen zu lassen, ist meine Lieblingstechnik, es in einer Media Query für invertierte Farben zu verwenden, um invertierte Bilder und Videos umzukehren.

@media (inverted-colors: inverted) {
  img,
  video {
    filter: invert(100%);
  }
}

Dies stellt sicher, dass Bilder und Videos so aussehen, wie sie sollten, unabhängig von den vom Benutzer ausgedrückten Browsermodus-Präferenzen. 

opacity()

.filter-visibility {
  filter: opacity(0);
}

Diese Funktion steuert, wie viel vom Hintergrund durch das Element (und seine Kindelemente) sichtbar ist, auf das die Funktion angewendet wird. 

Ein Element mit 0 % Opazität ist vollständig transparent, obwohl es immer noch im DOM vorhanden ist. Wenn Sie ein Objekt vollständig entfernen müssen, verwenden Sie andere Techniken wie das hidden-Attribut.

saturate()

.full-color {
  filter: saturate(100%);
}

Das Anwenden dieses Filters kann die Intensität der Farbe des angewendeten Objekts verstärken oder verringern. Die Erhöhung der Sättigung eines Bildes ist eine gängige Technik, die Fotografen verwenden, um unterbelichtete Fotos zu korrigieren.

sepia()

.is-old-timey {
  filter: sepia(1);
}

Es gibt ausgefallenere Möglichkeiten, dies zu beschreiben, aber realistisch ist es eine Funktion, die etwas wie ein altes Foto aussehen lässt.

drop-shadow()

.fit-shape-shadow {
  filter: drop-shadow(3rem 0 0.5rem #e486da);
}

Ein Schlagschatten ist ein visueller Effekt, der auf ein Objekt angewendet wird und es so aussehen lässt, als würde es von der Seite schweben. Es gibt einen kleinen Trick, denn CSS erlaubt es Ihnen auch, Schlagschatteneffekte auf Text und Elemente anzuwenden. Es unterscheidet sich auch von der box-shadow-Eigenschaft darin, dass es Schlagschatten auf die Form eines Elements anwendet und nicht auf den eigentlichen Kasten eines Elements.

Geschickte Designer und Entwickler können dies nutzen, um komplizierte visuelle Effekte zu erzielen.

hue-rotate()

.change-color {
  filter: hue-rotate(180deg);
}

Wenn eine Klasse mit einer Deklaration, die hue-rotate() enthält, auf ein Element angewendet wird, wird jeder Pixel, der zum Zeichnen dieses Elements verwendet wird, um den von Ihnen angegebenen Betrag in seinem Farbtonwert verschoben. Der Effekt von hue-rotate() wird auf jeden einzelnen Pixel angewendet, sodass sich alle Farben relativ zum Ausgangspunkt ihres Farbtonwerts ändern.

Dies kann einen wirklich psychedelischen Effekt erzeugen, wenn es auf Dinge angewendet wird, die viele Farbinformationen enthalten, wie z. B. Fotos.

SVG-Filter

filter() ermöglicht es uns auch, SVG-Filter zu importieren, um spezialisierte visuelle Effekte zu erzielen. Das Thema ist zu komplex, um es in diesem Artikel vollständig zu behandeln – wenn Sie nach einem guten Ausgangspunkt suchen, empfehle ich „The Art Of SVG Filters And Why It Is Awesome” von Dirk Weber.