Coding | CSS

IE-Gradient hinter Textcontainer legen

boulder 927189 1920

Manche CSS3-Effekte können im Internet-Explorer mit Filtern simuliert werden. Da der Code dafür nicht valide ist, hat es sich etabliert, IE-Stile aus dem Mainstylesheet auszulagern und so einzubinden, dass nur Internet-Explorer sie “lesen” können. Mit derselben Methode kann man dem IE auch Elemente bereitstellen, die für andere Browser verborgen bleiben.

Die Anwendung von Filtern im Internet-Explorer hat den Seiteneffekt, dass es die Schrift in den betroffenen Elementen “zerwutzelt”, was so aussieht, als gäbe es kein Antialiasing.

Eine (skalierbare) Lösung kann sein, den Gradienten in ein Element hinter den Text zu legen. Da es nur vom IE benötigt wird, setzte ich das Element in Conditional Tags die bis zum IE9 reichen.

<!-- Markup --> <div class="textcontainer"> <!--[if lte IE 8]><div class="iegradient"></div><![endif]--> Text </div>
/* CSS */ .textcontainer { position:relative; padding:0.875em 1em; } .iegradient{ display:block; position:absolute; top:0px; right:0px; bottom:0px; left:0px; z-index:-1; filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#f9f9f9', EndColorStr='#eeeeee'); }

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.