9 CSS3 Tools + 20 hilfreiche CSS3 Ressourcen

Endlich CSS3 – ein Traum für Webdesigner (?!) auch wenn man sich mit „Altlasten“ wahrscheinlich noch einige Zeit „rumschlagen“ muss …

Einführung

CSS (Cascading Style Sheets) Definitionen sind heute Bestandteil jeder modernen Webseite.

Ein kurzer Einblick in die Möglichkeiten von CSS3 bietet die CSS3 Click Chart by Impressive Webs:

Innerhalb dieser CSS Definition wird festgelegt wie Inhalte (Texte, Überschriften, Links, Bilder etc.) oder Blöcke und Bereiche auf einer Webseite dargestellt werden. Dies ermöglicht eine Trennung von Layout- Definitionen und Inhalten.
Die wesentlichen Vorteile im Einsatz von CSS liegen somit in der Möglichkeit schnell Layout- Veränderungen an einer Webseite vornehmen zu können ohne die Inhalte zu überarbeiten. Des Weiteren entsteht durch die Trennung von Inhalt und Layout „schlanker“ HTML-Code welcher die Ladezeit einer Webseite beschleunigt.

Für CSS Anfänger biete ich immer gerne den Vergleich mit Formatvorlagen aus Textverarbeitungsprogrammen an. Auch hier können Darstellungs- Attribute (z.B. Schriftgröße, Farbe etc.) unter Begriffen zusammengefasst und Textbereichen zugeordnet werden.

CSS2 wurde 1998 veröffentlicht und bis heute verwendet.  Die Kombination von CSS, HTML, JavaScript und serverseitigen Scriptsprachen hat die Web- Welt in den letzten Jahren sehr verändert und offeriert jeden Tag neue Möglichkeiten.

Wie in vielen Bereichen des Webdesigns gibt es aber auch im Einsatz von CSS immer wieder einen wesentlichen „Knackpunkt“: Die Browserkompatibilität.
Viele Browser setzen heute CSS2 in den meisten Teilen korrekt um, jedoch gibt es nach wie vor noch einige Differenzen.

CSS3

Im Jahr 2000 begann die Entwicklung von CSS3 - dies lässt Freude aufkommen und eröffnet neue Möglichkeiten in der Umsetzung und Gestaltung von Webseiten.

Nach mehr als einem Jahrzehnt CSS2: Erste Browser wie Firefox, Safari/Webkit, Opera, Konqueror unterstützen CSS3 heute bereits in Teilen und/oder über Entwicklungsparameter.
Der „kleine Wehrmutstrofpen“: Bis die CSS3 Definition in alle Browser implementiert sein wird, wird nach bisheriger Erfahrung sicher noch ein wenig Zeit ins Land gehen. Dazu kommt das alte Browser- Generationen sich nicht so schnell aus der Welt der Online- User eliminieren lassen.

Hier eine Übersicht über die von den Browsern unterstützten CSS3 Eigenschaften:

www.findmebyip.com/litmus#target-selector

Aber dennoch CSS3 finde ich klasse und kann’s kaum erwarten Ein Anlass Ihnen die Möglichkeiten die CSS3 bietet in Form dieses Beitrags mit diversen Online- Tools und Ressourcen vorzustellen.

Here we go …

CSS3 Tools

1. westciv.com
westciv.com watet gleich mit 6 Online Generatoren zu CSS3 auf:

a) Lineare Verläufe
b) radiale Verläufe
c) Texte mit Schatten
d) Boxen mit Schatten
e) Text Umrandungen
f) Text Transformationen

Exemplarisch hier einmal ein Screenshot zu radialen Verläufen.

Alle Parameter können Online verändert werden und die Umsetzung erfolgt live.
Der dazugehörige CSS Code kann per Cut&Paste kopiert und in die eigene CSS Datei eingefügt werden.
Welche Browser die Funktionalität unterstützen wird in jedem Tool im Bereich „Support“ angezeigt.

2. css3please.com
CSS3, please bietet die Möglichkeit CSS Parameter direct zu editieren. Änderungen werden direkt in der „CSS3, please Box“ angezeigt.
Hier geht es um Box- Rundungen, - Schatten, - Verlauf, - Transformation und Schriftart.

3. css3menu.com
CSS3menu erstellt hierarchische CSS3- Aufklappmenüs in diversen Stilen. Bei diesem Angebot handelt es sich um eine Anwendung die heruntergeladen und auf dem lokalen Rechner installiert werden kann.
Über eine Vielzahl an Einstellungsmöglichkeiten können die Parameter und das Layout der Menüs verändert und anschließend gespeichert werden. Als Ergebnis erhalten Sie eine HTML- Datei mit den Menü- Strukturen sowie eine CSS- Datei mit dem dazugehörigen Layout- Code.

In diesem Zusammenhang ist auch der Artikel „CSS3 Dropdown Menu“ erschienen bei WebDesignerWall lesewert.
Hier wird erläutert wie ein CSS3- Aufklappmenü manuell erstellt werden kann.

4. css3generator.com
CSS3 Generator ist ebenfalls ein Online- Generator zu folgenden Bereichen: Border Radius, Box Shadow, Text Shadow, RGBA, @FontFace, Multiple Columns, Box Resize, Box Size und Outline.
Je nach Bereich können individuelle Parameter definiert, in einer Vorschau betrachtet und kopiert  oder Beispiel- Code direkt kopiert werden.

5. css-tricks.com
Über den ButtonMaker können CSS3 Buttons online erstellt werden. Einstellbar sind Button- Größe, text- Größe, Radis der Abrundung, Farbverlauf, Text- Farbe und Hoover- Farbe.
Bei klick auf den generierten Button erhält man den generierten CSS3- Code der per Cut&Paste in die eigene CSS- Datei eingefügt werden kann.

6. border-image.com
CSS3 Border Image Generator …

7. leaverou.me
CSS learning tool ….

8.  border-radius.com
Border radius …

9. www.codenique.com
Kein Online- Tool aber eine Nachschalgewerk für CSS3 Farb- Namen.

CSS3 Ressourcen

1. www.w3.org/TR/css3-selectors

2. www.css3.info

Umfangreiche Ressource rund um CSS3 mit Browser- Test Tools, Berichten über den Entwicklungsstatus und vielen Informationen rund um CSS3.

3. www.css4you.de

Deutsche CSS- Referenz mit Workshop, Stichwortverzeichnis …

4. www.webresourcesdepot.com
10+ Free HTML5-CSS3 Website Templates – erschienen bei „WebResourcesDepot“

5. www.webdesignerwall.com
Beautiful CSS3 Search Form – erschienen bei “WebDesignerWall”

6. www.css3.com

7. webdemar.com
9 Beispiele für den Einsatz von CSS3 – erschienen bei „webdemar“

8. speckyboy.com
10 Mind-Blowing Experimental CSS3 Techniques and Demos – erschienen bei „speckyboy Design Magazine“

9. www.webmonkey.com
Get Started With CSS 3 – erschienen bei „webmonkey“

10. sixrevisions.com
How to Create Inset Typography with CSS3 – erschienen bei „Six Revisions”

11. www.smashingmagazine.com
CSS 2.1 and CSS 3 Help Cheat Sheets (PDF) – erschienen bei “Smashing Magazine”

12. designreviver.com
Embedding Icons with CSS3 – erschienen bei “DesignReviver”

13. pelfusion.com
Everything You Need to Know about CSS3 Color Techniques – erschienen bei „PELFUSION“

14.www.pvmgarage.com
Touch The Future: Create An Elegant Website With HTML 5 And CSS3 – erschienen bei “pv.mgarage”

15. webdesignledger.com
12 Excellent CSS3 Button and Menu Techniques – erschienen bei “WDL- webdesignledger”

16. www.marcofolio.net
Creating a polaroid photo viewer with CSS3 and jQuery – erschienen bei “marcofolio.net”

17. line25.com
Create a Letterpress Effect with CSS Text-Shadow – erschienen bei “LINE25”

18. webstandard.kulando.de
CSS3 Transition Tutorial - Menü mit Slide-Effekt im Apple-Style – erschienen bei “Webstandard”

19. css-tricks.com
CSS3-Only Tabbed Area – erschienen bei „CSS-TRICKS“

20. www.smashingmagazine.com
CSS3 Solutions for Internet Explorer – erschienen bei “Smashing Magazine“