Browserübergreifende lineare Verläufe in CSS3

Das Erstellen linearer Verläufe in CSS3 ist ein Kinderspiel, aber die browserübergreifende Kompatibilität kann ein Kinderspiel sein Herausforderung. Webkit-Browser (Chrome und Safari) und Firefox verwenden eine andere Syntax als Opera und Internet Explorer.

Webkit- und Firefox-Alternativen

Die bereitgestellte Webkit- und Firefox-Syntax erstellt eine diagonaler linearer Farbverlauf von rechts oben nach links unten. So erreichen Sie denselben Farbverlauf mit Opera und Internet Explorer:

<br>background-image: -ms-linear-gradient(right, #0c93C0, #FFF); <br>Hintergrundbild: -o-linear-gradient(right, #0c93C0, #FFF);<br>

Browserübergreifende horizontale Farbverläufe

Um einen horizontalen Farbverlauf zu erstellen, ersetzen Sie die Richtung „oben“ entweder durch „links“ oder „richtig“.

Internet Explorer

Für Internet Explorer-Versionen unter 10 müssen Sie die Filtereigenschaft verwenden:

<br>/<em>IE7-</em>/ Filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);<br>/<em>IE8 </em>/ -ms-filter: "progid:DXImageTransform.Microsoft .Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";<br>

-ms-Filter-Syntax

Die -ms-filter-Syntax lautet wie folgt:

<br>-ms-filter: progid:DXImageTransform.Microsoft.Gradient(</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> startColorStr='#0c93c0', /*Start color*/
 endColorStr='#FFFFFF',   /*End color*/
 GradientType=0           /*0=Vertical, 1=Horizontal gradient*/