Abgerundete Ecken (Sliding Doors-Technik)
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Sie möchten Spalten, deren Breite variieren kann, mit abgerundeten Ecken versehen.
Lösung
Verwenden Sie die Sliding Doors-Technik, die von Douglas Bowman bekannt gemacht wurde.
Erstellen Sie das Grundlayout für die Spalten (siehe folgende Abbildung).
Abbildung: Das Grundlayout für die Spalten.
Dann erstellen Sie für jede der einzelnen Ecken eine separate Grafik wie die in der nächsten Abbildung.
Abbildung: Das Design für die Spalte wird in vier Grafiken aufgeteilt.
Umgeben Sie den Inhalt der Spalte mit zusätzlichen div-Elementen:
<div id="box">
<div id="innerhead">
<h2>I Met a Girl I’d Like to Know Better</h2>
</div>
<div id="content">
<div id="innercontent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
</div>
</div>
</div>
Nun können Sie per CSS die Hintergrundbilder platzieren (siehe nächste Abbildung). Die linke obere Ecke wird als Hintergrundbild für das div-Element mit der id "innerhead" verwendet, die rechte obere Ecke wird als Hintergrund für das bereits existierende h2-Element verwendet, das div mit der id "content" erhält als Hintergrund die linke untere Ecke und das div mit der id "innercontent" bekommt schließlich die rechte untere Ecke zugewiesen.
#innerhead {
background-image: url(corner_tl.gif);
background-position: top left;
background-repeat: no-repeat;
}
h2 {
background-image: url(corner_tr.gif);
background-position: top right;
background-repeat: no-repeat;
margin: 0;
padding: 7px;
border-bottom: 1px solid #999;
font-size: 1.3em;
font-weight: normal;
color: #eee;
}
#content {
background-image: url(corner_bl.gif);
background-position: bottom left;
background-repeat: no-repeat;
}
#innercontent {
background-image: url(corner_br.gif);
background-position: bottom right;
background-repeat: no-repeat;
}
Abbildung: Die Ecken der Spalte erscheinen nun abgerundet.
Diskussion
In diesem Rezept werden mehrere div- und h2-Elemente verwendet, um die Hintergrundbilder für die vier Ecken zu verankern. Auch bei Größenänderungen des Browserfensters bleiben diese Bilder an den für sie vorgesehenen Positionen (siehe nächste Abbildung).
Abbildung: Die abgerundeten Ecken behalten ihre vorgesehenen Positionen auch bei einer Größenänderung der Spalte.
Um sicherzustellen, dass die Integrität des Designs auch bei Änderungen der Spaltenbreite bestehen bleibt, sind weitergehende Fähigkeiten der digitalen Bildbearbeitung nötig. Bearbeiten Sie eine Seite (links oder rechts) und dehnen Sie die Grafiken vertikal und horizontal aus. Für diese Lösung wurden beispielsweise die Grafiken für die linken Ecken erweitert (siehe die folgenden beiden Abbildungen).
Abbildung: Die Grafik für die rechte untere Ecke ist 600 Pixel breit und über 250 Pixel hoch.
Abbildung: Die linke untere Grafik ist 600 x 600 Pixel groß.
Siehe auch
Das Rezept Abgerundete Ecken (Mountaintop-Technik) für eine einfache Lösung, wie Sie eine Spalte mit abgerundeten Ecken versehen.
<< zurück | vor >> |
Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln