logo

Bootstrap 4 alpha

Mega Menue Sidebar

css3area


CSS 3 Linear Gradient

Der folgende Layer wurde mit css3 gradient-backgrounds über Farbwahl Hexacode versehen wobei 3 Werte entscheidend sind. Der erste Wert gibt den Startpunkt des Verlaufs wieder mit anschliessender Farbgebung ( =2. Wert ). Die nachfolgende Prozentzahl gibt den Wert an wo der Verlauf letztendlich beginnen soll im Bezug zum Startpunkt. Der nächste Farbwert gibt die zweite Farbedefintion wieder und die darauf folgende Prozentzahl, wie oben, wo dieser beginnen soll, usw. Die Höhenangabe ist selbsterklärend. Im Beispiel wurde auch Fallback für ältere Browser mit einbezogen, wobei der linear-gradient Wert der aktuell gültige, für alle modernen Browser ist.

 

 

 


.my_CSS3_class {
height:80px;
background: #b5bdc8; /* Old browsers */
background: -moz-linear-gradient
  (top, #b5bdc8 0%, #828c95 36%, #28343b 100%); 
  /* FF3.6-15 */
background: -webkit-linear-gradient
  (top, #b5bdc8 0%,#828c95 36%,#28343b 100%); 
  /* Chrome10-25,Safari5.1-6 */
background: linear-gradient
  (to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); 
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient
  ( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); 
  /* IE6-9 */
}

 

Der folgende Layer ist im Prinzip selbsterklärend zu Obigem, eben mit horizontalem Verlauf "to-right...".

 

 


.my_CSS3_class {
background: #d8e0de; /* Old browsers */
background: -moz-linear-gradient
  (left, #d8e0de 0%, #aebfbc 22%, #99afab 33%, #8ea6a2 50%, #829d98 67%, #4e5c5a 82%, #0e0e0e 100%); 
  /* FF3.6-15 */
background: -webkit-linear-gradient
  (left, #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%); 
  /* Chrome10-25,Safari5.1-6 */
background: linear-gradient
  (to right, #d8e0de 0%,#aebfbc 22%,#99afab 33%,#8ea6a2 50%,#829d98 67%,#4e5c5a 82%,#0e0e0e 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient
 ( startColorstr='#d8e0de', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 */
height:80px;
}

 

CSS 3 Radial Gradient

Auch radiale Verläufe sind natürlich möglich wobei diese eine gewisse Form des "Try-out" benötigen. Durch "Ausprobieren" mit Werten auch im Bezug zueinander, lassen sich doch "ansehnliche" Erfolge erzielen.

 

 

Die Angabe "farthest-side" ist eine Gecko-Moz Browser sepezifische Variante, siehe moz-radial-gradient für mehr Informationen.


.my_CSS3_class {
height:80px;
background-image: radial-gradient
  (ellipse farthest-corner at 45px 45px , 
   #222 0%, rgba(0, 0, 137, 0) 50%, #47520a 95%);
}

Die Farbwerte können in Hexacode, RGB, RGBA, HSL, HSLA angegeben werden. Die Verläufe sind neben horizontal, vertikal, radial auch diagonal ansteigend und absteigend über den "+/- Wert deg "anzuwenden. Einen guten Gradientsgenerator finden sie hier.