Zu den besonders beliebten und deshalb schon heute sehr viel benutzten CSS 3-Eigenschaften gehört die Transparenz (opacity). Sie legt den Grad der Transparenz eines Elements fest. Der Wertebereich geht von 0 bis 1, und je niedriger der Wert ist, umso durchsichtiger wird das Element. Die Zuweisung geschieht einfach mit:
< div class=”halbdurchsichtig”></div>.
Der CSS-Code dazu lautet:
.halbdurchsichtig {
opacity: 0.5;
}
Und schon klappt es in allen modernen Browsern – bis auf den Internet-Explorer von Microsoft. In der neuen Version 9 funktioniert das auch mit dem Microsoft-Browser, aber für die älteren Versionen brauchen Sie spezielle Microsoft-Filter, eins für den Internetexplorer 8 und ein weiteres für Versionen unter 8. Erweitern Sie den Style für die Klasse “halbdurchsichtig” wie folgt
.halbdurchsichtig {
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter: progid:DXImageTransform. Microsoft.Alpha(Opacity=50);
zoom: 1;
opacity: 0.5;
}
und die Microsoft-Browser zeigen das DIV-Element jetzt auch halbdurchlässig an.
HTML 5 bringt natürlich mehr als nur semantische Tags. Eines der neuen Features ist das <video> – Tag. Damit können endlich Audio- und Videoclips auf Webseiten angeboten werden, die der Besucher ohne irgendein Plugin abspielen kann.
Web-Video mit HTML 5 ist wirklich sehr einfach einsetzbar. Mit <video src=“meinvideo.mp4“ controls> ist der bewegte Inhalt schon abrufbar. Mit einem Startbild, das man gene benutzt, wenn der Inhalt von einem anderen Server kommt, sieht es dann so aus:
<video width = “640“ height = “480“ src = http://www.meinserver.de/pfad/meinvideo.mp4“ autobuffer controls poster = meinstartbild.png”>
Das Microsoft mit HTML 5 am weitesten zurück liegt, verwundert eigentlich niemanden. Selbst der aktuelle Browser Internet Explorer 8 kann HTML 5 – Elemente nativ nicht unterstützen. Aber es gibt Möglichkeiten, auch dem Microsoft-Browser das neue HTML beizubringen. Damit Sie wissen, bei welchen Plattformen man beim Einsatz von Webvideos mit HTML 5 eventuell nacharbeiten muss, haben wir hier eine kurze Übersicht der wichtigsten Browser bezüglich ihrer Fähigkeit, mit dem <video> – Tag umgehen zu können:
+ Google Chrome
+ Firefox 3.5
+ Safari 3
+ Opera 10.5
- Internet Explorer 7
- Internet Explorer 8
Keine Frage – HTML 5 ist im Anmarsch. Es gibt zwar noch keine finale Version der neuen Markup-Sprache fürs Web, aber im Grunde ist der neue Standard einsatzbereit. Ein guter Anlass, sich das jetzt nicht nur anzuschauen, sondern auch aktiv zu werden und die erste eigene Seite mit HTML 5 und CSS 3 zu entwickeln.
HTML 5 bringt viele neue Funktionen und Möglichkeiten. Aber nichts ist so anders wie die neuen semantischen Tags. Dadurch wird es für Suchmaschinen, aber auch für Ihren Browser überhaupt erst möglich, sich ein Bild von den Inhalten der Website zu machen, den immer häufiger zum Surfen benutzten Smartphones wird die Navigation durch die Site erleichtert oder gar erst möglich gemacht, und last not least werden auch Sie als Webdesigner mit HTML 5 letztlich einfacher durchs Leben kommen.
Wer schon einmal einen Satz Designs für ein CMS erstellt hat, der weiß, wie unnötig komplex der Aufbau eines Dokumentes mit den bisherigen nichtssagenden Tags gerät. Der korrekte Einsatz von HTML 5 eliminiert diese Probleme und wird Ihr Leben als Webdesigner auch dahingehend verändern, dass Sie sich mehr aufs Design konzentriern können und weniger um dessen Mechanik kümmern müssen!
Über die neue Dokument-Typdeklaration und die neuen sprechenden Auszeichner von <header> über <nav> und <section> bis <footer>, aber auch über die Frage, wie man denn den bekannten, zu HTML 5 inkompatiblen Altlasten-Browsern HTML 5 unterschieben kann, erfahren Sie mehr im nächsten Artikel zur Einführung des neuen Webstandards.
