Der kurze Weg zu Schatten, Dreiecken und anderen Nettigkeiten

Runde Ecken, Schatten, Farbverläufe, Dreiecke und Animationen sind in der modernen Website-Gestaltung nicht mehr wegzudenken. Statt wie früher mit Bildern von runden Ecken oder Schatten können diese Elemente heute mit CSS3 umgesetzt werden. Als Webentwickelnde können wir damit die Elemente und Effekte nicht nur besser für verschiedene Ausgabegeräte kontrollieren, sondern kommen auch schneller zum gewünschten Ergebnis.

Findige Kolleginnen und Kollegen haben CSS-Generatoren entwickelt, mit denen wir uns den benötigten CSS-Code nebst aller browserspezifischer Prefixes generieren lassen und das Ergebnis direkt betrachten können

Hier eine (nicht abschließende) Liste derer, die ich gerne verwende:

1. Triangle-Generator

Mit dem Triangle-Generator können Dreiecke generiert werden. Ich brauche Dreiecke häufig als Pseudoelemente vor DIV-Containern, wie beispielsweise bei der Webseite zum Projekt „Gemeinsam Fairhandeln“:

2. Gradient-Generator

Der Gradient-Generator ist dann hilfreich, wenn man einen Farbverlauf braucht. Der CSS-Code, der hier generiert wird, kann recht umfangreich werden: Je nachdem, wie viele Farben zum Einsatz kommen und inwieweit das Ergebnis für ältere Versionen des Internet Explorers kompatibel sein sollen, werden entsprechend viele CSS-Zeilen generiert.

3. Border-Radius-Generator

Wenn ich runde Ecken brauche, nutze ich gerne den simplen Border-Radius-Generator. Die Zeit der krassen runden Ecken scheint inzwischen vorbei zu sein. Sie werden heute nur noch sehr dezent eingesetzt, wie beispielsweise bei diesen Kästen:

Oder um wirklich runde Elemente zu gestalten wie hier:

4. Box-Shadow-Generator

In modernen Website-Designs werden immer wieder Schatten eingesetzt, um Bilder und Boxen mit einem leichtem 3D-Effekt hervorzuheben.
Ich nutze dafür gerne den Box-Shadow-Generator von cssmatic. Hier kann ich den Schatten so einstellen, wie ich ihn brauche und kann den CSS-Code in meinen Code übertragen.

Hier ist ein Beispiel für einen sehr dezenten Schatten um ein Bild herum:

Und hier haben wir einen Schatten als Trennlinie eingesetzt:

5. Transition-Generator

Für sehr schöne Effekte beim Hervoheben von Elementen beim Überfahren mit der Maus sorgen CSS-Transitions. Hier wird per CSS ein neuer Element-Zustand mit einer Zeitangabe kombiniert, sodass der Wechsel nicht abrupt, sondern fließend ist. Wir kennen das Beispielsweise von der Hervorhebung von Links in der Navigation oder im Seiteninhalt. Auch für diesen Fall gibt es selbstverständlich CSS-Generatoren.

Hier ein Beispiel von einer Website, an der ich im Moment arbeite:

Einige der hier aufgelisteten Generatoren decken nicht nur einen, sondern mehrere Effekte ab. Die Ergebnisse sollten natürlich in jedem Fall dieselben sein.

 

Danke dafür und Cheers!

Signatur