Kostenlose Tools zur CSS-Entwicklung

In meinem Beitrag “CSS: Form folgt Funktion” mache ich darauf aufmerksam, wie wichtig eine saubere Programmierung ist — und daß sie sich rechnet. Oft tippe ich meine CSS-Styles mit dem Fachbuch oder meiner selbstgebastelten Referenzkarte in der Hand in einen ganz normalen Texteditor — für manchen Beobachter ein mittleres Wunder, daß man auch so Websites entwickeln kann. Ab einem gewissen Umfang und Komplexität sind aber auch spezialisierte Hilfsmittel sinnvoll. Man findet sie unter dem Stichwort CSS-Editor oder CSS-Generator. Das Spektrum reicht dabei vom Universaltool bis zum Spezialisten für Details.

Vieles scheint man seit Jahren zu kennen, doch man darf dabei eines nicht verwechseln: Gerade “Designer” ohne technisches Wissen arbeiteten oft mit festen Grafiken, die unflexibel und datenlastig sind (Horror: blind.gif und Tabellen). Eine CSS-basierende Lösung kann sich bei richtiger Konzeption automatisch sowohl auf 30-Zoll-Bildschirme als auch kleine Tablett-PCs oder sogar Smartphones anpassen, benötigt weniger Bandbreite und kommt insgesamt dem Ziel “Barrierefreiheit” deutlich näher.

Universelle CSS-Tools

Um eine CSS-Style-Datei mit allem drum und dran anzulegen, bietet sich der CSS-Designer an. Die Bedienung ist in Deutsch und das Windows-Programm muß noch nicht einmal installiert werden.

CSS-Designer

CSS-Designer

Es bietet viele Möglichkeiten, allerdings sollte man schon eine Vorstellung davon haben, wie eine CSS-Datei prinzipiell aufgebaut ist, weil sonst schnell einmal die Selektoren vergessen werden. Vermutlich weil schon etwas älter, scheint er auf der Homepage des Entwickler leider nicht mehr zum Download angeboten, ist aber noch via Chip verfügbar. — Simple CSS ist nicht ganz so grafisch, dafür aber neben Windows auch für Mac zu haben. Exklusiv für Mac ist dagegen Xyle Scope.

Es gibt aber noch eine Menge anderer, wirklich überraschender Tools für die Entwicklung von CSS-Funktionen.

 

Ob Windows, Mac oder Linux spielt nur für lokal installierte Software eine Rolle. Die erzeugten Dateien können natürlich plattformunabhängig eingesetzt werden und sind auch mit anderen Programmen kompatibel: man kann “fertige” Dateien auch mit einem anderen Programm laden und bearbeiten. Es gibt aber auch eine Menge Online-Tools, wo es diese Unterscheidung gar nicht geben muß.

Noch nicht ganz perfekt werden neueste VCSS-Eigenschaften von den Browsern umgesetzt. Doch je öfter CSS eingesetzt wird, desto mehr Mühe werden sich die Entwickler der Browser geben.

 

Spezielle CSS-Generatoren

Mit Allroundtools kommt man schnell an die Grenzen, wenn man auf bestimmte Details Wert legt. Hat man eine gewisse Grundlage geschaffen, lohnt sich oft ein Spezialtool. Viele solcher Generatoren laufen sogar online, so daß man sie jederzeit plattformunabhängig zur Hand hat.

CSS Layout Generator

Bevor man sich in Details verliert, sollte man sich dem Layout widmen. Auch dieses sollte man vor dem ersten Klick besser ganz konservativ auf Papier skizzieren und den Inhalten anpassen. Dann greift man zu einem Online-Tool wie dem “CSS Layout Generator“. Das Ergebnis bekommt man per Download-Link.

CSS Layout Generator hilft bei den Grundlagen.

CSS Layout Generator hilft bei den Grundlagen.

 

CSS3 Generator

Textschatten mit dem CSS-3-Generator erstellen.

Textschatten mit dem CSS-3-Generator erstellen.

Unter der simplen Bezeichnung “CSS3 Generator” findet man ein Online-Tool, das viele Wünsche abdeckt:

  • Border Radius
  • Box Shadow
  • Text Shadow
  • RGBA
  • @Font Face
  • Multiple Columns
  • Box Resize
  • Box Sizing
  • Outline
  • Transitions
  • Transform
  • Selectors
  • Gradients

Die Bedienung erfolgt interaktiv, es wird die Kompatibilität zu unterschiedlichen Browsern angezeigt und zum Schluß kann man einen Code-Schnipsel ins Klemmbrett kopieren. — Ein Online-Tool für diverse Detaillösungen in Sachen CSS ist der “CSS 3.0 Maker“. Ähnlich einfach, dem selben Namen, aber nicht ganz so umfangreich ist der CSS3 Generator bei css3.me.

Ultimate CSS Gradient Generator

Auf Farbverläufe spezialisiert ist das Online-Tool “Ultimate CSS Gradient Generator“. Wie von Programmen wie Photoshop oder Corel Draw gewohnt, kann man aus fertigen Verläufen auswählen oder sich selbst per Schieberegler zusammenstellen.

CSS Button Generator

Für einzelne Funktionen oder ganze Menüs benötigt man Schaltflächen, die sich vom normalen Text abheben und nicht langweilig aussehen. Dazu bedarf es keiner Grafik, denn mit CSS-Funktionen wie Hintergrundfarbe und runde Ecken kann man aus ein paar Buchstaben einen hübschen Button machen. Behilflich ist dabei der “CSS Button Generator“. In einem Eingabeformular gibt man seine Wünsche ein, klick, fertiger Code kann kopiert werden. — Ein ähnliches Tool ist der “css3 button generator“.

CSS Tab Designer

Einer der Spezialisten ist der “CSS Tab Designer“. Dabei steht “tab” nicht für Tabelle, sondern im Sinne von Karteireiter-“Tab” einer Navigation.

CSS Tab Designer

CSS Tab Designer

Das Programm für Windows bietet eine Menge Vorlagen an, die man eigenen Wünschen entsprechend anpassen kann. Der Entwickler verspricht, daß die Freeware trotzdem hohen Ansprüchen gerecht wird.

  • 100% WYSIWYG Instant built-in preview
  • Beautiful Menus Designed by famous web designers
  • Fast & Clean Self Contained. Doesn’t install any DLL or ActiveX
  • 100% Clean No Spyware, no trojan
  • 100% Free Even for commercial websites. No Strings attached!
  • Generate strict xhtml compliant code

Wer es lieber online mag, schaut sich den “CSS Menu Maker” an. Eine einfachere Variante erzeugt man per “CSS Menu Generator“.

3D CSS Text

Lange vorbei sind die Zeiten, in denen der Browser jeden Text in “Times” anzeigt. Aber schönere Schriften als Textgrafik einzubinden ist höchst unprofessionell — da gibt’s natürlich auch eine Lösung mit CSS: 3D CSS Text. Bei diesem Online-Tool kann man alles per Schieberegler einstellen und sieht darüber sofort das Ergebnis. Der fertige Code kann aus einer Box kopiert werden.

CSS Warp

Einen Schritt weiter als Schattentext-Generatoren geht CSS Warp, wo man eine Textzeile an Hand eines Pfades verbiegen kann. Als erstes gibt man den Text ein, dann kann er über die Funktionen “curve”, “type” und “point” bearbeitet werden. Dabei kann aus einer endlosen Liste an Schriftschnitte gewählt werden, die sofort in der aktuellen “Grafik” verwendet werden. Durch einen Klick auf “warp it” kann man sich Zwischenergebnisse anzeigen lassen, “generate html” führt zum Code-Schnipsel.

CSS Warp verbiegt Texte

CSS Warp verbiegt Texte

w4z9vgw

Comments

comments

Leave a Reply

Your email address will not be published.