Insbesondere seit der teilweise neu benutzbaren CSS3 Selektoren und Deklarationen sind viele solcher Tools erschienen. Meine Favoriten unter den Tools möchte ich euch hier aufzeigen.

ProCSSor

ProCSSor ist ein Tool um die Formatierung mit nur einigen Klicks zu ändern. Dabei können per Copy&Paste CSS Regeln umformatiert werden oder aber es wird eine komplette Datei hochgeladen, um umformatiert zu werden. Mithilfe der Optionen wird dann ausgewählt, wie die CSS Regeln auszusehen haben.

ProCSSor.com

Spritebox

Die CSS-Sprites-Technik wird vor allem aufgrund der Ladezeit eingesetzt. Insbesondere bei bildreichen Webseiten sollte diese Technik verwendet werden. Bei CSS-Sprites handelt es sich um einzelne Bilder, welche in eine Bilddatei verpackt werden. Per CSS wird dann der Bildausschnitt definiert, damit an gewünschter Stelle auch nur das entsprechende Bild sichtbar ist.

Mithilfe des Spritebox Tools kann eine solche Bilddatei hochgeladen werden und gesliced werden. Wurden alle Bereiche ausgewählt und mit Klassen oder Ids benannt, kann der CSS-Code ausgegeben werden.
Bei der Benutzung von Spritebox empfiehlt es sich, sich einmal die Tastenbefehle anzusehen.

Spritebox.net

px to em

Die typografisch orientierten CSS Regeln könnt ihr mit diversen Masseinheiten deklarieren. Die modernste und flexibelste Einheit ist em. Um euren Taschenrechner zu schonen und Zeit zu sparen, hilft euch pxtoem bei der Umrechnung von px zu em.

Optional könnt ihr euch, nach der ausgewählten body Schriftgrösse, ein CSS Grundgerüst generieren lassen. Das generierte Grundgerüst basiert auf dem CSS Framework http://blueprintcss.org/.

pxtoem.com

Prefix my CSS

Damit einige CSS3 Deklarationen bereits vor offizieller Empfehlung benutzt werden können, nutzen die Browserhersteller Präfixe, um diese trotzdem zu verwenden.

Um sich das Tippen von Präfix-Deklarationen zu ersparen, bietet prefixmycss das automatische Generieren von browserspezifischen Präfix-Deklarationen an.

prefixmycss.com

CSS3 Generator css3maker

css3maker.com ist ein All-in-one CSS3-Generator. Hier könnt ihr mithilfe von Reglern und Eingabefeldern Änderungen vornehmen und dabei gleichzeitig die Manipulationen im Vorschaufenster im Auge behalten. Sehr praktisch finde ich die Information seit welcher Browserversion der CSS Style zur Verfügung steht.

css3maker.com

CSS3 Generator css3.me

Inhaltlich nicht so komplex wie css3maker aber nicht weniger benutzerfreundlich zeigt sich css3.me. Ein sehr schön gemachter CSS3 Generator mit den Fähigkeiten den border-radius, box-shadow, background gradient und opacity grafisch darzustellen. Entspricht die Vorschau den Vorstellungen, kann der Code generiert werden.

css3.me

Ultimate CSS Gradient Generator

Der Spitzenreiter um Verläufe per CSS zu erstellen, ist der Ultimate CSS Gradient Generator von Colorzilla. Durch die Photoshop ähnliche Handhabung lassen sich attraktive und ausgefallene Verläufe ganz einfach darstellen und den dazugehörigen Code erstellen. Der Generator bringt schon eine Palette voreingestellter Verläufe mit.

colorzilla.com/gradient-editor

CSS Schatten Generator

Um ein Element mit einem Schatten zu schmücken, kann euch der Drop Shadow Generator von wordpressthemeshock.com hilfreich sein. Auch mit diesem Tool lassen sich, mithilfe von Reglern und einer Vorschau, schnell und einfach gewünschte Schatten erzeugen. Unter dem Drop-Down-Menü findet ihr weitere alternative Schatten Styles.

wordpressthemeshock.com/css-drop-shadow/

CSS3 Spalten Generator

Der CSS3 Spalten Generator auf debray.jerome.free.fr hilft beim Erzeugen von automatischen, gleichmässigen Spalten. Das Arbeiten mit Spalten geht somit in die Richtung der Möglichkeiten von Desktop-Publishing Software. Optional kann auch ein Spalten Trennstrich erzeugt werden. Leider ist die Browserunterstützung noch nicht so ausgereift, da der Internet Explorer die Eigenschaft zu diesem Zeitpunkt noch gar nicht unterstützt.

debray.jerome.free.fr/index.php?outils/Generateur-de-multi-colonnes-en-css3 

CSS3 Button Generator

Öde graue Buttons waren gestern. Mithilfe des CSS3 Button Generators lassen sich farbige und insbesondere layoutgerechte Buttons ganz einfach erstellen. Um sich inspieren zu lassen, könnt ihr einige Beispiele unter Showcase betrachten. Das Generieren eines Buttons wird durch die Echtzeitvorschau zum Kinderspiel.

css3button.net

@font-face Kit Generator

Damit die Typografie auf jedem Rechner gleich aussah, musste man Standardschriften wie z.B. Arial, Verdana, usw verwenden, welche auf allen Betriebsystem am meisten verbreitetet waren. Mithilfe von @font-face kann man heute browser- und betriebsystemunabhängig alternative Schriften verwenden.

Der @font-face Kit Generator auf fontsquirrel.com generiert aus einer hochgeladener Schriftdatei die benötigten Dateitypen und eine CSS Datei, um die Schriften in einer Website zu verwenden.

fontsquirrel.com/fontface/generator

Eure Meinung zählt!

Hat euch dieser Artikel gefallen? Habt ihr einen Fehler entdeckt? Was müsste man noch ergänzen? Ich freue mich über euer Feedback.

Keine Kommentare

Es gibt noch keine Kommentare