CSS3: Border-Radius, Box-Shadow, Text-Shadow

Ein kleines JavaScript-Tool mit Hilfe der jQuery-Bibliothek, um ein paar CSS3-Angaben life zu ändern.

In den Ecken der Box kann man jeweils den Border-Radius ändern, links die Schrift- und Hintergrundfarbe, rechts den Box-Schatten und in der Box selbst den Text-Schatten. Mit einem Klick auf die Box selbst kann man auch den Inhalt der Box ändern. Alle Änderungen werden direkt übernommen und als CSS-Angabe unten angezeigt.

Wenn man mag, kann man noch die Einheit von px auf em und % ändern und CSS-Angaben für -moz- und -webkit-Browser anzeigen lassen.

Achso, bevor ich es vergesse …
CSS3 ist noch nicht offiziell und funktioniert nur auf einigen modernen Browsern. Also nicht wundern, wenn man keinen Effekt sieht, wenn man z. B. den Explorer 8 verwendet.

CSS3-Generator

Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea. Facilis fastidii duo no. Viris partiendo ius no, alia animal nam at. Feugait imperdiet ius an, no quis facer lucilius vis.

Box-Schatten

Box

Text-Schatten

Links: