Kommentare 14

Mach dich fit für CSS3 mit diesen praktischen CSS3 Online-Tools

Um dir den Einstieg in die neuen CSS3-Eigenschaften zu erleichtern, sind diese praktischen 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 einbetten. Außerdem kannst du mit den Tools testen, welche Browser deine neu eingebauten Features bereits unterstützen. Das hört sich für dich nach jeder Menge Spaß an? Na dann mal los :-)

Bevor du loslegst die neuen CSS3-Eigenschaften für deine Designs zu verwenden, solltest du in dieser Browser Support-Liste nachschauen, welche Browser die CSS3-Features bereits unterstützen und bei welchen Browsern es Probleme gibt.

1. Linear Gradients (lineare Verläufe)

praktische CSS3 Online-Tools

Lineare Verläufe kannst du super für Buttons oder Hintergrund-Verläufe verwenden. Und mit dem »CSS3 Linear Gradient-Tool« von Westvic wird es zum Kinderspiel wunderschöne Verläufe zu erstellen. Den dazugehörigen CSS3-Code gibt es natürlich gleich mit dazu. Ein toller Tipp um sich mit den CSS3-Eigenschaften vertraut zu machen, ist sich den CSS-Code ganz genau anzuschauen und zu beobachten, was sich jeweils verändert.

2. Radial Gradients (radiale Verläufe)

praktische CSS3 Online-Tools

Und Westvic hat gleich eine ganze Reihe CSS3 Online-Tools erstellt. Mit dem »Radial Gradient-Tool« kannst du kreisförmige CSS3-Verläufe erstellen.

3. Text Shadow (Textschatten)

praktische CSS3 Online-Tools

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

4. Box-Shadow (Box-Schatten)

praktische CSS3 Online-Tools

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

5. Transforms (transformieren)

praktische CSS3 Online-Tools

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

6. Text Stroke (Text-Konturstärke)

praktische CSS3 Online-Tools

»Text Stroke« wird zwar noch nicht wirklich von den Browsers unterstützt, es ist aber eine interessante CSS3 Text-Eigenschaft, mit der du auf alle Fälle schon einmal ein bisschen herumspielen kannst.

7. Button-Maker von CSS-Tricks

praktische CSS3 Online-Tools

Jede Menge wunderschöne CSS3-Buttons kannst du mit dem praktischen »Button-Maker« von CSS-Tricks erstellen. Auch hier ist es wieder hilfreich, sich den CSS-Code ganz genau anzuschauen, um mit den CSS3-Eigenschaften vertrauter zu werden.

8. CSS3 Generator

praktische CSS3 Online-Tools

Der »CSS3 Generator« von Randy Jensen ist ein richtiges Multitalent. Du kannst 11 verschiedene 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 unterstützen, ist auch gleich mit angezeigt.

9. CSS3 Please

praktische CSS3 Online-Tools

Bei »CSS3 Please« kannst du verschiedene CSS3-Styles (z.B. abgerundete Ecken, Verläufe etc.) an einem Live-Beispiel testen.

10. CSS Corners (abgerundete Ecken und Verläufe)

praktische CSS3 Online-Tools

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

11. Border Radius (abgerundete Ecken)

praktische CSS3 Online-Tools
Mit »Border Radius« kannst du dir den CSS-Code für abgerundete Ecken in Gecko (Mozilla), Webkit (Safari, Google Chrome) und CSS3 generieren.

12. Border Image Generator (Image als Rahmen)

praktische CSS3 Online-Tools

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

13. @Font-Face Generator

praktische CSS3 Online-Tools

Bei Fontsquirrel findest du etliche vorbereitete @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

praktische CSS3 Online-Tools

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

praktische CSS3 Online-Tools

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

16. CSS3 Learning Tool

praktische CSS3 Online-Tools

Bist du dir noch nicht ganz sicher, wie die neuen CSS3-Eigenschaften funktionieren und in welchen Browsern sie wie angezeigt werden? Dann kannst du mit dem kleinen »CSS3 Learning Tool« schnell verschiedene CSS3-Styles in verschiedenen Browsern testen.

17. Find Me by IP

praktische CSS3 Online-Tools

Auf »Find me by IP« kannst du dir u.a. auch eine Liste der von deinem Browser unterstützen CSS3-Eigenschaften anzeigen lassen. Außerdem findest du unter dem Navi-Punkt Webdesign eine interessante Auswertung der Browser-Unterstützung verschiedener CSS3-Properties.

18. CSS3 Help Sheet (CSS3 Spickszettel)

praktische CSS3 Online-Tools

Zur Übersicht oder als Spickzettel während der Programmierung kann dir das »CSS3 Help Sheet« von GoSquared behilflich sein.

Wie gefallen dir diese CSS3 Online-Tools? Hast du schon eigene Erfahrungen mit den Tools und den neuen CSS3-Eigenschaften allgemein gemacht? Kennst du noch weitere praktische CSS3-Tools, die bei der Programmierung und dem Erlernen der neuen Funktionen hilfreich sind? Über dein Feedback und deine Tipps freue ich mich sehr!

14 Kommentare

    • @Horst Schulte: Vielen herzlichen Dank für deinen Kommentar :-) Es freut mich, dass du die Zusammenstellung nützlich findest und du sie auch gleich bei Delicious gebookmarkt hast :-)

      Viele Grüße
      Ellen

    • Hallo Franz,

      vielen herzlichen Dank für dein tolles Feedback :-)

      Ja, die Tools haben mir auch schon sehr geholfen die CSS3-Funktionen zu verstehen und zu testen. Da wird das ganze Thema wirklich gleich sehr viel übersichtlicher :-)

      Viele Grüße
      Ellen

    • @Mischok: Vielen herzlichen Dank für dein Feedback, Mischok!

      Toll, dass du die Tools gerade jetzt so gut gebrauchen kannst. Ich wünsche dir ganz viel Spaß beim Basteln mit CSS3 :-)

      Viele Grüße
      Ellen

Schreibe eine Antwort