CSS: 🌈 Farbverlauf erstellen – So gehts

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
smileys

Ein Farbverlauf lässt sich mit CSS relativ einfach darstellen. Farbverläufe sehen nicht nur gut aus, sondern eignen sich auch perfekt als Hintergründe oder sonstige Webseiten Verschönerungen.

Farbverläufe werden in CSS mit background-image: linear-gradient() erstellt

Beispiel1 : CSS Farbverlauf von oben nach unten

zuerst erstellen wir einen Container in dem wir verschiedene Farbverläufe testen können

<style>

.box{
width: 400px;
height: 400px;
background-image: linear-gradient(blue, black);

}
</style>


<div class="box" ></div>

Ergebnis

Unser erster Farbverlauf geht von blau nach schwarz und sieht dann so aus

Beispiel2 : CSS Farbverlauf von links nach rechts

Wenn du den CSS Code in folgende Zeile ersetzt geht der Farbverlauf von links nach rechts

background-image: linear-gradient(to right,blue, black);

Ergebnis

Beispiel2 : CSS Farbverlauf nach rechts unten

Ebenfalls können wir einen Farbverlauf nach rechts unten erstellen. Der Befehl ist dafür to right bottom. Auch hier benötigen wir wieder das to Attribut

background-image: linear-gradient(to right bottom, blue, black);

Ergebnis

Beispiel2 : CSS Farbverlauf in einem Beliebigen Winkel

Oft ist es notwendig den Farbverlauf in einem fest definierten Winkel zu erstellen. Dafür kannst du direkt die Grad in deg (degree) eingeben. Hier ein Beispiel.

background-image: linear-gradient(20deg, blue, black);

Ergebnis

Beispiel2 : Farbverlauf in Prozent verteilen

Ebenfalls hast du die Möglichkeit den Farbverlaub in Prozent % zu verteilen. In einem weitern Beispiel sieht das dann so aus

background-image: linear-gradient(blue 90%, black);

Ergebnis

Das Selbe kann man auch mit mehreren Farben gleichzeitig machen

background-image: linear-gradient(pink 10%, yellow 20%, red 70%);

Farbverlauf : für Chrome, Safari, Internet Explorer kompatibel machen

Damit dein Farbverlauf auch in anderen Browsern richtig angezeigt wird musst nur zu den folgenden Beispielen noch. Folgende CSS Zeilen hinzufügen.

Jeder Browser hat unterschiedliche begriffe für den linear-gradient

background-image: -webkit-linear-gradient(blue, black);
background-image: -moz-linear-gradient(blue, black);
background-image: -ms-linear-gradient(blue, black);
background-image: -o-linear-gradient(blue, black);
background-image: linear-gradient(blue, black);

Beispiel für unseren Farbverlauf von links nach rechts

Dieser Code wäre jetzt für andere Browser wie Google Crome, Safari, Firefox und den Internet Explorer kompatibel

background-image: -webkit-linear-gradient(to right,blue, black);
background-image: -moz-linear-gradient(to right,blue, black);
background-image: -ms-linear-gradient(to right,blue, black);
background-image: -o-linear-gradient(to right,blue, black);
background-image: linear-gradient(to right,blue, black);

Hat dir der Beitrag gefallen?


    css        css farbverlauf   

Das könnte dich interessieren!

Weitere Kategorien






Schreibe einen Kommentar



30959