Pleased To Present My Drawings
 

Index 4 • CSS3 border-radius

Individuelle Rundung

Rundung mit CSS3-Befehlen

Diese Homepagevorlage ist layout-technisch abgerundet. Zum Beispiel das Menü oben oder unten das Adress-Feld. 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.
www.meine-beispiel-seite.de
Michael Muster-Meierdirks
Auf der Lichtung 23
80945 Oberquell