Wie man CSS in 3 Schritten schräge Behälter macht

Als ich kürzlich mein persönliches Portfolio aktualisiert habe, wollte ich Slashes (/) als visuelle Elemente im Hauptlayout der Website verwenden. Ich habe noch nie versucht, in CSS geneigte Behälter zu erstellen, aber auf den ersten Blick scheint es einfach. Wenn ich jedoch tiefer grabe, hatte ich tatsächlich einige sehr interessante Herausforderungen, um einen effektiven CSS -Schrägcontainer zu erstellen, der Text und Medien unterstützt.

Hier sind meine Versuchs- und Endergebnisse:

Ich suche zunächst nach Beispielen für nicht respektuläre Behälter, die es den Text auf natürliche Weise in sich fließen lassen. Ich gehe davon aus, dass dies in CSS implementiert werden kann, da Programme wie Adobe Illustrator und Microsoft Word dies seit Jahren tun.

Schritt 1: Erstellen Sie mit Transformation einen CSS -Befel -Container

Ich fand das CSS-Formenmodul, das perfekt für einfache Textinhalte geeignet ist, wenn wir die Form-Outside-Eigenschaft verwenden. Es richtet den Text sogar vollständig aus. Der Inhalt kann jedoch nicht in den Container scrollen lassen. Wenn der Benutzer nach unten scrollt, scheint sich der gesamte Tilt -Container nach links zu bewegen, was nicht der Effekt ist, den ich möchte. Stattdessen habe ich einen einfacheren Ansatz verfolgt, das darin besteht, den Container transform: skew() .

 .Slant-Container {
  Transformation: SCEW (14DEG);
}

Das ist ein guter Anfang! Der Behälter neigt sich und die Schriftrolle funktioniert wie erwartet, während Pure CSS die Größenänderung des Bildes abwickelt. Das offensichtliche Problem ist jedoch, dass auch der Text und die Bilder geneigt sind, sodass der Inhalt schwieriger zu lesen ist und das Bild verzerrt ist.

Schritt 2: Reverse Tilt Schriftart

Ich habe verschiedene Möglichkeiten versucht, das Problem des verzerrten Textes und der Bilder in CSS zu lösen. Am Ende wurde jedoch eine einfachere Lösung erstellt: Erstellen Sie eine neue Schriftart mit Fontforge, um das Abnutzen des Textes umzukehren.

Fontforge ist ein Open -Source -Schriftartredakteur. Ich habe mich für Roboto Condensed Light für den Hauptinhalt der Website entschieden, also habe ich die .ttf -Datei heruntergeladen und in Fontforge geöffnet. Dort habe ich alle Glyphen ausgewählt und eine 14 -Grad -Neigung angewendet, um die durch die CSS -Umwandlung im Behälter verursachte Neigung auszugleichen. Ich speichere die neue Schriftdatei als Roboto-rev-iTitalic.ttf und nenne sie in meinem Stylesheet.

Das war's. Die Schriftart kippt jetzt in die entgegengesetzte Richtung mit der gleichen Menge wie die Containerkopplung, wodurch diese Effekte ausgeglichen werden und der Inhalt wie die normale Roboto -Schriftart aussieht, die ich ursprünglich verwendet habe.

Schritt 3: Bilder und Videos optimieren

Das funktioniert sehr gut für Text! Die Funktion der Auswahl von Text ist ebenfalls normal. Von dort aus muss ich nur skew() -Werte umkehren, um die an den Container angewendeten Werte auszugleichen:

 IMG,
Video {
  Transformation: SCEW (-14DEG);
}

Am Ende habe ich die Bilder und Videos in einem zusätzlichen Div eingepackt. Auf diese Weise kann ich ihnen einen schönen Hintergrund geben, der perfekt mit dem Behälter übereinstimmt. Was ich getan habe, ist eine Verbindung zum ::after Pseudoelement herzustellen und ihn mit einem Hintergrund zu positionieren, der über die linken und rechten Kanten des geneigten Behälters hinausgeht.

 IMG :: Nach, nach,
Video :: After {
  Inhalt: '';
  Anzeige: Block;
  Hintergrund: RGBA (0, 0, 0, 0,5);
  Position: absolut;
  Top: 0;
  links: 0;
  Breite: 200%;
  Höhe: 100%;
}

Letzte Demo

Hier ist die endgültige Demonstration:

Ich verwende diesen Effekt jetzt auf meiner persönlichen Website und ich habe ihn bisher geliebt. Aber haben Sie andere Möglichkeiten ausprobiert, um ähnliche Effekte zu erzielen? Lassen Sie es mich in den Kommentaren informieren, damit wir uns vergleichen können!

Das obige ist der detaillierte Inhalt vonWie man CSS in 3 Schritten schräge Behälter macht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!