Um dir den Einstieg in die neuen CSS3-Eigenschaften zu erleich­tern, sind diese prak­ti­schen Online-Tools eine wahre Hilfe. So kannst du zum Beispiel mit Leichtigkeit CSS3-Buttons erstellen, mit CSS3-Verläufen spielen oder neue Schriften mit @font-face ein­betten. Außerdem kannst du mit den Tools testen, welche Browser deine neu ein­ge­bauten Features bereits unter­stützen. Das hört sich für dich nach jeder Menge Spaß an? Na dann mal los :-)

Bevor du los­legst die neuen CSS3-Eigenschaften für deine Designs zu ver­wenden, soll­test du in dieser Browser Support-Liste nach­schauen, welche Browser die CSS3-Features bereits unter­stützen und bei wel­chen Browsern es Probleme gibt.

1. Linear Gradients (lineare Verläufe)

Lineare Verläufe kannst du super für Buttons oder Hintergrund-Verläufe ver­wenden. Und mit dem »CSS3 Linear Gradient-Tool« von Westvic wird es zum Kinderspiel wun­der­schöne Verläufe zu erstellen. Den dazu­ge­hö­rigen CSS3-Code gibt es natür­lich gleich mit dazu. Ein toller Tipp um sich mit den CSS3-Eigenschaften ver­traut zu machen, ist sich den CSS-Code ganz genau anzu­schauen und zu beob­achten, was sich jeweils verändert.

2. Radial Gradients (radiale Verläufe)

Und Westvic hat gleich eine ganze Reihe CSS3 Online-Tools erstellt. Mit dem »Radial Gradient-Tool« kannst du kreis­för­mige CSS3-Verläufe erstellen.

3. Text Shadow (Textschatten)

Textschatten sind total im Trend, und mit dem »Text Shadow-Tool« erstellst du sie mit Leichtigkeit.

4. Box-Shadow (Box-Schatten)

Auch Schatten auf Flächen sind mit dem »CSS3 Box Shadow-Tool« super leicht zu rea­li­sieren und ein sehr schönes Element, um Webdesigns aufzupeppen.

5. Transforms (trans­for­mieren)

Mit der Transform-Eigenschaft von CSS3 wird es so richtig wild. Mit dem »Transform-Tool« kannst du jede Menge Features diese span­nenden CSS3-Eigenschaft testen und entdecken.

6. Text Stroke (Text-Konturstärke)

»Text Stroke« wird zwar noch nicht wirk­lich von den Browsers unter­stützt, es ist aber eine inter­es­sante CSS3 Text-Eigenschaft, mit der du auf alle Fälle schon einmal ein biss­chen her­um­spielen kannst.

7. Button-Maker von CSS-Tricks

Jede Menge wun­der­schöne CSS3-Buttons kannst du mit dem prak­ti­schen »Button-Maker« von CSS-Tricks erstellen. Auch hier ist es wieder hilf­reich, sich den CSS-Code ganz genau anzu­schauen, um mit den CSS3-Eigenschaften ver­trauter zu werden.

8. CSS3 Generator

Der »CSS3 Generator« von Randy Jensen ist ein rich­tiges Multitalent. Du kannst 11 ver­schie­dene CSS3-Eigenschaften (u.a. Multicolums, RGBa, Text- und Box Shadow, Gradients, Selectors und @font-face) testen und deinen CSS-Code erstellen. Welche Browser diese Eingenschaft unter­stützen, ist auch gleich mit angezeigt.

9. CSS3 Please

Bei »CSS3 Please« kannst du ver­schie­dene CSS3-Styles (z.B. abge­run­dete Ecken, Verläufe etc.) an einem Live-Beispiel testen.

10. CSS Corners (abge­run­dete Ecken und Verläufe)

Mit dem »CSS Corners-Tool« kannst du dir ganz leicht den CSS-Code für Buttons oder Flächen erstellen, und dabei sowohl abge­run­dete Ecken (CSS3 border-radius) als Farbverläufe (CSS3 gra­di­ents) bestimmen.

11. Border Radius (abge­run­dete Ecken)

Mit »Border Radius« kannst du dir den CSS-Code für abge­run­dete Ecken in Gecko (Mozilla), Webkit (Safari, Google Chrome) und CSS3 generieren.

12. Border Image Generator (Image als Rahmen)

Möchtest du ein cooles Images als Rahmen in deinem Design ein­setzen? Dann kannst du den prak­ti­schen »Border-Image Generator« nutzen, um deinen CSS-Code zu erstellen.

13. @Font-Face Generator

Bei Fontsquirrel fin­dest du etliche vor­be­rei­tete @font-face Kits. Und falls deine Lieblingsschrift noch nicht dabei ist, kannst du dir dein Kit (mit Beispieldatei, Schriften-Sets und CSS-Code) mit dem »@font-face Generator« selbst erstellen.

14. Text Shadow CSS3 Google Font Preview

Mit dem »CSS Font Generator von Google« kannst du dir u.a. auch den Code für Text Shadows erstellen, und deine Schrift gleich live testen.

15. 52 Framework

Der »52 Framework« ist ein Framework-Projekt, das HTML5 und CSS3 unter­stützt. Das System unter­stützt u.a. die CSS3-Eigenschaften Text- und Box Shadow, Selectors, und Rounded Corners.

16. CSS3 Learning Tool

Bist du dir noch nicht ganz sicher, wie die neuen CSS3-Eigenschaften funk­tio­nieren und in wel­chen Browsern sie wie ange­zeigt werden? Dann kannst du mit dem kleinen »CSS3 Learning Tool« schnell ver­schie­dene CSS3-Styles in ver­schie­denen Browsern testen.

17. Find Me by IP

Auf »Find me by IP« kannst du dir u.a. auch eine Liste der von deinem Browser unter­stützen CSS3-Eigenschaften anzeigen lassen. Außerdem fin­dest du unter dem Navi-Punkt Webdesign eine inter­es­sante Auswertung der Browser-Unterstützung ver­schie­dener CSS3-Properties.

18. CSS3 Help Sheet (CSS3 Spickszettel)

Zur Über­sicht oder als Spickzettel wäh­rend der Programmierung kann dir das »CSS3 Help Sheet« von GoSquared behilf­lich sein.

Wie gefallen dir diese CSS3 Online-Tools? Hast du schon eigene Erfahrungen mit den Tools und den neuen CSS3-Eigenschaften all­ge­mein gemacht? Kennst du noch wei­tere prak­ti­sche CSS3-Tools, die bei der Programmierung und dem Erlernen der neuen Funktionen hilf­reich sind? Über dein Feedback und deine Tipps freue ich mich sehr!