CSS
Halbtransparente Hintergründe
(msc) Die Cascading Style Sheets wurden 1994 entwickelt und seit 1998 ist CSS Level 2 in Kraft; die Umsetzung von Level 3 lässt noch auf sich warten. Einige der Neuerungen, die mit Level 3 Einzug halten werden, stehen den Webdesignern aber jetzt schon zur Verfügung. Beispielsweise die Transparenz: CSS Level 3 wird es über die Eigenschaft «Opacity» erlauben, Elemente als durchsichtig erscheinen zu lassen. Ein mit opacity:0.5; ausgestattetes Element lässt den Hintergrund zu fünfzig Prozent durchscheinen. Es ist mit anderen Worten halb durchsichtig.
Obwohl der momentan aktuelle CSS-Standard keine «Opacity»-Eigenschaft kennt, brauchen Webdesigner nicht auf diese schöne Möglichkeit zu verzichten. Sowohl für Internet Explorer als auch für Mozilla und Safari gibt es proprietäre Erweiterungen des CSS-Standards für die Definition von Transparenz. Damit können hübsche Effekte erzielt werden.
Mozilla ab Version 1.6 verwendet die Eigenschaft «-moz-opacity» für Transparenz. Ein halbdurchsichtes Element wird wie folgt definiert:
-moz-opacity:0.5;
Auch Firefox versteht diese CSS-Instruktion. Für den Internet Explorer kommt eine Filter-Deklaration zum Einsatz:
alpha(opacity=50);
Den Text wird man häufig nicht transparent anzeigen wollen. Setzt man im für die Text-Elemente die Direktive position:relative, dann wird die Transparenz-Eigenschaft nicht vererbt und die Schrift erscheint vollschwarz. Allerdings nur im Internet Explorer – Mozilla und Firefox zeigen den Text auch mit gesetzter Positionsangabe transparent.
Auf der Website www.domedia.org/oveklykken/css-transparency-image.php gibt es ein Beispiel, wie man Mouseover-Effekte mit Transparenz realisieren kann.
<!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<meta http-equiv=»content-type» content=»text/html;charset=iso-8859-1″>
<title>Transparenz-Demo</title>
<style type=»text/css» media=»screen»>
<!–
body { background:url(glas_2.jpg) repeat; }
p { font-size: x-large; font-weight: bold }
.transbox {
width: 300px;
background-color: #fff;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
.intransparent{
position: Relative;
}
–>
</style>
</head>
<body>
<div class=»transbox»>
<p>Dieser Text steht in der durchsichtigen Box und der Text selbst ist ebenfalls transparent.</p>
<p class=»intransparent»>Dieser Text steht in der durchsichtigen Box, der Text selbst ist jedoch nicht durchsichtig..</p>
</div>
</body>
</html>
Und so schaut die Sache aus: Siehe Transparenzdemo!
Über CSS ist es möglich, Elemente der Website transparent erscheinen zu lassen.
Der Code für die Webseite mit Transparenz (der Quelltext der oben stehenden Seite).