Per CSS werden jetzt die Artikel weiter gestaltet die im vorherigen Artikel per HTML gestaltet wurden. Den Anfang machen dabei die Boxen selber. In diesem Teil des Webdesign-Workshops werden also die Boxen mit runden Ecken, Schatten und Farbverläufen aufgehübscht…

Runde Ecken per CSS:

Soll ein Element runde Ecken bekommen, reicht die Anweisung…

• border-radius: 15px;

Der Pixelwert ist natürlich frei wählbar. Bei 15 Pixel empfinde ich das Ergebnis aber noch als angenehm.

In einem ersten Schritt wird der Artikel mit runden Ecken ausgestattet.

Natürlich kann auch eine ganze Box mit runden Ecken gestaltet werden. Statt in der “artikel.css-Datei” wird der “border-radius” einfach den jeweiligen Element (hier “nav”) zugeordnet. Das Ergebnis ist eine Navigations-Spalte mit runden Ecken.

Mit diesem Wissen sollte es möglich sein, beliebige Elemente einer Webseite mit runden Ecken auszustatten. Das alles ganz ohne Grafik – nur mit CSS.

Schatten per CSS:

Wo Licht ist, da ist auch Schatten. Jetzt verpassen wir den Artikeln auf unserer Webseite einen Schatten per “box-shadow”.

• box-shadow: 10px 10px 5px #888888;

Mit dieser Anweisung erzeugen wir einen Schatten.

Die Parameter ermöglichen den Schatten genau zu bestimmen. Die horizontale und vertikale Verschiebung wird über die ersten beiden Werte festgelegt. Größe und Grad der Verschwommenheit ist der dritte optionale Wert. Der vierte Wert legt die Farbe des Schattens fest. Um einen optimalen Schatten zu gestalten bietet sich gnadenloses herrumspielen an und das kann und braucht hier sicher nicht dokumentiert zu werden, oder?

Farbverläufe per CSS:

Zur Demonstration für die Farbverläufe füge ich drei div-Bereiche in den zweiten Artikel.

In der CSS-Datei für den Artikel (artikel.css) baue ich folgende Anweisungen ein:

#farbverlauf01 {

width: 80%;

height: 100px;

background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */

}

#farbverlauf02 {

width: 80%;

height: 100px;

background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */

}

#farbverlauf03 {

width: 80%;

height: 100px;

background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */

}

Natürlich bräuchte es die zusätzlichen div-Bereiche nicht unbedingt. Farbverläufe können aber auch schnell unangenehm werden. Optimal lassen sich Farbverläufe hinter Grafiken im header-Bereich nutzen.

Auch die Farbauswahl spielt dabei eine wichtige Rolle. Hier geht es erstmal nur um die grundsätzliche Funktion. Was gestalterisch Sinn macht oder nicht soll später geklärt werden…