Individuelle Rundung
Rundung mit CSS3-Befehlen
Mit der neuen CSS-Technik ist es jetzt möglich, abgerundetete Objekte herzustellen, ohne extra runde Grafiken einbauen zu müssen. Aus einem rechteckigen Feld kann man somit per CSS-Code ein gerundetes Feld herstellen.
Moderne Browser können CSS3
Es gibt keine technischen Nachteile, sollte man die Seite in einem älteren Browser ansehen. Es würde dann halt alles rechteckig statt abgerundet aussehen. Zum Bespiel kann der Browser Internet Explorer in der Version ab 9 die Rundungen darstellen. In der schon älteren Version 8 des Internet-Explorers gäbe es dann halt keine Rundungen. Bei Browsern-Konkurrenten, wie Firefox, Google Chrome, Safari oder anderen wäre es ähnlich.
Unterschiedliche Rundungen
Die einzelnen Felder sind unterschiedlich abgerundet (mal nur eine Ecke, mal zwei Ecken), das ist veränderbar. Sie können also selbst entscheiden, wieviele der vier Ecken eines einzelnen (rechteckigen) Feldes Sie abrunden. Auch die Stärke der Abrundung ist einstellbar. Bei dieser Konstruktion sind es 50 Pixel bei den großen Ecken und 20 Pixel bei den kleinen Ecken. Gerne probieren Sie andere Pixelwerte.
Die Navigation
Aufklapp-Menü
Oben haben wir für Sie ein Aufklapp-Menü eingebaut. Fahren Sie über die Links der Gruppen 01-04 und es öffnen sich die Untermenüs.
Zusatz-Menüs
Auf der linken Seite finden Sie erweiterbare Zusatz-Menüs, wir haben hier bei den "div-Boxen" keine Höhe (height) für die Felder festgelegt, damit der Inhalt der Felder sich nach unten flexibel erweitert.
Die Transparenz
Sie befinden sich auf der Seite index.html. Wie Sie die Transparenz einstellen können, lesen Sie hier in der Datei index2.html anbei.
|
Gruppe 01