Oft sind es gerade die kleinen Helfer, die Großes leisten. Ich persönlich mag kleine spezialisierte Web-Tools für viele Bereiche nicht mehr missen. Heute liefen mir gleich drei sehr nützliche Vertreter dieser Spezies über den Weg. Es handelt sich um CSS Arrow Please, Grad3 und Dirty Markup. Tools, die teilweise ihrerseits wieder auf clevere Werkzeuge aufsetzen. Hier sind sie:

CSS Arrow Please: Generator für CSS-Pfeile

Diese kleine Webapp des dänischen Entwicklers Simon Højberg generiert das CSS für Divs mit Pfeilen. Solche Container eignen sich beispielsweise sehr gut als Tooltip oder auch als grafikloser Eyecatcher in etwas größerer Ausführung. In der Webapp stellt man ein, auf welcher Seite der Box der Pfeil erscheinen soll. Weiterhin konfiguriert man seine Größe in Pixeln, die Hintergrundfarbe, sowie die Farbe und Größe des Rahmens. Der CSS-Code wird live mitgeneriert und neben den Konfigurationsoptionen und der Darstellung des generierten Divs angezeigt. So kann er per Copy-Paste leicht übernommen werden.

Zur Webapp CSS Arrow Please>>

Grad3: CSS-Generator für UI-Elemente

Grad3 generiert den CSS-Code für Schaltflächen der UI. Dabei liegt das Hauptaugenmerk auf der Generierung benutzerdefinierter Farbverläufe. Verlaufsgeneratoren gibt es ja einige, Grad3 beschränkt sich aber nicht darauf. Vielmehr lassen sich mit dem Tool auch Icons zur Schaltfläche hinzufügen. Die Verläufe können sehr fein eingestellt werden. Nicht in allen Bereichen setzt Grad3 auf die grafische Oberfläche, manche Einstellungen bedürfen der manuellen Eingabe. Das ist insoweit nicht schlimm, als ohnehin jeder Designer im Nachgang den per Copy-and-Paste übernommenen CSS-Code anpassen wollen wird. So ist Grad3 auch kein Tool für den CSS-Neuling, sondern eher ein Zeitgewinn für Leute, die auch ohne Tool wissen, was sie tun.

Zur Webapp Grad3 >>

Dirty Markup: Codecleaning aus einer Hand

Dirty Markup ist eine Webapp, die in der Lage ist, per Copy-and-Paste einkopierten Quellcode aufzuräumenn. Hierzu bedient es sich der kombinierten Fähigkeiten von HTML Tidy, CSS Tidy und JS Beautify. Der Quellcode wird in eine Textarea kopiert, die mit dem Ace Editor ausgestattet ist, so dass auch eine manuelle Bearbeitung mit korrektem Syntax-Highlighting gewährleistet ist. Über die links angeordneten Konfigurationsoptionen lassen sich In- und Output manuell aufeinander abstimmen. Dirty Markup kann HTML, CSS und Javascript bearbeiten. Der „gereinigte Code“ wird so entnommen, wie er in die App hinein gekommen ist, nämlich per Copy-Paste.

Zur Webapp Dirty Markup >>

(do)