datenwerk Charts: Top 5 CSS Online-Tools

Logo: Top 5 datenwerk chartsDie Zeiten, in denen die beliebten runden Ecken, Schatten oder sonstige Effekte in Webdesigns mit zahlreichen Grafiken und semantisch inkorrekten HTML-Konstrukten realisiert werden mussten, sind glücklicherweise vorbei. CSS3 heißt das Zauberwort, aber auch hier hat jeder Browser seine eigenen Regeln (Stichwort: Vendor Prefixes).

Grund genug, in den datenwerk Charts nützliche Tools vorzustellen, die jedeR Frontend-DeveloperIn in den Bookmarks haben sollte.

 

5. EM Calculator

Designs mit relativen Einheiten umzusetzen, hat einige Vorteile – vor allem in Sachen Skalierbarkeit und Accessibility, aber … die Berechnung kann jedoch mitunter etwas mühsam werden. Abhilfe schafft der EM Calculator, der die Vererbung der Werte auf Kindelemente berücksichtigt und optisch darstellt.

Screenshot EM Calculator

 

4. cssdesk

Zum schnellen Testen zwischendurch. Statt ein eigenes Dokument für CSS-Tests anzulegen, kann man dies im Online-Editor tun. Per Share-Funktion kann das Ergebnis mit anderen EntwicklerInnen geteilt werden.

Screenshot cssdesk

 

3. Animate.CSS

CSS basierte Animationen sind eine tolle Alternative zur JavaScript-Variante. Animate.CSS bietet eine tolle Basis an Effekten, welche direkt eingesetzt werden können, ohne lange mit Parametern experimentieren zu müssen. Wie die EntwicklerInnen schon sagen: „Just-add-water CSS animation“.

Screenshot Animate.CSS

 

2. Ultimate CSS Gradient Generator

Komplexe Farbverläufe stellen mit dem CSS3 Gradient Generator kein Problem dar. Mit einer hübschen grafischen Oberfläche (inspiriert von Photoshop) lassen sich aufwendige Verläufe erstellen und einsetzen.

Screenshot Ultimate CSS Gradient Generator

 

1. LayerStyles

Wenn in Photoshop designed wird, kommen meist auch die Layerstyles oder Ebeneneffekte zum Einsatz. Mit dem gleichnamigen Online-Tool erhält man eine sehr ähnliche Oberfläche, die den entsprechenden CSS-Code für moderne Browser bereitstellt.

Screenshot LayerStyles

 

Haben wir ein wichtiges CSS-Tool vergessen? Dann immer her damit! Oder waren euch die Charts zu technisch und ihr habt nur Bahnhof verstanden? Kein Problem, einfach eine Umsetzung bei datenwerk beauftragen und wir kümmern uns darum.

 

 

Das könnte Dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.