Im Schatten der Filter funktioniert nicht in Firefox

CSS, die als Eigenschaft "Filter" verwendet ist eigentlich proprietär zu Microsofts Internet Explorer und wird nicht außerhalb dieses Browsers zu arbeiten. Das Filterattribut ist nicht standardkonforme; nicht nur wird es nicht Arbeit mit Firefox und anderen Browsern, werden nicht auf das Worldwide Web Consortium CSS-Validator überprüft. Leider gibt es keine Lösung browserübergreifendes CSS Schatten.

Filter und CSS

Filter sind ein proprietäres Internet Explorer-Feature. Das "Filter"-Element für eine Text-Shadow erfordert eine Reihe von Eigenschaften auf Text arbeiten; Dazu gehören ein Zoom, eine Hintergrundfarbe und Filterelemente insgesamt angeben:

{.shadow}Zoom: 1;Farbe: #000000;Hintergrundfarbe: #CCCCCC;Filter: chroma(color=#CCCCCC) shadow(color=#C0C0C0,direction=120,strength=21);}

Dies ist nicht der einzige Filter zur Verwendung mit Internet Explorer festgelegt, und sie alle teilen die gleiche grundlegende Syntax. Es hat, im Hinblick auf CSS 2.1 entwickelt, obwohl es nicht als gültiges CSS zählt und als einen Hack. Während der Filter mit Internet Explorer funktioniert, funktioniert es nicht in jedem anderen Browser.

CSS3 und Firefox

Die Lösung für Schlagschatten in Firefox und andere nicht-IE-Browser soll CSS3 verwenden. CSS3 hat eine Text-Schatten und eine Box-Shadow-Eigenschaft, die beide tun genau das, was sie klingen mag. Diese beiden verwenden ähnliche Syntax angeben der horizontale Wert, vertikale Wert und Farbe sowie Möglichkeit verwischen und zu verbreiten. Das Problem hierbei ist, dass Internet Explorer fleckig CSS3-Unterstützung hat-- und ab April 2012, IE9 und früheren Versionen von Internet Explorer nicht die Shadow-Eigenschaft erkennen definiert durch CSS3. Jedoch zwischen den beiden Elementen schaffen Sie eine Website, die funktioniert in Firefox und IE.

Verwendung von Text-Schatten und Box-shadow

Die Text-Schatten und Box-Shadow Eigenschaften haben das gleiche Grundkonzept. Wenn einen grauer Textschatten haben alle H1-Header festgelegt werden soll, würde die CSS beispielsweise wie folgt aussehen:

H1 {Text-Shadow: 2px 2px 2px #CCCCCC;}

Die ersten 2px wird der Schatten horizontal um zwei Pixel, die zweite wird der Schatten vertikal zwei Pixel und die dritte als Unschärfe Abstand. Die Unschärfe-Pixel können Sie weglassen, wenn Sie keine Unschärfe auf dein Schatten werden soll.

Feld-Schatten ist die gleiche, mit einem zusätzlichen Element zwischen die Unschärfe und die Farbe: die Ausbreitung. Der Spread bezeichnet die Größe des Schattens im Feld.

Entwicklung für mehrere Browser

Legen Sie schattierten Text, der funktioniert in IE und Firefox müssen Sie lediglich das Filterelement und Text-Shadow-Eigenschaft im gleichen Element haben. Zum Beispiel, wenn Sie H1 schattiert in allen Browsern machen wollte, würden Sie etwas ähnliches zu verwenden:

{.shadow}Text-Shadow: 2px 2px 2px #CCCCCC;Zoom: 1;Farbe: #000000;Hintergrundfarbe: #CCCCCC;Filter: chroma(color=#CCCCCC) shadow(color=#C0C0C0,direction=120,strength=21);}

Dies ist keine gültige CSS, werden nicht überprüft, aber es eine ähnliche schattierte Wirkung in Firefox und IE schafft.