Erstellen Sie mehrfarbige Rahmen mit CSS

Veröffentlicht: 2022-02-16

Die CSS-Border-Eigenschaft hat einige Anpassungsoptionen, wie z. B. Auswahlmöglichkeiten wie durchgehend, gestrichelt, gepunktet usw. Wenn es jedoch um die Rahmenfarbe geht, können wir nur eine durchgehende Farbe pro Seite haben. Aber es gibt noch eine andere Möglichkeit, eine mehrfarbige Linie mit ein paar weiteren Eigenschaften zu erzielen, an die Sie vielleicht nicht gedacht haben. Schauen wir uns das an.

Fest

solidbor

Gestrichelt

gestricheltebor

Gepunktet

dottedbor

Mehrfarbige Grenzen

mehrfarbigbor1

mehrfarbigbor2

Um einen mehrfarbigen Rahmen wie oben gezeigt zu erreichen, verwenden wir die position und den ::after -Selektor mit einem Farbverlauf. Zuerst erstellen wir einen Header-Bereich mit einer HTML-Klasse <div> und formatieren ihn dann mit CSS, um einen mehrfarbigen Rahmen zu haben, der ihn und den darunter liegenden Inhalt trennt.

Erstellen Sie Ihren HTML-Code:

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>
IM POPUP ÖFFNEN
 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

Lassen Sie es uns jetzt ein wenig mit CSS gestalten.

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }
IM POPUP ÖFFNEN
 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

Sie sollten jetzt etwas haben, das so aussieht:

Erstellen Sie mehrfarbige Rahmen mit CSS

Damit können wir jetzt ::after zum .ost-multi-header selector hinzufügen. Aber bevor wir das tun, möchte ich ein wenig erklären, was ::after macht und warum wir die Positionseigenschaft für den mehrfarbigen Rahmen brauchen. Das ::after erstellt ein Pseudo-Element mit dem, was in der content-Eigenschaft am Ende des ausgewählten Elements steht. In unserem Fall ist dieses Element .ost-multi-header . Lassen Sie uns ein altehrwürdiges „Hello World!“ Beispiel zur Veranschaulichung.

Fügen Sie dies zu Ihrem CSS hinzu:

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }
IM POPUP ÖFFNEN
 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

hwheaderbor

Wie Sie sehen können, haben wir jetzt ein „Hello World!“ -Element unter dem Header-Titel. Da unser übergeordnetes Element, .ost-multi-header , die Eigenschaft position als relative hat, können wir einem untergeordneten Element eine absolute Position zuweisen. Auf diese Weise können wir unser neues Pseudo-Element, das wir mit ::after erstellt haben, problemlos innerhalb des übergeordneten Elements an eine beliebige Stelle verschieben. Wir platzieren es unten und verschieben es über 20 Pixel von links innerhalb des übergeordneten Elements. Beachten Sie, dass, wenn für das übergeordnete Element die Positionseigenschaft nicht auf relativ eingestellt wäre, unser absolut positioniertes Element unten und 20 Pixel links vom Darstellungsbereich des Browsers wäre.

Was ist mit unserer farbigen Umrandung? Wir werden den Hintergrund unseres Pseudo-Elements mit einem Farbverlauf so gestalten, dass er unsere mehrfarbige Grenze ist. CSS-Verläufe können linear oder radial sein. Für unseren Rand verwenden wir linear-gradient . Ganz einfach, das würde uns die Grenze geben, die wir suchen.

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }
IM POPUP ÖFFNEN
 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

Aber lassen Sie uns einen Moment für einen Schritt-für-Schritt verlangsamen. Erstens ist die content immer noch vorhanden, obwohl sie leer ist. Dies liegt daran, dass das Pseudo-Element ohne die content -Eigenschaft niemals erstellt wird; also brauchen wir es. Wir müssen die Höhe unseres Pseudo-Elements, unsere Rahmenhöhe, festlegen. Warum sowohl left als auch right Eigenschaften auf 0 setzen? Ohne eine festgelegte Breite wird das Pseudo-Element auf 100 % Breite innerhalb des übergeordneten Elements gestreckt. Es mag nach viel aussehen, aber die Einstellungen für linear-gradient sagen nur, dass die Farbe von links „nach rechts“ fließen soll, und wir geben die gewünschten Farben in bestimmten Prozentsätzen des Hintergrunds ein.

Obwohl wir nur auswählen, welche Farben bei bestimmten Prozentsätzen verwendet werden sollen, ist dies eine Menge Beinarbeit. Glücklicherweise gibt es kostenlose Online-Ressourcen, die bei Farbverläufen enorm helfen. Ultimate CSS Gradient Generator von ColorZilla ist ein großartiges Tool, das mehrere Verlaufseigenschaften zur Unterstützung älterer Browser enthält.

Wir haben einen bereits eingerichteten Farbverlauf im Tool, sodass wir diesen Link verwenden können, um die genauen Einstellungen anzuzeigen, die in diesem Tutorial verwendet werden: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 , Feb123+66,2184cd+66,2184cd+100. Es sollte so aussehen:

Erstellen Sie mehrfarbige Rahmen mit CSS

Es gibt viele Einstellungen auf dieser Seite, aber konzentrieren wir uns auf die Einstellungen, die wir benötigen, um das Aussehen zu erstellen, das wir für unseren Rand verwenden werden. Lassen Sie es uns aufschlüsseln:

Erstellen Sie mehrfarbige Rahmen mit CSS

  1. Voreinstellungen - Diese können ein guter Ausgangspunkt sein!
  2. Schieberegler – Hier können Sie Farben hinzufügen, entfernen und bearbeiten
  3. Stopps – In diesem Abschnitt können Sie die Einstellungen für die Deckkraft und Position jeder Farbe ändern. Klicken Sie einfach auf das Farbfeld auf dem Schieberegler oben, um zu ändern, welches Sie in diesem Abschnitt steuern.
  4. Vorschau - Hier können Sie sofort die Ergebnisse Ihrer Änderungen sehen.
  5. Ausrichtung & Größe – Damit können Sie von horizontal, vertikal, diagonal oder radial wechseln. Und um die Größe des Farbverlaufs festzulegen.
  6. CSS-Code – Der generierte Code mit einem Permalink, damit Sie jederzeit zurückgehen und Ihren Farbverlauf einfach bearbeiten können.

Wir haben in unserem Fall nicht nach einem verblassten Farbverlauf gesucht, sondern nach einem soliden, flachen Übergang zwischen zwei Farben, also müssen wir nur die beiden Farben dort übereinander stapeln, wo wir dies möchten. In unserem Beispiel haben wir Farben bei 33 % bzw. 66 % gestapelt.

Erstellen Sie mehrfarbige Rahmen mit CSS

Fühlen Sie sich frei, mit den Einstellungen herumzuspielen, da Sie wissen, dass das, was Sie in der Vorschau sehen, das ist, was der Code generieren wird. Wenn Sie das Aussehen so eingerichtet haben, wie Sie es möchten, können Sie die Schaltfläche „Kopieren“ unten rechts im Codefeld verwenden.

Abschlusskopie

Wenn Sie den Code so kopiert haben, wie ich ihn im Link hatte, sieht Ihr endgültiges CSS in etwa so aus:

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }
IM POPUP ÖFFNEN
 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

Und dieses CSS erzeugt diese mehrfarbige Unterstreichung, die vollständig reagiert:

Erstellen Sie mehrfarbige Rahmen mit CSS

Na, bitte! Wir mussten das 6px-Padding nicht am Ende von .ost-multi-header hinzufügen, aber das absolute positionierte untergeordnete Element hat keinen Einfluss mehr auf die Höhe des übergeordneten Elements. Wir können es über unserem Inhalt im übergeordneten Element schweben lassen oder padding hinzufügen, um sicherzustellen, dass es keine Inhalte abdeckt, die wir möglicherweise nicht blockieren möchten.

Hier ist ein Link zu dieser Übung, die auf CodePen neu erstellt wurde, damit jeder sie bearbeiten und ohne Sorgen lernen kann.

Eine letzte Anmerkung, einige ältere Browser unterstützen nur den einfachen Doppelpunkt :after Selektor und nicht den modernen Standard double ::after . Sie können den einzelnen Doppelpunkt verwenden, wenn Sie auf Nummer sicher gehen möchten. Es funktioniert vorerst auch in modernen Browsern.