Abgerundete Ecken und Farbverläufe mit Css (Cascading Style Sheets) sind nicht schwer

Abgerundete Ecken und Farbverläufe im Webdesign werden immer beliebter, mit Css bereitet das ganze auch wenig Probleme.

Beispiel wie Farbverläufe und Abgerundete Ecken aussehen können.

Abgerundete Ecken bei Div-Boxen.

Damit dies korrekt funktioniert, brauchen Sie für eine Box mehrere Elemente.

<div class="rund">
<h4>Runde Ecken</h4>
<p>Runde Ecken</p>
<p>Runde Ecken</p>
<p>Runde Ecken</p>
<p>Runde Ecken</p>
<br />
</div>  

Überschrift h4 beinhaltet eine GIF-Grafik mit oben abgerundeten Ecken, im Absatz p wird die Hintergrundfarbe der Box definiert und die Box selbst erhält als Hintergrundbild eine GIF-Grafik mit unten abgerundeten Ecken, welche über "background-position: left bottom;" unten angeordnet wird.
Im Stylesheet erhält die Box die Breite, die auch die Hintergrundgrafik hat.

div.rund {
background-image: url(../rund_unten.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 160px;
height: auto;
float: right; }
div.rund h4  {
color: white;
font-size: 12px;
background-image: url(../rund_oben.gif);
background-repeat: no-repeat;
background-position: left top;
margin: 0; padding-top: 5px; padding-right: 5px; padding-left: 5px; }
div.rund p {
color: white;
background-color: #9e0b0f;
text-align: left;
margin: 0; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; }

Ein padding von 5px wird benötigt damit der Text nicht direkt am Rand klebt.
Margin 0 beseitigt die Außenabstände; somit umgeht man, dass eventuell ein unschöner Leerraum in der Box entsteht.

Wer sich die Arbeit ersparen möchte selbst den Code zu Schreiben, auf der Seite: roundedcornr.com/ gibt es einen Generator mit dem man sich kostenlos DIV-Boxen mit gerundeten Ecken erstellen kann.

Farbverläufe für Seitenhintergrund oder DIV-Boxen

Vorbei sind die Zeiten unschöner Kacheleffekte bei Webseite-Hintergründen.
In diesem Beispiel erstellen wir einen Farbverlauf  für den Seitenhintergrund anhand einer kleinen GIF-Grafik. Vorteil der Grafik ist eine sehr geringe Ladezeit des Browsers.
Auf die gleiche Art lassen sich natürlich auch Absätze, Überschriften und DIV-Boxen formatieren.

body { background-color: white;
background-image: url(../bg.gif);
background-repeat: repeat-x;
background-position: left top; }

Die Grafik in diesem Beispiel hat eine Breite von 20px und eine Höhe von 150px; mit einem Grafik-Programm wird ein Verlauf von hellgrau nach weiß aufgezogen.
Da die Grafik nach unten nicht gekachelt wird, muss man über "background-color" die Farbe weiß wählen; somit erhält man nach unten einen gleichmäßigen Verlauf.
Über "background-image: url()" geben Sie den Pfad zu Ihrer GIF-Datei an.
Die GIF-Grafik wird über "background-position: left top;" oben links ausgerichtet.
Mit "background-repeat: repeat-x;" wird festgelegt das horizontal gekachelt wird.