Webwork-Tools - Dem Webworker seine Werkzeugkiste

CSS 3.0 Maker: ein weiterer Generator

Ich habe im April einen CSS3-Generator beschrieben. Hier eine weitere Alternative: CSS 3.0 Maker.

Und was kann dieser CSS3-Generator?

• Border Radius: abgerundete Ecken
• CSS Transform
• Box Shadow: Box-Schatten
• Text Shadow: Text-Schatten
• Text Rotation
• RGBA
• @Font Face
• Outline Offset
• Transition
• CSS Gradient: Verläufe mit CSS

Mittlerweile zeigt auch dieser Generator nicht nur, welcher Browser was kann, sondern auch seit welcher bzw. in welcher zukünftiger Version er etwas können wird.

WeBuilder: leistungsfähiger XHTML- und CSS-Editor

Der WeBuilder * ist der Code-Editor, der mir schon seit fast fünf Jahren treue Dienste bei der Bearbeitung von XHTML-, CSS-, Javascript-, XML- und .htaccess-Dateien leistet. Bevor ich auf diesen Editor gestoßen bin, habe ich mehrere Wochen intensiv gesucht, getestet und recherchiert. Deswegen war ich sehr froh, als ich diesen Editor seinerzeit gefunden habe.

Auf der Website des Autors * gibt es neben dem WeBuilder auch die Geschwisterprodukte PHP Rapid *, HTMLPad * und CSS Rapid * zu kaufen. Die Produkte bauen aufeinander auf, wobei CSS Rapid das vom Funktionsumfang her kleinste Produkt ist. Es folgt der HTMLPad, dann PHP Rapid und schließlich der WeBuilder.

Letzterer bietet das Maximum an Funktionen. Die Preise sind vergleichsweise günstig und bewegen sich je nach Produkt und nach Lizenz zwischen knapp 20 und knapp 50 Euro. Auf der Vergleichstabelle * kann man schnell erfahren, welches Programm was kann und somit welche Anwendung für einen geeignet ist.

Der WeBuilder bietet eine Reihe von sehr nützlichen Funktionen und ein paar davon werde ich im Folgenden näher erklären: weiterlesen…

CSSDesk: Sandkastenspielchen mit CSS und HTML

CSSDesk ist ein Online-Tool und genauer gesagt ein "Sandkasten" wo man auf die Schnelle HTML und CSS-Regeln testen kann:

Zu dem Dienst gibt es nicht viel zu sagen. Links oben kommt das HTML, darunter die CSS-Angaben und rechts sieht man dann das Ergebnis.

Ganz oben kann man die Syntaxhervorhebung de-/aktivieren, Hintergrund auswählen, einen Permalink zu dem Kunstwerk generieren lassen oder man kann das ganze dann auch auf den eigenen Rechner herunterladen.

Das ganze ist zumindest in Firefox nicht sonderlich schnell und auch die Bearbeitung der einzelnen Codezeilen gestaltet sich sehr zäh, aber um ganz schnell etwas zu testen ist das Tool optimal.

Ach ja, wie erwartet funktioniert das Tool weder in Internet Explorer 6-8.

CSS3-Generator

Unter CSS3Generator.com findet man einen kleinen, aber feinen Generator, der verschiedene CSS3-Eigenschaften komfortabel erstellen kann.

Folgende Funktionen stehen zur Auswahl: Border Radius (abgerundete Ecken), Box und Text Shadow (Schlagschatten), RGBA, Multiple Columns (mehrspaltiger Text) und ein paar mehr. Bei allen Eigenschaften wird auch angezeigt, welche Browser dies auch unterstützen.

Wählt man Selectors aus, dann wird der Link zur CSS 3 selectors explained gezeigt, dort werden die neuen CSS3-Selektoren aufgelistet. Wählt man die Funktion Gradients aus, dann bekommt man einen Link zu einem anderen Generator wo man mit Hilfe von CSS3 Verläufe (engl. Gradients) erstellen kann.

Der Autor von CSS3Generator.com ist der Meinung das man das Rad nicht neu erfinden muss:

I was going to write a CSS gradient generator but then I found the CSS3 Gradient Generator which is does the job quite well.

Gefunden via @macx.

CodeBurner: eine HTML- und CSS-Referenz

Eigentlich wollte ich über CodeBurner als Erweiterung von Firebug schreiben. Den Firebug habe ich bereits in einem anderen Artikel hier im Weblog beschrieben. Für diejenigen, die es nicht kennen: es handelt sich um ein sehr wichtiges Werkzeug für Webworker, welches vor allem bei der Suche nach Fehlern auf Websites (Debugging) hilfreich ist. weiterlesen…

PrimerCSS: IDs und Klassen aus HTML rauspicken

PimerCSS ist eine kleine webbasierte CSS-Anwendung, die aus HTML die ID- und Klassen-Attribute rauspicken kann und anschließend eine CSS-Datei mit den entsprechenden Selektoren generiert:

Nicht revolutionäres, aber dennoch sehr hilfreich.

CSS Usage: welche CSS-Regeln kommen zum Einsatz?

Ich habe gestern Firebug beschrieben: das Firefox-Addon, wenn es darum geht Fehler auf Websites zu finden und zu beheben. In dem gleichen Artikel habe ich auch erwähnt, dass Firebug auch Erweiterungen anzubieten hat. Eine davon mit dem Namen CSS Usage will ich jetzt kurz vorstellen.

Nach der Installation bindet sich die Erweiterung im Firebug-Menü ein. Wenn man dann auf einer Website den Knopf "CSS Usage" betätigt, dann listet die Erweiterung sämtliche CSS-Regeln auf.

Dabei werden eingesetzte Regeln mit hellgrüner Farbe ausgegeben. Regeln, die auf einer anderen Unterseite eingesetzt wurden, werden in dunkelgrüner Schriftfarbe ausgegeben und rot sind die Regeln, die gar nicht zum Einsatz kommen. Um ein aussagekräftiges Ergebnis zu bekommen, muss man daher mehrere Unterseiten ansteuern.

Anschließend kann man die nicht eingesetzten CSS-Regeln manuell löschen oder sich mit einem Klick auf "export cleaned css" eine automatisch bereinigte CSS-Datei ausliefern lassen.

CSS-Prism: Farbwerte aus einer CSS-Datei rauslesen

CSS-Prism ist ein Online-Dienst welcher die Farben bzw. die Farbwerte aus einer CSS-Datei herauslesen kann:

Die herausgelesenen Farbwerte werden als anklickbare Farbbalken inkl. Farbwert aufgelistet. Klickt man auf so einen Farbbalken, dann gelangt man zu den einzelnen Farbwert mit zusätzlichen Infos ("in welcher Code-Zeile befindet sich der Farbwert?") und der Möglichkeit den Farbwert zu bearbeiten.

Das Tool liest automatisch die Farbwerte aus einer CSS-Datei und zwar entweder in dem man den vollständigen Pfad der Datei auf der Website eingibt oder in dem man das Bookmarklet benutzt welches auf der Website von CSS-Prism angeboten wird. Beim Benutzen des Bookmarklets reicht es, dass selbige zu benutzen wenn man sich auf der jeweiligen Website befindet. Das Bookmarklet präsentiert dann die Verweise zu den einzelnen CSS-Dateien, die im Quelltext referenziert wurden d. h. man muss den Pfad der CSS-Datei nicht kennen.

Hilfe bei CSS

Auch wenn man kein CSS-Profi ist, benötigt man vielleicht ab und zu Hilfe bei der Gestaltung von Texten. Ideal ist da die Seite CSS Type Set. Hier gibt man einfach einen Text ein und kann diesen dann mit Hilfe von Buttons und Eingabefeldern "verschönern". Und während dessen wird ("live") der benötigte CSS-Code ausgegeben, denn man im Anschluss per Copy & Paste in sein eigenes Dokument übertragen kann.

Ein Anfänger-Tool, aber ich denke es könnte dem ein oder anderen auf die CSSprünge helfen

Via Notizblog.de

BuzzBoost: Feed zu HTML von Feedburner

Der RSS-Dienst Feedburner bietet eine sehr interessante Funktion an, die sich BuzzBoost nennt. Diese Funktion findet man im Bereich "Publizieren" des eigenen Accounts. Diese Funktion "wandelt" das Feed (RSS, Atom etc.) der eingetragenen Website in HTML-Format um. Es stehen folgende Einstellungen zur Auswahl:

Die Optionen sind für alle Blog-Betreiber selbsterklärend und deswegen werde ich hier nicht näher eingehen. Wenn man die gewünschten Einstellungen getätigt und gespeichert hat, dann kann man sich entscheiden wie man das ganze auch einbindet. weiterlesen…