Tutorial Runde Ecken mit CSS

Bitte guckt Euch diese Seite an, auf der es auch ein Download zu einem Beispiel gibt.

HTMLREMIX.com

Hier meine CSS dieser Seite, die Ihr entweder als CSS-Datei speichern könnt oder als Style-Anweisung in die HTML des Layouts,
bzw. Master-Rahmens, "Zwischen Head Tags" kopieren und natürlich beliebig abändern könnt. Ich habe hier für meine vier Beispiele auch vier CSS-Klassen erstellt sowie für die überlappenden Kreise einen ID.

<style type="text/css">

.box1 {
   background-color: #E4E4E4;
   width: 200px;
   height: 50px;
   border: 1px solid #d7d7d7;
  
   -moz-border-radius: 11px;
   -webkit-border-radius: 11px;
   border-radius: 11px;
   behavior: url(./html/border-radius.htc);
}

.box2 {
   background-color: #E4E4E4;
   width: 300px;
   height: 22px;
   border: 3px solid #2A5B91;
  
   -moz-border-radius: 11px;
   -webkit-border-radius: 11px;
   border-radius: 11px;
   behavior: url(./html/border-radius.htc);
}

.box3 {
   background: transparent url(./assets/images/Vogel.jpg); background-repeat:no-repeat; background-position:center center;
   width: 380px;
   height: 247px;
   border: 8px solid #2A5B91;
  
   -moz-border-radius: 32px;
   -webkit-border-radius: 32px;
   border-radius: 32px;
   behavior: url(./html/border-radius.htc);
}

.boxkreis {
   background-color: #E4E4E4;
   width: 300px;
   height: 300px;
   border: 3px solid #2A5B91;
  
   -moz-border-radius: 150px;
   -webkit-border-radius: 150px;
   border-radius: 150px;
   behavior: url(./html/border-radius.htc);
   }

</style>

... wie immer macht der Internet-Explorer 8 oder älter ein Problem solche Rundungen darzustellen, daher hat der Programmierer noch die Datei “border-radius.htc”, die oben gelb markiert ist, erstellt und die Ihr Euch auch hier downloaden könnt.

Ich habe diese Datei hier in meine “Assets-Verwaltung” eingelesen und in den Ordner “html”, so wie hier beschrieben, verschoben. Achtet also auf die korrekte relative Pfadangabe zu dieser Datei, hier von der Startseite mit einem Punkt ./ von einer Unterseite gehören dort zwei Punkte ../ hin.

Nun könnt Ihr ein beliebiges Objekt, wie z.B. einen Layout-Bereich oder z.B. ein Textfeld aufziehen, und diesem Objekt dann den entsprechenden DIV-Container geben, der auf die gewünschte CSS-Class verweist. Unten ein Screenshot meiner Textfeld-HTML.

> Textfeld markieren > Fenster “Text-Eigenschaften” > Button “HTML” > “vor dem Tag” (ab NOF 11 “vorher”) einfügen

<div class=”box2”>

... und “nach dem Tag” (ab NOF 11 “nachher”) den DIV-Container wieder schließen

</div>

DIV-Container zum Überlappen:

... wollt Ihr, so wie ich es mit den Kreisen gemacht habe, Objekte überlagern lassen, dann müsst Ihr noch eine zusätzliche CSS-Class einbauen mit einer dazugehörigen ID (hier “#kreisoben”).

<style type="text/css">

.boxrund1 {
   background-color: #E4E4E4;
   width: 200px;
   height: 200px;
   border: 1px solid #808080;
  
   -moz-border-radius: 100px;
   -webkit-border-radius: 100px;
   border-radius: 100px;
   behavior: url(./html/border-radius.htc);
}

.boxrund2 {
   background: url(./assets/images/BGBoxrund2.png);
   width: 150px;
   height: 150px;
   border: 1px solid #808080;
  
   -moz-border-radius: 75px;
   -webkit-border-radius: 75px;
   border-radius: 75px;
   behavior: url(./html/border-radius.htc);
}

#kreisoben {
   position:relative;
   top:10px; left:-50px; right:0px;
}

</style>

Oben, in der blau markierten Class, habe ich diesen Layoutbereich eine Position gegeben, nämlich von oben 10px tiefer und -50px weiter nach links als ich diesen Layoutbereich aufgezogen habe (im Screenshot unten ist das der rechte Layoutbereich). Diese ID habe ich dann noch zusätzlich in die HTML dieses Layoutbereichs eingetragen.

> vor dem Tag (ab NOF 11 “vorher”)

<div id="kreisoben" class="boxrund2">

> nach dem Tag (ab NOF 11 “nachher”)

</div>

... nun habe ich noch als Beispiel dem kleinen Kreis eine leicht transparente Hintergrundgrafik gegeben. Dann sieht die CSS so aus:

<style type="text/css">

.boxrund2 {
   background: url(./assets/images/BGBoxrund2.png);
   cursor: pointer;
   width: 150px;
   height: 150px;
   border: 1px solid #808080;
  
   -moz-border-radius: 75px;
   -webkit-border-radius: 75px;
   border-radius: 75px;
   behavior: url(./html/border-radius.htc);
}

#kreisoben {
   position:relative;
   top:10px; left:-50px; right:0px;
}

</style>

... außerdem wollte ich, dass der gesamte kleine Kreis auch zu meiner Tutorial-Seite verlinkt wird.

Dazu habe ich noch ein <a> Tag um den DIV-Container mit der Verlinkung gelegt, wie im Screenshot unten zu erkennen. Dieser Verlinkung habe ich auch noch eine eigene Link-Class (“rundlink”) gegeben - da ich nicht wollte, dass der Text, wie in meiner Link-Class von NOF voreingestellt, unterstrichen erscheint.

Bemerkungen:

Ich habe dieses Skript in folgenden Browsern getestet.

• Chrome
• Firefox
• Internet Explorer 8 + 9
• Opera
• Safari

Die einzige HTML-Ausgabe von NOF, die in allen Browsern das Skript korrekt anzeigt, war bei mir XHTML im Quirks-Modus.

nach oben