Index 4 • CSS3 border-radius
Individuelle Rundung
Rundung mit CSS3-Befehlen
Diese Homepagevorlage ist layout-technisch abgerundet. Zum Beispiel die Menüs. Mit der CSS3-Technik ist es möglich, abgerundetete Objekte herzustellen, ohne extra runde Grafiken einbauen zu müssen. Aus einem rechteckigen Feld kann man somit per CSS3-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.
Unterschiedliche Rundungen
Die einzelnen Felder können unterschiedlich abgerundet (mal nur eine Ecke, mal zwei Ecken, drei oder alle vier Ecken) werden, das ist veränderbar. Sie können also selbst entscheiden, wieviele der vier Ecken eines einzelnen (rechteckigen) Feldes Sie abrunden. Auch der Grad der Abrundung ist in Pixel (px) einstellbar.
Der Quellcode für die Rundung
Gleichmäßige Rundung aller vier Ecken
Hier ein Code-Beispiel für eine gleichmäßige Abrundung, es sind nur 3 Zeilen Code.
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
Hinweis: Eigentlich besteht der Code ja nur aus einer Zeile (border-radius), es gibt aber eben noch sogenannte Präfixe für ältere Browser, die man ebenfalls angeben sollte. Diese Präfix-Anweisungen stehen für die Browser Mozilla (-moz), Safari und Chrome (-webkit). Als letztes muß aber immer der Standard-Befehl genannt werden.
Verschiedene Rundung
Nachstehend ein Code-Beispiel für eine verschiedene Abrundung, es sind 12 Zeilen Code.
In diesem Beispiel ist die obere linke Ecke abgerundet sowie die rechte untere Ecke.
Nicht gerundet sind die obere rechte Ecke/untere linke Ecke (0px).
-moz-border-radius-topleft:40px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:40px;
-webkit-border-top-left-radius:40px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius: 40px;
border-top-left-radius:40px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:40px;
Zurück
Sie befinden sich auf der Seite index3.html. Hier geht es zurück zur Seite index2.html und zur Startseite index.html .
Weiter und Info
Klicken Sie hier für Seite index5.html
Wie schon gesagt, Sie können auch die Links im oberen Menü klicken, wir haben es ja verlinkt.
|
|
|