Verläufe mit CSS erstellen

Wir brauchen
Ein Code-Editor
Die alphanumerischen Codes der zu verwendenden Farben
Ein Webbrowser

Schritt 1

Ich beginne damit, einen Ordner für dieses Tutorial zu erstellen, den ich "t ." nennerucos_css"Darin werde ich einen weiteren Anruf erstellen"CSS“ In ihnen werde ich die Dateien aufbewahren, die ich brauche.

Schritt 2

Ich gehe in diesem Fall zu meinem Code-Editor, verwende Klammern und erstelle eine neue Datei "index.html"Das werde ich im Stammverzeichnis des Ordners speichern"tricks_css"Ich werde auch eine Datei erstellen"style.css"Das werde ich im" css "-Ordner speichern, der im . erstellt wurde Schritt 1.

Schritt 3

In meine Datei "index.html" schreibe ich die grundlegende HTML-Struktur und füge einen Verweis auf das Stylesheet hinzu "style.css"Das im vorherigen Schritt im Pfad speichern"css / style.css”.
Code aus index.html:

 CSS-Tricks - Farbverläufe 

Schritt 4

In die Datei "index.html" werde ich ein neuesinnerhalb dessen ich später die Klasse zuordnen werde "Gradient"Was ich später in die Datei schreiben werde"style.css”.
Der index.html-Code sieht wie folgt aus:

 CSS-Tricks

Schritt 5

Jetzt werde ich an der Datei arbeiten "style.css“, beginne ich mit der Definition der Größe, die das Etikett abdecken soll , ich werde eine Breite von 100 % und eine Höhe von 100 % festlegen, ich erkläre, dass es keine Ränder oder Auffüllungen hat und ich sage Ihnen, dass seine Position absolut ist, so dass es die Gesamtgröße auf dem Bildschirm abdeckt.
Style.css-Code:

 Körper {Breite: 100%; Höhe: 100%; Rand: 0px; Füllung: 0px; Position: absolut; }

Schritt 6

Wir bearbeiten unser CSS weiter, jetzt füge ich die Klasse hinzu "Gradient"Ich werde darin angeben, dass es mit einer Höhe von 100% und einer gleichen Breite angezeigt werden soll. Ich werde schreiben, dass es einen Hintergrundselektor hat, der die Eigenschaft enthält."linear-Gradient ()Was wie folgt funktioniert…
Innerhalb der Klammern geben wir an, wohin das Ende unseres Farbverlaufs gerichtet ist und welche Farben er von einem Ende zum anderen zeigt. Die Syntax wäre ungefähr so:

 Hintergrund: Linear-Gradient (Richtung, Farbstop1, Farbstop2,…); 

In der Position namens Direction definieren wir die Richtung, der der Gradient auf dem Bildschirm folgtlinks oben = links und oben
rechts oben = rechts und oben
unten rechts = unten und rechts
unten links = unten und nach links
nach unten rechts = von der oberen linken Ecke nach unten und rechts
nach unten links = unten und rechts beginnend von der oberen rechten Ecke
nach oben rechts = oben und rechts von links unten beginnend
nach oben links = oben und links von unten rechts beginnend
Bei den Farben können Sie Ihre bevorzugten Farben auswählen. In diesem Fall werde ich einen Farbverlauf erstellen, der von Weiß nach Schwarz durch zwei Blautöne beginnt.
Unser CSS-Code würde dann wie folgt aussehen:

 Körper {Breite: 100%; Höhe: 100%; Rand: 0px; Füllung: 0px; Position: absolut; } .gradient {Breite: 100%; Höhe: 100%; Hintergrund: linear-Gradient (nach unten rechts, # fff, # 00e2ff, # 00f, # 000); } 

Das Ergebnis wäre folgendes.

Aber wie alles auf dieser Welt gibt es andere Möglichkeiten, es viel einfacher und schneller zu machen und ohne viel zu tippen, können wir in unseren Browser gehen und nach der folgenden Webadresse suchen http: //www.colorzill… radient-editor /

Darin finden sie eine Reihe von Farbverläufen, die bereits vordefiniert sind und die sie auch anpassen können. Sie müssen nur einen auswählen, ihn nach Belieben anpassen, den CCs-Code kopieren, der auf der rechten Seite des Bildschirms angezeigt wird und fügen Sie es in die "Gradient" -Ebene ein, die wir bereits erstellt haben, indem Sie das, was wir darin finden, in der ersetzen Schritt 6. Ich empfehle diese Option, weil ich sie besonders nutze und der Code, den sie uns gibt, in jedem Browser funktioniert.

Nachdem wir diesen Code kopiert haben, fügen wir ihn in unsere CSS ein und belassen ihn wie folgt:

 Körper {Breite: 100%; Höhe: 100%; Rand: 0px; Füllung: 0px; Position: absolut; } .gradient {Breite: 100%; Höhe: 100%; Hintergrund: RGB (212,228,239); / * Alte Browser * / Hintergrund: -moz-linear-gradient (oben, rgba (212,228.239,1) 0%, rgba (134,174,204,1) 64%); / * FF3.6 + * / Hintergrund: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, rgba (212.228.239,1)), Farbstopp (64%, rgba (134.174.204,1 .) ))); / * Chrome, Safari4 + * / Hintergrund: -webkit-linear-gradient (oben, rgba (212,228.239,1) 0%, rgba (134,174,204,1) 64%); / * Chrome10 +, Safari5.1 + * / Hintergrund: -o-linear-gradient (oben, rgba (212.228.239,1) 0%, rgba (134.174.204,1) 64%); / * Opera 11.10+ * / Hintergrund: -ms-linear-gradient (oben, rgba (212,228.239,1) 0%, rgba (134,174,204,1) 64%); / * IE10 + * / Hintergrund: linear-Gradient (nach unten, rgba (212,228.239,1) 0%, rgba (134,174,204,1) 64%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# d4e4ef', endColorstr = '# 86aecc', GradientType = 0); } 

Und das Ergebnis wäre in diesem Fall dieses.
VERGRÖSSERN
Ich hoffe, es wird nützlich sein, für weitere Tricks vergessen Sie nicht, mir zu folgen …
Wenn Ihnen dieses Tutorial gefallen hat, vergessen Sie nicht, es zu bewerten und wenn Sie Fragen oder Kommentare haben, hinterlassen Sie diese unten, ich werde Ihnen gerne antworten. Grüße … Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben