CSS3 Gradient - Hintergrund Verlauf

So einfach kann man mit CSS-Style eine Hintergrundfarbe festlegen: background-color: #9bdeff; Aber ein Hintergrungverlauf zu erstellen war früher etwas aufwendig, mit Photoshop ein Bild erstellen, diesen mit CSS-Sylse einbinden. Heute beherschen alle Akuelle Brower die CSS3 Gradient also Hintergrund Verlauf mit CSS erstellen.

CSS - Linear Gradient

.gradient_bg{
   background-color: #9bdeff; /* Fallback für ältere nicht unterstützende Browser */
   background-image: -webkit-gradient(linear, left top, left bottom, from(#9bdeff), to(#036AA4));
   background-image: -webkit-linear-gradient(top, #9bdeff, #036AA4);
   background-image: -moz-linear-gradient(top, #9bdeff, #036AA4);
   background-image: -ms-linear-gradient(top, #9bdeff, #036AA4);
   background-image: -o-linear-gradient(top, #9bdeff, #036AA4);
   background-image: linear-gradient(to bottom, #9bdeff, #036AA4);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9bdeff', endColorstr='#036AA4', GradientType=0);
}
	
.beispiel-box{height: 60px; width: 500px;}
HTML
<div class="beispiel-box gradient_bg"></div>
Beispiel
CSS - Linear Gradient mit 2 stops

.linear-gradient-2-stops{
   background-color: #9bdeff; /* Old browsers */
   background-image: -moz-linear-gradient(top, #9bdeff 0%, #9bdeff 50%, #036aa4 51%, #036aa4 100%); /* FF3.6+ */
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9bdeff), color-stop(50%,#9bdeff), color-stop(51%,#036aa4), color-stop(100%,#036aa4)); /* Chrome,Safari4+ */
   background-image: -webkit-linear-gradient(top, #9bdeff 0%,#9bdeff 50%,#036aa4 51%,#036aa4 100%); /* Chrome10+,Safari5.1+ */
   background-image: -o-linear-gradient(top, #9bdeff 0%,#9bdeff 50%,#036aa4 51%,#036aa4 100%); /* Opera 11.10+ */
   background-image: -ms-linear-gradient(top, #9bdeff 0%,#9bdeff 50%,#036aa4 51%,#036aa4 100%); /* IE10+ */
   background-image: linear-gradient(to bottom, #9bdeff 0%,#9bdeff 50%,#036aa4 51%,#036aa4 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bdeff', endColorstr='#036aa4',GradientType=0 ); /* IE6-9 */
}

.beispiel-box{height: 60px; width: 500px;}
HTML
<div class="beispiel-box linear-gradient-2-stops"></div>
Beispiel
CSS - Radial Gradient

.radial-gradient_bg{
    background-color: #9bdeff; /* Fallback für ältere nicht unterstützende Browser */
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#9bdeff), to(#036AA4)); /* Alte WebKit Syntax */  
    background-image: -webkit-radial-gradient(center center, circle, #9bdeff 0%, #036AA4 100%);	/* Neue WebKit syntax */  
    background-image: -moz-radial-gradient(center center, circle contain, #9bdeff 0%, #036AA4 100%);
    background-image: -ms-radial-gradient(center center, circle contain, #9bdeff 0%, #036AA4 100%); /* IE10+ */  
    background-image: -o-radial-gradient(center center, circle contain, #9bdeff 0%, #036AA4 100%); /* Opera */ 
}
	
.beispiel-square{height: 60px; width: 60px;}
HTML
<div class="beispiel-square radial-gradient_bg"></div>
Beispiel

Pfeile mit CSS erstellen

Eine gängige Methode um einfache Pfeile mit CSS zu erstellen wird mit hilfe von Border-Eigenschaft realisiert. So kann so ein Pfeil aussehen, diesen findet man zum Beispiel in Bilder-Shows.

CSS
.arrow{
   display: block;
   height: 60px;
   width: 60px;
   position: relative;
}

.arrow:before{ 	
   content: "";
   position: absolute;
   left: 36%;
   top: 16%;
   display: block;
   height: 0;
   width: 0;
   border: 20px solid;
   border-color: transparent transparent transparent #fff;
}
HTML
<a class="arrow gradient_bg"></a>
Beispiel