gepostet am 08.08.2011 von Vivian

CSS3 eröffnet völlig neue Möglichkeiten für einen Front-End Designer. Javascript wie auch Lösungen mit Grafiken kann man mittels CSS3 ganz einfach ersetzen. Wir haben die wichtigsten 10 CSS3 Tricks zusammengestellt.

1. Mit der neuen Eigenschaft border-radius lassen sich kinderleicht runde Ecken ins Design zaubern.border-radius: 5px;

2. box-shadow erstellt einen Schatten. Möchte man mehrere Schatten erstellen kann diese einfach kommagetrennt hinten anstellen.box-shadow: 0px 0px 4px #ff00ff;
box-shadow: 0px 0px 4px #ff00ff, 1px 1px 5px #ff0000;

3. Einen Text kann man mit folgendem CSS3 Trick mit einem Schatten versehen. Einfach folgendes Attribut benutzen: text-shadow: 1px 1px 3px #999;

4. Die Transform-Rotate Eigenschaft lässt ein Objekt um beliebig viel Grat drehen. transform: rotate(20deg);

5. Alex Walker beschreibt in seinem Post, wie man extrem große Hintergründe mittels Primzahlen und CSS erstellen kann. Prädikat: Lesenswert!

   weiter lesen

6. Einen Hologram Effekt mittels CSS3 hat Hakim El Hattab als Demo bereit gestellt.

   weiter lesen

7. Ladebalken sehen oftmals hässlich aus. Detailliert erklärt Chris Coyier, wie man richtig schöne Balken erstellen kann.

   weiter lesen

8. Völlig ohne Javascript lassen sich jetzt auch ansehnliche Drop Down Menüs erstellen. Die Experten von Web Designer Wall haben ein Beispiel online gestellt.

   weiter lesen

9. Nicht jeder Browser unterstützt die CSS3 Tricks. Mit ein paar Kniffen kann man aber auch älteren Browsern CSS3 beibringen. Alternativ werden Wege aufgezeigt, wie man CSS3 Verweigerern umgehen kann.

   weiter lesen

10. Verforme deine Boxen. In unterschiedliche Richtungen und Formen kann man 2D wie auch 3D Boxen erstellen.

    weiter lesen