Wer schon mal ein Image-Sprite in Photoshop erstellt hat und anschließen die Positionen der einzelnen Bilder per Hand ausgemessen hat, der kann ein Lied von dieses mühseligen Prozedur singen.
Auch die tolle CSS 3 Möglichkeit Farbverläufe per Hand zu erstellen ist eine potenzielle Fehlerquelle.

Glücklicherweise haben sich bereits einige Leute darüber Gedanken gemacht und extrem hilfreiche CSS online Tools programmiert.

CSS online Tools gibt es einige. Hier möchte ich euch meine Favoriten vorstellen, die regelmäßig in meinen Projekten zum Einsatz kommen.

1. Sprite Cow

Mit diesem Tool lassen sich sehr komfortabel Image-Sprites erstellen. Mittels JavaScript werden die Positionen der einzelnen Bilder erfasst und die Koordinaten und die Auschnittsgröße werden als CSS-Snippet bereitgestellt. Zu Sprite Cow.

top_5_css_online_tools_emelpe_webdesign_01

Sprite Cow

 

2. Ultimate CSS Gradient Generator

Mit diesem Tool lassen sich schnell und unkompliziert CSS Farbverläufe erstellen. Die Eingabe erinnert an das Verlaufwerkzeug von Photoshop. Das Tool generiert den benötigten CSS Code und erstellt sogar IE 6 – 9 kompatible Varianten. Zum CSS Gradeient Generator.

top_5_css_online_tools_emelpe_webdesign_02

Ultimate CSS Gradient Generator

 

3. Layer Styles

Dieses Tool ist an die Ebenen Optionen von Photoshop angelehnt und bietet deren Funktionalität auf CSS Basis. Zu Layer Styles.

top_5_css_online_tools_emelpe_webdesign_03

Layers Styles

 

4. Can I use

Mit diesem Tool lässt sich schnell prüfen, welche Browserversion welchen CSS Befehl unterstützt, um eine gewisse Abwärtskompatibilität zu gewährleisten. Zu Can I use.

top_5_css_online_tools_emelpe_webdesign_04

Can I use

 

5. PXtoEM

Toller Umrechner von Pixelwerten in em-Werte. EM-Werte sind flexibler und gerade für responsive Projekte unumgänglich. Zu PxtoEM.

top_5_css_online_tools_emelpe_webdesign_05

PX to EM