Runde CSS-Box[IE|M|O]

von: Werner Zenk

Eine CSS-Box mit Rundungen erstellen.

Lorem ipsum dolor sit amet Metus Quisque eros commodo congue wisi libero pede ac congue porta metus eu pede Morbi semper neque cursus aliquam cursus nonummy semper quis eu pede Phasellus cursus id et ornare volutpat aliquet semper malesuada orci.

Quelltext:

Benötigte Bilder:              

<style type="text/css">
.runde_box {
 background-color: #66CC99;
}

.runde_box_oben div {
 background: url(links_oben.gif) no-repeat top left;
}

.runde_box_oben {
 background: url(rechts_oben.gif) no-repeat top right;
}

.runde_box_unten div {
 background: url(links_unten.gif) no-repeat bottom left;
}

.runde_box_unten {
 background: url(rechts_unten.gif) no-repeat bottom right;
}

.runde_box_oben div, .runde_box_oben, .runde_box_unten div, .runde_box_unten {
 width: 100%;
 height: 7px;
 font-size: 1px;
}

.runde_box_inhalt {
 margin: 0 7px;
}

.runde_box {
 width: 50%; margin: 1em auto;
}
</style>

<div class="runde_box">
 <div class="runde_box_oben"><div></div></div>
  <div class="runde_box_inhalt">
   <p>
    Lorem ipsum dolor sit amet ....
   </p>
  </div>
 <div class="runde_box_unten"><div></div></div>
</div>

So erstellen Sie eine „Bild-Rundung“ im Grafikprogramm.

Ein Bild im Grafikprogramm; 20 x 20 Pixel erstellen.
Mit der Farbe des Homepage-Hintergrundes füllen.
(In diesem Beispiel ist die Hintergrundfarbe Weiß. #FFFFFF)

Vordergrundfarbe auswählen.
(In diesem Beispiel ist die Vordergrundfarbe Grün #66CC99).
Kreisform und Antialiasing-Modus auswählen.

Kreis zeichnen (der Kreis muss so groß wie das Bild sein!)

Teilen Sie das Bild nun in vier gleiche Teile auf.
Sie brauchen also nur ein Teilstück (1/4) des Bildes!

Das Bild (Teilstück) mit dem Format .png-Format abspeichern.
Das Bild "Spiegeln" und "Kippen", und jeweils unter einem
anderem Namen speichern.
Es werden vier Bilder benötigt , für jede Ecke eines!

= links_oben.gif, = rechts_oben.gif,
= links_unten.gif, = rechts_unten.gif

Runde-Box Generator - Dieser Generator erstellt aus Grafiken und CSS eine Runde-Box.

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Pandoras: Vielleicht liege ich falsch mit meiner Vermutung, aber man kann doch die ganzen images in einer class definieren und ausrichten. Erspart eine menge Schreibarbeit. Marcel B: es geht auch einfacher über den Befehl [-moz-border-radius...], ist zwar in html, kommt aber meiner meinung nach aufs selbe raus. Werner: Leider wird dieser CSS-Befehl nur vom Firefox unterstützt. Es soll ja auch noch User geben die einen anderen Browser verwenden Cars(ch)ten: Also, ich finds gut - passt perfekt auf meine HP 8-)
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!