Acht CSS-Tipps für fortgeschrittene Layouts und Effekte

Der Bereich der Web-Frontend-Entwicklung hat in den letzten Jahren erhebliche Fortschritte gemacht. Das Web-Frontend, wie es die Benutzer sehen, ist jedoch immer noch dasselbe: HTML-Markup, das mit CSS gestaltet ist.

Viele Layout-Probleme können auf den ersten Blick einfach erscheinen, erweisen sich aber oft als knifflig. Ohne umfassende Kenntnisse darüber, wie bestimmte CSS-Funktionen funktionieren, scheinen diese fortgeschrittenen Layouts mit CSS allein unmöglich zu erreichen.

In diesem Artikel finden Sie acht CSS-Expertentipps und -tricks, die weniger bekannte CSS-Funktionen nutzen, um einige dieser fortgeschrittenen Layouts und Effekte zu implementieren.

1. Maximierung von CSS-Sibling-Selektoren

Das Problem: Sie verlieren Optimierungsmöglichkeiten, indem Sie keine Geschwisterselektoren verwenden.

Die Lösung: Verwenden Sie Geschwisterselektoren, wann immer es sinnvoll ist. Immer wenn Sie mit einer Liste von Elementen arbeiten und das erste oder das letzte Element unterschiedlich behandeln müssen, besteht Ihr erster Instinkt darin, die Pseudo-CSS-Selektoren :first-child und :last-child zu verwenden.

Zum Beispiel beim Erstellen eines Nur-CSS-Hamburger-Menüsymbols:

Siehe Pen Maximizing CSS Sibling Selectors 1 von Rico Mossesgeld (@ricotheque) auf CodePen.

Das macht Sinn: Jeder Balken hat ein Margin-Bottom, außer dem letzten.

Der gleiche Effekt ist aber auch über den nebenstehenden Geschwisterselektor (+) möglich:

Siehe Pen Maximizing CSS Sibling Selectors 2 von Rico Mossesgeld (@ricotheque) auf CodePen.

Das macht auch Sinn: Alles nach dem ersten Takt hat ein Margin-Top. Dieser CSS-Trick spart nicht nur ein paar zusätzliche Bytes (was sich leicht für jedes mittelgroße Projekt summieren kann), sondern eröffnet auch eine Welt voller Möglichkeiten.

Betrachten Sie diese Liste von Karten:

Siehe Pen Maximizing CSS Sibling Selectors 3 von Rico Mossesgeld (@ricotheque) auf CodePen.

Jeder hat einen Titel und einen Text, wobei letzterer standardmäßig ausgeblendet ist. Wenn Sie nur den Text der aktiven Karte (mit der .active -Klasse) und der darauf folgenden sichtbar machen möchten, können Sie dies schnell mit CSS tun:

Siehe Pen Maximizing CSS Sibling Selectors 4 von Rico Mossesgeld (@ricotheque) auf CodePen.

Mit ein wenig JavaScript geht das auch interaktiv.

Sich für all das allein auf JavaScript zu verlassen, würde jedoch zu einem Skript wie diesem führen:

Siehe Pen Maximizing CSS Sibling Selectors 5 von Rico Mossesgeld (@ricotheque) auf CodePen.

wobei das Einschließen von jQuery als Abhängigkeit Ihnen einen etwas kurzen Code ermöglicht.

2. Einheitliche HTML-Elementgröße

Das Problem: HTML-Elemente haben in verschiedenen Browsern uneinheitliche Größen.

Die Lösung: box-sizing für alle Elemente auf border-box setzen. Der Internet Explorer, ein langjähriger Fluch für Webentwickler, hat eines richtig gemacht: Er hat die Boxen richtig dimensioniert.

Andere Browser betrachten nur den Inhalt, wenn sie die Breite eines HTML-Elements berechnen, alles andere wird als Überschuss behandelt. Eine width: 200px 200 Pixel div, mit 20px Polsterung und einem 2px Rand, wird als 242 Pixel breit gerendert.

Internet Explorer betrachtet Auffüllung und Rahmen als Teil der Breite. Hier wäre das div von oben 200 Pixel breit.

Siehe Pen CSS Box Model Demo 1 von Rico Mossesgeld (@ricotheque) auf CodePen.

Sobald Sie den Dreh raus haben, werden Sie den letzteren Ansatz als logischer empfinden, auch wenn er nicht den Standards entspricht.

Wenn ich sage, dass die Breite 200 Pixel beträgt, verdammt noch mal, es wird eine 200 Pixel breite Box sein, selbst wenn ich 20 Pixel Polsterung habe.

In jedem Fall sorgt das folgende CSS dafür, dass Elementgrößen (und damit Layouts) über alle Browser hinweg konsistent bleiben:

Siehe Pen CSS Box Model Demo 2 von Rico Mossesgeld (@ricotheque) auf CodePen.

Der zweite Satz von CSS-Selektoren schützt HTML-Elemente, die ohne Berücksichtigung von Rahmenboxen gestaltet wurden, vor Layoutunterbrechungen.

box-sizing: border-box ist so nützlich, dass es Teil eines relativ beliebten CSS-Frameworks namens sanitize.css ist.

3. Dynamische Höhenelemente

Das Problem: Die Höhe eines HTML-Elements proportional zu seiner Breite halten.

Die Lösung: Verwenden Sie vertikale Polsterung als Ersatz für die Höhe.

Angenommen, Sie möchten, dass die Höhe eines HTML-Elements immer mit seiner CSS-Breite übereinstimmt. height: 100% ändert nicht das Standardverhalten von Elementen, die der Höhe ihres Inhalts entsprechen.

Siehe Pen Dynamic Height Elements 1 von Rico Mossesgeld (@ricotheque) auf CodePen.

Die Antwort ist, die Höhe auf 0 zu setzen und .container -top oder padding-bottom zu verwenden, um stattdessen die tatsächliche Höhe von .container festzulegen. Jede Eigenschaft kann ein Prozentsatz der Breite des Elements sein:

Sehen Sie sich den Pen Dynamic Height Elements 2 von Rico Mossesgeld (@ricotheque) auf CodePen an.

Jetzt .container ein Quadrat, egal wie breit es wird. overflow: hidden hält lange Inhalte davon ab, dieses Verhältnis zu überschreiten.

Diese Technik eignet sich mit einigen Modifikationen hervorragend zum Erstellen von Videoeinbettungen, die ihr Seitenverhältnis bei jeder Größe beibehalten. Richten Sie die Einbettung einfach an der oberen und linken Durchgangsposition von .container aus position: absolute , setzen Sie beide Dimensionen der Einbettung auf 100 %, sodass sie .container „ausfüllt“, und ändern Sie die padding-bottom von .container , damit sie dem Seitenverhältnis des Videos entspricht Verhältnis.

Sehen Sie sich den Pen Dynamic Height Elements 3 von Rico Mossesgeld (@ricotheque) auf CodePen an.

position: relative for .container stellt sicher, dass die absolute iframe -Positionierung richtig funktioniert. Das neue padding-bottom ist einfach die Höhe des Seitenverhältnisses dividiert durch seine Breite mal 100. Wenn das Seitenverhältnis der Videoeinbettung beispielsweise 16:9 beträgt, sollte der padding-bottom Prozentsatz 9 dividiert durch 16 (0,5625) sein. und mit 100 multipliziert (56,25).

4. Dynamische Breitenelemente

Das Problem: Die Breite eines HTML-Elements proportional zu seiner Höhe halten.

Die Lösung: Verwenden Sie die Schriftgröße als Grundlage für die Abmessungen des Elements.

Was ist nun mit der Rückseite oder Containern, die ihre Breite mit ihrer Höhe ändern? Diesmal ist es die font-size zur Rettung. Denken Sie daran, dass Breite und Höhe in em s angegeben werden können, was bedeutet, dass sie ein Verhältnis der font-size des Elements sein können.

Ein Element mit einer font-size von 40px, einer Breite von 2em und einer Höhe von 1em wäre 80 Pixel (40 x 2) breit und 40 Pixel (40 x 1) hoch.

Siehe die Pen Dynamic Width Elements von Rico Mossesgeld (@ricotheque) auf CodePen.

Möchten Sie die Höhe von .container ändern? Schriftgröße ändern.

Die einzige Einschränkung ist, dass es unmöglich ist, die Schriftgröße eines Elements nur durch CSS automatisch an die Höhe seines übergeordneten Elements anzupassen. Diese Technik ermöglicht es jedoch, ein JavaScript-Skript zur Größenänderung zu reduzieren von:

 var container = document.querySelector( '.container' ); container.style.height = yourDesiredHeight + 'px'; container.style.width = yourDesiredHeight * yourDesiredRatio + 'px';

zu:

 document.querySelector( '.container' ).style.fontSize = yourDesiredHeight + 'px';

5. Vertikale Zentrierung dynamischer Inhalte

Das Problem: Ein HTML-Element (mit unbekannter Höhe) vertikal zentriert in einem anderen halten.

Die Lösung: Setzen Sie das äußere Element auf display: table und wandeln Sie dann das innere Element in eine CSS table-cell um. Oder verwenden Sie einfach CSS Flexbox.

Es ist möglich, eine Textzeile mit line-height vertikal zu zentrieren:

Siehe Pen Vertical Centering of Dynamic Content 1 von Rico Mossesgeld (@ricotheque) auf CodePen.

Für mehrere Textzeilen oder Nicht-Text-Inhalte sind CSS-Tabellen die Antwort. Stellen Sie die Anzeige von .container auf table ein und verwenden Sie dann display: table-cell und vertical-align: middle für .text :

Siehe Pen Vertical Centering of Dynamic Content 2 von Rico Mossesgeld (@ricotheque) auf CodePen.

Stellen Sie sich diesen CSS-Trick als das vertikale Äquivalent von margin: 0 auto . Flexbox von CSS3 ist eine großartige Alternative für diese Technik, wenn die Buggy-Unterstützung von Internet Explorer akzeptabel ist:

Siehe Pen Vertical Centering of Dynamic Content 3 von Rico Mossesgeld (@ricotheque) auf CodePen.

6. Säulen gleicher Höhe

Das Problem: Säulen gleich hoch halten.

Die Lösung: Verwenden Sie für jede Spalte einen großen negativen Wert für margin-bottom und heben Sie diesen mit einem gleich großen padding-bottom auf. CSS-Tabellen und Flexbox funktionieren auch.

Mit float oder display: inline-block ist es möglich, nebeneinander liegende Spalten über CSS zu erstellen.

Siehe Pen Same-Height Columns 1 von Rico Mossesgeld (@ricotheque) auf CodePen.

Beachten Sie die Verwendung von box-sizing: border-box , um die .cols richtig zu dimensionieren. Siehe Konsistente Größe von HTML-Elementen oben.

Die Grenzen der ersten und letzten Spalte gehen nicht ganz nach unten; sie stimmen nicht mit der Höhe der höheren zweiten Säule überein. Um dies zu beheben, fügen Sie einfach overflow: hidden zu .row . Setzen Sie dann den Randrand jeder .col margin-bottom Datei auf 99999 Pixel und den padding-bottom auf .col Pixel (99999 Pixel + die 10-Pixel-Polsterung, die auf die anderen Seiten der .col-Datei angewendet wird).

Siehe Pen Same-Height Columns 2 von Rico Mossesgeld (@ricotheque) auf CodePen.

Eine einfachere Alternative ist Flexbox. Verwenden Sie dies wiederum nur, wenn die Unterstützung des Internet Explorers nicht erforderlich ist.

Siehe Pen Same-Height Columns 3 von Rico Mossesgeld (@ricotheque) auf CodePen.

Eine weitere Alternative mit besserer Browserunterstützung: CSS-Tabellen (ohne vertical-align: middle ).

Siehe Pen Same-Height Columns 4 von Rico Mossesgeld (@ricotheque) auf CodePen.

7. Über den Tellerrand hinausgehen

Das Problem: Boxen und gerade Linien sind so klischeehaft.

Die Lösung: Verwenden Sie transform: rotate(x) oder border-radius .

Nehmen Sie eine typische Reihe von Fenstern einer Marketing- oder Broschüren-Website: ein vertikaler Stapel von Folien mit einem einzelnen Punkt. Sein Markup und CSS könnten etwa so aussehen:

Siehe Pen Going Beyond the Box 1 von Rico Mossesgeld (@ricotheque) auf CodePen.

Auf Kosten einer viel komplizierteren Markierung könnten diese kastenförmigen Scheiben in einen Stapel von Parallelogrammen umgewandelt werden.

Siehe Pen Going Beyond the Box 2 von Rico Mossesgeld (@ricotheque) auf CodePen.

Hier ist viel los:

Die Höhe jedes Bereichs wird durch .pane-container gesteuert. Der negative Randboden sorgt dafür, dass die Scheiben eng aufeinander liegen.

• .pane-background , sein Kind .mask-box und sein Enkel .image sind alle auf position: absolute gesetzt. Jedes Element hat unterschiedliche Werte für top , left , bottom und right . Dadurch werden alle Abstände beseitigt, die durch die unten beschriebenen Drehungen entstehen.
• .mask-box wird um 2 Grad gedreht (gegen den Uhrzeigersinn).
• .image wird um -2 Grad gedreht, um der Drehung von .mask-box entgegenzuwirken.
• Der Überlauf von .mask-box wird ausgeblendet, sodass die gedrehten oberen und unteren Seiten das .image -Element beschneiden.

Übrigens ist es ganz einfach, ein Bild in einen Kreis oder ein Oval zu verwandeln. Wenden Sie einfach border-radius: 100% auf das img -Element an.

Sehen Sie sich den Pen Going Beyond the Box 3 von Rico Mossesgeld (@ricotheque) auf CodePen an.

Echtzeit-CSS-Modifikationen wie diese verringern die Notwendigkeit, Inhalte vorzubereiten, bevor sie auf einer Website veröffentlicht werden. Anstatt in Photoshop eine Kreismaske auf ein Foto anzuwenden, kann der Webentwickler denselben Effekt einfach über CSS anwenden, ohne das Originalfoto zu ändern.

Der zusätzliche Vorteil besteht darin, dass dadurch, dass der Inhalt unberührt bleibt und nicht auf das aktuelle Design der Website angewiesen ist, zukünftige Neugestaltungen oder Überarbeitungen erleichtert werden.

8. Nachtmodus

Das Problem: Einen Nachtmodus implementieren, ohne ein neues Stylesheet zu erstellen.

Die Lösung: Verwenden Sie CSS-Filter.

Einige Apps verfügen über einen Nachtmodus, in dem sich die Benutzeroberfläche zur besseren Lesbarkeit bei schlechten Lichtverhältnissen verdunkelt. In neueren Browsern können CSS-Filter den gleichen Effekt erzeugen, indem sie Photoshop-ähnliche Effekte anwenden.

Ein nützlicher CSS-Filter ist invert , der (keine Überraschung) die Farben von allem innerhalb eines Elements invertiert. Dadurch wird das Erstellen und Anwenden eines neuen Satzes von Stilen überflüssig.

Sehen Sie sich den Pen Night Mode 1 von Rico Mossesgeld (@ricotheque) auf CodePen an.

Die Verwendung dieses Filters auf schwarzem Text und weißem Hintergrund simuliert den Nachtmodus. !important stellt sicher, dass diese neuen Farben alle vorhandenen Stile überschreiben.

Sehen Sie sich den Pen Night Mode 2 von Rico Mossesgeld (@ricotheque) auf CodePen an.

Leider sieht das Bild komisch aus, weil seine Farben mit allem anderen invertiert wurden. Die gute Nachricht ist, dass mehrere Filter gleichzeitig angewendet werden können. Durch das Hinzufügen des Farbton-Rotationsfilters werden Bilder und andere visuelle Inhalte wieder normalisiert:

Sehen Sie sich den Pen Night Mode 3 von Rico Mossesgeld (@ricotheque) auf CodePen an.

Warum funktioniert das? hue-rotate(180deg) erzeugt nur den gleichen Effekt wie invert(1) . Hier ist eine Demo, wie CSS im Nachtmodus funktionieren würde, wenn es über eine JavaScript-unterstützte Schaltfläche umgeschaltet wird.

Machen Sie das Beste aus CSS

Sofern sich der Browser oder die Art und Weise, wie Websites erstellt werden, in Zukunft nicht dramatisch ändert, bleiben gute CSS-Kenntnisse eine grundlegende Fähigkeit im Bereich der Webentwicklung.

Alle diese CSS-Tipps haben etwas gemeinsam: Sie maximieren die Verwendung von CSS als Styling-Sprache und überlassen dem Browser selbst die schwere Arbeit. Und wenn es richtig gemacht wird, führt dies immer zu besseren Ergebnissen, einer besseren Leistung und damit zu einer besseren Benutzererfahrung.

Lassen Sie uns im Kommentarbereich unten wissen, ob Sie einen CSS-Trick haben, den Sie interessant und nützlich finden.