de.hideout-lastation.com
Paradies Für Designer Und Entwickler


So erstellen Sie CSS-Farbverlaufsrahmenfarben

Dieser Artikel ist Teil unserer "HTML5 / CSS3 Tutorials" -Serie - mit dem Ziel, Sie zu einem besseren Designer und / oder Entwickler zu machen. Klicken Sie hier, um mehr Artikel aus derselben Serie zu sehen.

Mit all den neuen Funktionen in CSS3 sind wir jetzt in der Lage, bildfreie Websites zu erstellen. In der Vergangenheit war die Verwendung von Bildern unvermeidlich, wenn es um die Darstellung von Farbverläufen ging. Heute wird es mit der Verwendung von CSS3 Gradient Background viel schlanker . In früheren Beiträgen haben wir Ihnen gezeigt, wie Sie CSS3 Gradient als Hintergrundfarbe in verschiedenen Formen und Richtungen einsetzen können. Lineare, elliptische und sich wiederholende Gradienten.

Aber CSS3 Gradient stoppt nicht nur im Hintergrund. Wussten Sie, dass Sie es auch innerhalb von Grenzen nutzen können ? Lesen Sie weiter, um zu erfahren, wie Sie dies tun können.

Erste Methode

Die erste Methode besteht darin, CSS3 Gradient in Pseudo-Elementen anzuwenden. Nun, mal sehen, wie der Trick funktioniert.

Von oben nach unten verlaufender Verlaufsrand

Wir beginnen mit einem einfachen Gradienten, der sich von oben nach unten ausbreitet. Um zu beginnen, erstellen Sie wie folgt eine Box mit einem div .

HTML

CSS

 .box {Breite: 400px; Höhe: 400px; Hintergrund: #eee; } 

Um den Verlauf in den Rahmen des Rahmens zu formen, legen Sie zuerst einen festen Rahmen an der oberen und unteren Seite des Rahmens fest. Wir erzeugen auch 2 Rechtecke mit 2 Pseudoelementen s - :before und :after - und geben die Breite in der gleichen Größe wie die Rahmenbreite an. Positionieren Sie die Rechtecke auf der linken und rechten Seite der Box und verwenden Sie einen linear-gradient durch das background-image . Sie können sehen, wie dieser Trick unten ausfällt:

Von links nach rechts, Farbverlauf

Jetzt erstellen wir einen Farbverlauf, der sich auf die gleiche Weise wie im vorherigen Beispiel nach links und rechts erstreckt. Nur dieses Mal fügen wir den Rahmen an der linken und rechten Seite anstelle von oben und unten an. Ähnlich verwenden wir auch das Pseudoelement - :before und :after - um 2 Rechtecke zu formen. Aber im Gegensatz zum vorherigen Beispiel platzieren wir sie jetzt an der oberen und unteren Seite der Box.

Diagonaler Grenzverlauf

Mit diesem Trick einen diagonalen Gradienten zu erzeugen, ist technisch sehr kompliziert.

Dennoch, wir verlassen uns auf 2 Pseudo-Elemente :before und :after und verwenden linear-gradient . Diesmal werden wir jedoch zwei linear-gradient innerhalb des Pseudo-Elements verwenden . Und jeder Gradient überspannt einander. Weitere Informationen finden Sie im folgenden Quellcode.

Zweiter Trick

Die zweite Methode verwendet CSS3 border-image -Eigenschaft. Die border-image -Eigenschaft in CSS3 ermöglicht es uns, die Grenze mit einem Bild sowie CSS3 Gradient zu füllen. Die Browser-Unterstützung für border-image ist ziemlich groß; Chrome, Internet Explorer 11, Firefox, Safari und Opera sind in der Lage, das border-image vollständig zu rendern. Es sollte jedoch beachtet werden, dass das Rahmenbild nur auf rechteckigen Formen oder Kästchen funktioniert. Das bedeutet, dass das Hinzufügen von border-radius die Ausgabe des border-image .

Im Folgenden finden Sie die Spezifikation der border-image Eigenschaft:

 Randbild:  ; 

Das ist der Pfad, der das Bild angibt, das im Rahmen verwendet wird. Hier werden wir es stattdessen mit CSS3 Gradient ausfüllen. Um dieselbe Ausgabe wie in den vorherigen Beispielen zu erhalten, wenden wir den CSS3-Farbverlauf innerhalb des border-image wie folgt an.

 .box {Breite: 250px; Höhe: 250px; Hintergrund: #eee; Grenze: 20px fest transparent; -moz-border-image: -moz-linear-gradient (oben, # 3acfd5 0%, # 3a4ed5 100%); -webkit-border-image: -webkit-linear-gradient (oben, # 3acfd5 0%, # 3a4ed5 100%); border-image: linear-gradient (nach unten, # 3acfd5 0%, # 3a4ed5 100%); Grenze-Bild-Scheibe: 1; } 

Das Rahmenbild zeigt nichts an, wenn wir die Rahmenbreite nicht angeben. So, wie Sie oben sehen können, fügen wir 20px mit transparenter 20px hinzu. Dann setzen wir den Wert für border-image und linear-gradient zusammen mit dem Vendor-Präfix für frühere Versionen von Webkit und Firefox.

Das Hinzufügen von Border-Image-Slice, das oben gezeigt wird, wird die inneren Offsets des image-border festlegen. Diese Eigenschaft wird benötigt, um den Farbverlauf vollständig in der Umgebung der Box anzuzeigen. Siehe die Ausgabe unten:

Diese Methode bietet mehr Flexibilität, um den Gradienten in jede mögliche Richtung anzupassen; von links nach rechts, von oben nach unten, diagonal oder schräg. Im Folgenden finden Sie einige Beispiele:

Von links nach rechts verlaufender Verlauf

Diagonale Steigung

Der Aufstieg von Trolling & Niedergang der Online-Etikette

Der Aufstieg von Trolling & Niedergang der Online-Etikette

Ob wir es zugeben oder nicht, das öffentliche menschliche Verhalten wird beeinflusst, ja, durch bestimmte Normen diktiert, die die höfische, zivilisierte Gesellschaft für akzeptabel hält. Wir werden nicht über unschuldige Bemerkungen von Fremden verärgert, wir nennen uns keine abfälligen Namen oder laute Obszönitäten, und wir folgen sicherlich nicht einander unerbittlich, um ein klein wenig Kritik über die neueste Schöpfung oder den letzten Gedanken des Ziels zu äußern .Leider schei

(Tech- und Design-Tipps)

Schreiben von Inhalten, die Leser konvertieren und Verkäufe liefern

Schreiben von Inhalten, die Leser konvertieren und Verkäufe liefern

Conversion Rate Optimization ist eine der komplexesten Formen des Schreibens im E-Commerce. Deshalb behaupten nur sehr wenige Autoren, dies tun zu können. Tatsache ist, dass sie Angst haben, es zu behaupten. Bei CRO geht es nicht nur um Schreiben. Die Verkaufspsychologie macht den meisten Autoren Angst, weil es so viele Elemente gibt, von denen das Schreiben nur ein kleiner Teil ist .

(Tech- und Design-Tipps)