Index3 - Dies ist Seite index3.html
Individuelle Rundung
Rundung mit CSS3-Befehlen
Diese Homepagevorlage ist layout-technisch abgerundet. 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 CSS3-Code ein gerundetes Feld herstellen.
Hier ist das zum Beispiel die Hauptkonstruktion, die Leisten ober-und unterhalb des Fotos oder das Menü neben dem Inhaltsbereich.
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 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: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
Bei dieser unserer Vorlage sehen sie in der Datei format.css z.B. den folgenden Code für die Abrundung der gesamten Konstruktion.
.haupt {width:100%;
background-image:url(images/s8.png);
background-repeat:repeat-x;
background-position: 50% 0%;
padding:15px;
border:solid 6px white;
border:solid 1px #004D75;
background-color: #0090E0;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
}
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 index4.html
Wie schon gesagt, Sie können auch die Links im oberen horizontalen Menü klicken, wir haben es ja komplett verlinkt. Es sind die Links index (Home), index2, index3, index4 und index5.
Der Link index6 im vertikalen Menü oben ist auch klickbar und zeigt die Seite index6.html.
|
|
|
