Diese Seite beeinhaltet Kode zum kopieren.
Auf einem kleinem Browser sieht das nicht gut aus,
mach doch bitte mal deinen Desktop an !

Farbspiele mit CSS-3

Video: 720p (HD) Deutsch, von Website-Bauen.de
Wie üblich, würden wir uns auf Ihr "like" bei YouTube freuen - Danke

Das HTML und CSS dazu, wie im Video:

ACHTUNG: Gradient Styling wird nicht in alten Browsern dargestellt

Live Beispiel 1
Live Beispiel 2

HTML Code:
Für die Beispiele wie im Video und vielleicht für Deine Experimente:
Wir hatten 8 Boxen in den "content" gesetzt

<div class="box1">BOX1</div>
<div class="box2">BOX2</div>
<div class="box3">BOX3</div>
<div class="box4">BOX4</div>
<br />
<div class="box5">BOX5</div>
<div class="box6">BOX6</div>
<div class="box7">BOX7</div>
<div class="box8">BOX8</div>


CSS Code:
1.) Nur um den Boxen im Beispiel ein wenig Halt zu geben. Wenn sie nicht auf Dein Website passen,
musst Du sie Sie unten im CSS kleiner machen oder das <br /> zwischen jede zweite Box setzen.

<style>
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
    float: left;
    height: 184px;
    width: 184px;
    font-size: 24px;
    color: #ddd;
    border: 1px solid #000;
    margin: 6px;
    padding: 20px;
}
</style>


2.) Wichtig: Die Prefixes sind im CSS ganz unten nicht ausgeschrieben z.B:
Kopier den Code direkt aus dem folgendem Fenster

.box1 {background:
   -webkit-linear-gradient(yellow, red, purple); /* für Chrome und Safari Browser */
    -moz-linear-gradient(yellow, red, purple);   /* für Firefox Browser*/
     -ms-linear-gradient(yellow, red, purple);    /* für Internet-Explorer */
      -o-linear-gradient(yellow, red, purple);     /* für Opera Browser */
} box2 {background: ...

DESHALB: Füge die oben genannte code im unteren Fenster bei jedem Beispiel (bei jeder box) dazu.
Den Prefix vor das Wort "linear" oder vor das Wort "radial" einfügen!
Kopier den Code direkt aus dem folgendem Fenster

<style>
.box1 {background: linear-gradient(yellow, red, purple);}
.box2 {background: linear-gradient(#800080, #ff0000, #ffff00, #ff0000, #800080);}
.box3 {background: linear-gradient(#ffff00 25%, #ff0000, #800080 80%);}
.box4 {background: linear-gradient(bottom, #ffff00 25%, #ff0000, #800080 75%);}
.box5 {background: linear-gradient(bottom left, #ffff00 20%, #ff0000 60%, #800080);}
.box6 {background: linear-gradient(180deg, #ffff00 56px,#ff0000 56px,#ff0000 120px,#800080 120px);}
.box7 {background: repeating-linear-gradient(30deg, #fff 5px,#ffff00 15px,#ff0000 30px,#800080 70px);}
.box8 {background: radial-gradient(#ffffff 3%, #ffff00 25%, #ff0000, #800080 75%);
 border-radius: 90px;border: 2px solid transparent;}
</style>


Ähnliches Thema: Button Styling mit CSS-3 ohne jegliches Bildmaterial dafür einzusetzen.

Webseiten Text erstellen lassen
Volle Punkte im Page-speed erreichen
Webhosting kostenlos testen, Hompage online

Tipps für Ihre eigene Webseite

Tipps für jeden Webmaster

Viele Tipps die jeder Webmaster beachten sollte um seinen Internetauftritt zu verbessern. Folgen Sie diesen vorteilhaften Tipps beim Erstellen Ihrer eigenen Website. Mehr lesen »

Responsive Webseiten

Webseiten die sich jeder Browser-Breite anpassen, ist für eine Webseite heute Voraussetzung. Die Zahl der Benutzer von Smartphones steigt täglich.  Mehr lesen »

Brauchen Sie “Nachhilfe”?

Wir bieten Schulung für HTML, CSS und Administration Ihrer Website an. 1zu1 Kurse über Fernhilfe, wobei wir genauestens auf Ihr Anliegen eingehen.  Mehr lesen »

Weitere Artikel für den Internetauftritt »