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
Inhaltsverzeichnis
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>
Unser erster Farbverlauf geht von blau nach schwarz und sieht dann so aus
Wenn du den CSS Code in folgende Zeile ersetzt geht der Farbverlauf von links nach rechts
background-image: linear-gradient(to right,blue, black);
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);
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);
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);
Das Selbe kann man auch mit mehreren Farben gleichzeitig machen
background-image: linear-gradient(pink 10%, yellow 20%, red 70%);
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);
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);
Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.