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

50+ Seiten zum Herunterladen kostenloser Soundeffekte für fast alles

Stellen Sie sich einen Film oder ein Video ohne Soundeffekte vor. Selbst ein großartiger Film wie Titanic würde nichts weiter als ein Witz sein, wenn es keine "Wham" -, "Bam" - und "Smash" -Sounds darin gibt. Hintergrundmusik und Soundeffekte sind wichtig, um ein Video (oder sogar eine Audioproduktion) in vollem Umfang in Szene zu setzen.E

(Tech- und Design-Tipps)

Mischen Sie Ihre eigenen CSS-Verläufe mit dieser kostenlosen Web App

Jeder Webdesigner sollte über CSS3-Gradienten Bescheid wissen. Sie gibt es schon seit Jahren und sie werden von allen gängigen Browsern unterstützt.Und jetzt können Sie mit kostenlosen Web-Apps wie Blend CSS3-Verläufe direkt mit visuellen Editoren im Browser erstellen. Sie können zwischen linearen und radialen Farbverläufen wählen, während Sie mit Farben mischen.Die erst

(Tech- und Design-Tipps)