So erstellen Sie ein CSS-Menüband
Wir reden über CSS-Bänder im Webdesign, wenn a Streifen der Box (genannt Band) Wickelt eine andere Box ein. Es ist eine ziemlich verwendete Designtechnik Text verzieren, vor allem Überschriften. Auf der W3C-Website können Sie herausfinden, wie richtig verwendete CSS-Farbbänder helfen können Strukturinhalt auf subtile Weise.
In diesem Beitrag werden wir also sehen So erstellen Sie ein einfaches CSS-Ribbon das können Sie verwenden die Überschriften verbessern Auf deiner Webseite. Dank an CSS-Transformationen, Wir können dieses Design mit einer viel einfacheren Codebasis als zuvor erstellen.
Sie können einen Blick auf die abschließende Demo werfen.
HTML & grundlegende Stile
Zuerst erstellen wir eine tag kennzeichnen wir mit .Karte Selektor, der a darstellt Rechteckfeld wird das Farbband wickeln um.
Wir setzen auch die Grundmaße und das Hintergrundfarbe mit CSS.
.Karte Hintergrundfarbe: Beige; Höhe: 300px; Marge: 40px; Breite: 500px;
Der mittlere Teil des Farbbands
Wir werden eine verwenden CSS-Variable (erlaubt das Speichern und Wiederverwenden eines CSS-Werts) --p zu Speichern Sie den Füllwert. Der Wert von Polsterung Eigenschaft verwendet die var (- p) Syntax für die linken und rechten Auffüllungen des Farbbands, damit dies möglich ist leicht verbreitert. Das --p Variable wird später sein mehrfach verwendet werden; Das macht unseren Code flexibel.
.Farbband - p: 15px; Hintergrundfarbe: rgb (170,170,170); Höhe: 60px; Auffüllen: 0 var (- p); Breite: 100%;
Auf dem Screenshot unten können Sie sehen, wie Ihre Demo an dieser Stelle aussehen soll:
Band zentrieren
Wir müssen auch zentrieren Sie das Band. Wir Schieben Sie es nach links um die Polstergröße (markiert durch das --p Variable) mittels relativer Positionierung.
.Farbband - p: 15px; Hintergrundfarbe: rgb (170,170,170); Höhe: 60px; Auffüllen: 0 var (- p); Position: relativ; rechts: var (- p); Breite: 100%;
Die aktualisierte Demo:
Die Seiten des Bandes
Jetzt erstellen wir die linke und rechte Seite des Farbbands das sollte sich scheinbar um den Kartenrand biegen. Dazu verwenden wir beide :Vor und :nach dem Pseudoelemente von .Band.
Beide Pseudoelemente erben die Hintergrundfarbe von .Band, und wir benutzen die Filter: Helligkeit (.5) Regel ihre Farbe ein wenig zu verdunkeln. Sie sind auch absolut positioniert in ihrem (relativ positionierten) Elternteil.
Ihre Breite muss die sein Gleiche Größe wie die Polsterung, und wir platzieren sie am linken und rechten Ende des Farbbands Verwendung der links: 0 und rechts: 0 Stilregeln.
.ribbon: before, .ribbon: after Hintergrundfarbe: erben; Inhalt: "; Anzeige: Block; Filter: Helligkeit (.5); Höhe: 100%; Position: absolut; Breite: Var (- p); .Ribbon: vor left: 0; .Ribbon: nach rechts: 0;
Nun sieht das Band mit den gerade hinzugefügten Seiten wie folgt aus:
Schräg die Seiten
Um die Seiten des Farbbands zu machen schau gebeugt, wir müssen Schrägstellen der Seiten um 45 °. Das verwandeln: schräg () CSS-Regel verzerrt Elemente vertikal.
.Farbband: vor links: 0; verwandeln: schief (45 Grad); .ribbon: after right: 0; verwandeln: schief (-45 Grad);
Da sieht man die Kanten der Seiten nicht ausrichten Nach der Transformation müssen wir also zieh sie runter.
Richten Sie die Seiten aus
Zu bestimme die richtige Länge durch die wir die Seiten nach unten bewegen müssen, wenden wir uns der Trigonometrie zu. Was wir finden müssen, ist x, wie y ist die Breite der Seiten (entspricht der Auffüllgröße von .Band) und der Winkel θ ist 45 ° (der Neigungswinkel).
Das Ergebnis x dann muss halbiert werden, da gibt es auch eine linke und eine rechte seite.
Wenn Sie einen CSS-Präprozessor verwenden, überprüfen Sie, ob er über ein bräunen Funktion, ansonsten beziehen Sie sich auf ein Tangentendiagramm oder einen Taschenrechner Ermitteln Sie den Tangenswert des Winkels. Wir haben Glück als tan 45 ° ist 1, was bedeutet, dass der Wert von x ist gleich y in unserem Fall.
.ribbon: before, .ribbon: after Hintergrundfarbe: erben; Inhalt: "; Anzeige: Block; Filter: Helligkeit (0,5); Höhe: 100%; Position: Absolut; Oben: Berechnen (Var (- P) / 2); Breite: Var (- P);
Schon seit x halbiert werden mussten, verwenden wir die calc () CSS-Funktion zum Durchführen der Aufteilung der --p Variable.
Endlich müssen wir Richten Sie die Seiten entlang der Z-Achse aus Also, fügen wir das hinzu z-Index: -1 zu den Seiten regeln, um Platziere sie hinter dem mittleren Teil des Bandes.
.ribbon: before, .ribbon: after Hintergrundfarbe: erben; Inhalt: "; Anzeige: Block; Filter: Helligkeit (.5); Höhe: 100%; Position: absolut; Oben: Berechnen (var (- p) / 2); Breite: Var (- p); z-" Index: -1;
Nun, da wir die Seiten ausgerichtet haben, ist unser CSS-Band fertig.
Nachfolgend können Sie die Live-Demo erneut überprüfen. Bitte beachten Sie, dass sie einige zusätzliche Stylings verwendet.
