Geschrieben von Tabe am 02.02.2007 um 10:29:
Runde Ecken einer Tabelle
Einen wohl sehr schönen Effekt ergibt sich aus runden Ecken einer Box. Der optische Eindruck der Website des Betrachters wirkt so professioneller und moderner.
Als Webmaster hat man die Aufgabe, die Website mit guten und aktuellen Inhalten zu pflegen, sowie den User ein positives Gefühl gegenüber das Layout zu vermitteln. Deshalb möchte ich Ihnen heute zeigen, wie man an einem Container (Layer; Box) runde Ecken erstellt.
Um die Kosten möglichst gering zu halten, verwende ich hier als Grafikprogramm GIMP (Kostenlos erhältlich unter
http://www.gimp.org/downloads/) . Dazu sind Kenntnisse in CSS ratsam.
Schritt 1.: Öffnen Sie GIMP. Erstellen Sie eine Grafik; im Beispiel verwende ich 160x300. Als Hintergrundfarbe wird weiß verwendet (Die Farbe muss mit der, die sie im HTML - Dokument als Hintergrundfarbe verwenden, übereinstimmen!). Unter Auswahl -> Abgerundetes Rechteck können Sie nun ihrer Grafik runde Ecken zuteilen. Teilen Sie der Box nun auch eine Farbe zu.
Jetzt könnte ihre Grafik wie folgt aussehen:
Siehe Bemerkung
Schritt 2.:
Teilen Sie die Grafik in 4 Teile auf und speichern Sie die Ecken wie folgt ab:
Siehe Bemerkung
Schritt 3.: Jetzt fehlt nur noch eins: Der Quellencode. Und den besprechen wir jetzt:
HTML - Quellentext:
<div class="roundcont">
<div class="roundtop">
<img src="tl.gif" alt=""
width="20" height="20" class="corner"
style="display: none" />
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
<div class="roundbottom">
<img src="bl.gif" alt=""
width="20" height="20" class="corner"
style="display: none" />
</div>
</div>
Schritt Nr.4.: Nun Der Stylesheet:
.roundcont {
width: 160px;
background-color: #1e7198;
color: #fff;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 20px;
height: 20px;
border: none;
display: block !important;
}
Und Schwupp, ist die Box auch fertig. Doch eins ist zu beachten: Alle Angaben sind mit den der eigenen anzupassen. Was beachten werden muss:
- Bei img.corner den Befehl Breite sowie Höhe mit dem der zugeschnittenen Grafiken anpassen. Im HTML - Quellentext auch.
- .roundcont die Hintergrundfarbe anpassen, sowie im body - Bereich.
Geschrieben von Piranho.de
Es gibt ja User die kein Piranho nutzen, deswegen stelle ich es hier mal rein...
