WEBDESIGN

8 HTML / CSS Effekte mit Crossbrowser – Alternative

Es gibt jede Menge Möglichkeiten, um spezielle Effekte im Browser darzustellen. Zum Beispiel durch Bilder, CSS oder Flash. Das schwierige an der ganzen Sache ist, diese Effekte in allen Browsern gleich aussehen zu lassen. In diesem Artikel werfen wir einen Blick auf 8 Snippets, die uns zeigen, wie man einige CSS Effekte browserübergreifend darstellen kann.

Min/Max Width

Die Angabe einer minimalen und maximalen Breite kann in vielen Fällen sinnvoll sein, leider ist der Internet Explorer erst in neueren Versionen in der Lage, diese Angaben richtig zu interpretieren. Da alte Internet Explorer Versionen alles andere als standardkonform sind, ist es möglich mehr oder weniger Javascript Code innerhalb von CSS zu verwenden.

#content {
width: expression(document.body.clientWidth < 502? "500px" : document.body.clientWidth > 1242? "1240px" : "auto");
	min-width: 500px;
	max-width: 1240px;
}

RGBA

Mit RGBA können transparente Farben dargestellt werden, damit das auch in den gängigen Internet Explorer Versionen funktioniert, muss man auf IE spezifische Filter zurückgreifen.

Das Ganze ist aber mehr als Hack zu sehen, den es gibt keinen speziellen RGBA Filter, statt dessen wird auf einen Gradientfilter zurückgegriffen. Dieser Filter bekommt die gleiche Start- und Endfarbe.

.element {
  background-color: transparent;
  background-color: rgba(255, 255, 255,0.8);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
}

Dabei geben die ersten beiden Zahlen die Transparenz an.

Opacity/Transparenz

Fast alle Internet Explorer Versionen, außer der neusten, haben Probleme transparente Objekte darzustellen, zumindest verstehen sie die CSS Eigenschaft opacity nicht. Aus diesem Grund muss auch hier wieder mit Filtern gearbeitet werden.

.class {
	ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* internet explorer 8 */
	filter: alpha(opacity=70); /* internet explorer 5~7 */
	-khtml-opacity: 0.7;      /* khtml, old safari */
	-moz-opacity: 0.7;       /* mozilla, netscape */
	opacity: 0.7;           /* fx, safari, opera */
}

Transform

Transform ist eine CSS3 Eigenschaft, welche man dazu verwenden kann, um Bilder zu skalieren oder zu drehen. Natürlich können damit nicht nur Bilder sondern auch andere Elemente gedreht werden.

Transform wird zwar mittlerweile von fast allen Browsern unterstützt, möchte man ähnliche Effekte (auf Bildern) aber auch in älteren IE Versionen darstellen, muss man wieder mal auf Filter zurückgreifen.

.trans {
	transform:
		rotate(180deg)
		scale(-1, 1);

	/* firefox, safari, chrome, etc. */
	-webkit-transform:
		rotate(180deg)
		scale(-1, 1);
	-moz-transform:
		rotate(180deg)
		scale(-1, 1);

	/* ie */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);

	/* opera */
	-o-transform:
		rotate(180deg)
		scale(-1, 1);
}

Text-Shadow

Auch mit Textschatten haben viele Internet Explorer Versionen Probleme. Auch hier muss wieder auf Filter zurückgegriffen werden, leider kann es passieren, dass dabei Texte unleserlich werden. Es ist also zu empfehlen, wenn nicht unbedingt nötig, auf Textschatten im Internet Explorer unter Version 9 zu verzichten.

text-shadow: #000000 0 0 1px;
	zoom:1;
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);

	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";

Box-Shadow

Genau wie Textschatten, schaffen es ältere Versionen vom Internet Explorer auch nicht, normale Schatten darzustellen. Die Lösung dabei ist praktisch dieselbe, wieder muss man auf Filter zurückgreifen.

    -moz-box-shadow: 0 0 4px #000;
	-webkit-box-shadow: 0 0 4px #000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
	filter:
			progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
			progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
			progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
			progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
	box-shadow: 0 0 4px #000;

Quotes

Das blockquote Element ist dafür da, um größere Zitate darzustellen. Damit sich ein solches Zitat auch optisch von dem Rest der Seite abhebt, würden sich Anführungszeichen sehr gut machen.

Mit dem content Attribut und der Pseudoklasse :before ist das Ganze auch leicht umzusetzen, für alte Internet Explorer Varianten, steht diese Möglichkeit allerdings nicht zur Verfügung.

blockquote:before {
	display: block;
	float: left;
	margin: 10px 20px 0 0;
	font-size: 110px;
	content: open-quote;
	color: #2f2f2f;
	text-shadow: 0 1px 1px #909090;
}

Tooltip

Es gibt die Standardtooltips, welche aber nicht sonderlich spektakulär aussehen. Auf Staticfloat wurde bereits ein jQuery Plugin vorgestellt, mit dem man Tooltips ganz einfach mit Javascript umsetzen kann.

Das Ganze ist jedoch auch auf einfache Weise mit Hilfe von CSS Pseudoklassen möglich. Der Vorteil der CSS Variante liegt dabei klar auf der Hand, es wird kein Javascript benötigt. Der Nachteil ist aber auch schnell klar, da ältere Browser damit oft Probleme haben.

a:hover:after {
	position: absolute;
	padding: 10px;
	margin: -30px 0 0 -20px;
	font-size: 12px;
	content: attr(title);
	color: black;
	text-shadow: 0 1px 1px gray;
	background: #469DFA;
	border: 1px solid #2f2f2f;
}


Schreib einen Kommentar