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).

Grundlayout für die Spalten

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.

Design für Spalte wird in vier Grafiken aufgeteilt

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&#8217;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;
}

Ecken der Spalte erscheinen nun abgerundet

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).

Abgerundete Ecken behalten ihre Positionen auch bei Größenänderung der Spalte

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).

Grafik für rechte untere Ecke ist 600px breit und über 250px hoch

Abbildung: Die Grafik für die rechte untere Ecke ist 600 Pixel breit und über 250 Pixel hoch.

Linke untere Grafik ist 600 x 600 px groß

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