Webwork-Tools - Dem Webworker seine Werkzeugkiste

Kinderleicht Hintergrundgrafiken & Muster erstellen

Mit Hilfe des Online-Tools patternify.com kann man sehr einfach Hintergrundgrafiekn bzw. Muster (engl. Pattern) erstellen.

Links oben kann man das Muster generieren oder unterhalb davon auf einen Satz vorgefertigter Muster zurückgreifen und diese anpassen. Rechts bekommt man das Ergebns in Form einer PNG-Grafik präsentiert oder als Base64-Code welches man direkt in die CSS-Datei einbinden kann.

Unten rechts kann man mit Klick auf Get Pattern URL kann man den Permalink generieren um später wieder zum gleichen Muster zurückkehren zu können.

lorempixum – ein Bildgenerator der Extraklasse

Bildgeneratoren haben wir hier schon vorgestellt. Darunter war ein Generator, der nur Katzenbilder im Repertoire hat: placekitten und der Dynamic Dummy Image Generator ein "seriöserer" Vertreter seiner Zunft, bei dem man sich einfache farbige Grafiken generieren kann um sie in Webprojekten als Platzhalter einzusetzen.

Nun bin ich auf einen Bildgenerator gestoßen, der diese beiden meiner Ansicht nach in den Schatten stellt: lorempixum weiterlesen…

Achtung: Katzen-Content

Kleine Kinder und Katzen gehen ja fast immer. Und auf schönen Fotos machen sie eigentlich auch immer einen guten Eindruck. Diese Eigenschaft, verbunden mit der Tatsache, dass man beim Konzipieren einer Website auch Dummy-Bilder benötigt haben sich die Macher von {placekitten} zu nutze gemacht.

Sie bieten Katzenbilder als Platzhalter an. Dafür gibt man als Bild-URL lediglich

http://placekitten.com/

ein, gefolgt von der gewünschten Größe des Bildes, also z. B.

http://placekitten.com/200/300

für ein Katzenbild, das 200×300 Pixel groß ist.

Möchte man lieber ein schwarz/weiß-Bild haben muss man noch ein "g" in der URL unterbringen:

http://placekitten.com/g/200/300

Wer es lieber etwas langenweiliger seriöser mag, dem möchte ich den Dynamic Dummy Image Generator ans Herz legen, den Perun hier schon einmal vorgestellt hat: Generator für Platzhaltergrafiken

Via @hillens

Webdesign: Variationen einer Farbe herausfinden

0 to 255 ist ein Online-Dienst, der es einem ermöglicht von einer bestimmten Farbe hellere und/oder dunklere Variationen herauszufinden. Einfach auf der Website mit dem Picker aus der Auswahl eine Farbe wählen oder in das Feld den hexadezimalen Farbwert eintippen.

Man kann aber noch viel schneller an das Ergebnis drankommen. Einfach an die URL http://0to255.com den hexadezimalen Farbwert ohne das Rautezeichen einfügen. Dabei wird auch die CSS-Kurzschreibweise unterstützt.

Um zu den Farbvariationen zu gelangen, wie sie in der Abbildung zu sehen sind, reicht es http://0to255.com/c60 aufzurufen.

Und so ein Kurzlink hat nicht nur den Vorteil, dass man schneller zum Ziel kommt sondern auch das man es auch leichter weitergeben kann.

Arboreal: im Firebug den DOM-Baum veranschaulichen

Arboreal ist eine Erweiterung für Firebug, mit der man den DOM-Baum recht gut veranschaulichen kann. Hier ein Ausschnitt:

Den neuen Menüpunkt findet man dann in Firebug wenn man den Hauptpunkt HTML anwählt. Im rechten Kasten befindet sich dann ein Unterpunkt mit dem Namen Visualization.

Skizzenbuch für Webdesigner und Grafiker

Kurze Rede, langer Sinn: Rain Creative Lab hat einen Paper Browser entwickelt, der alle diejenigen freuen wird, die Webseiten oder die Grafiken dafür gestalten und sich dafür Skizzen machen möchten. Diesen "Papierbrowser" kann man sich nämlich als PDF-Dokument zum Ausdrucken herunterladen. Der Clou: die Papiere haben als Rahmen einen Browser und sind für verschiedene Bildschirm-Formate konzipiert.

Eine Version hat dabei z. B. das Format 1024x768px minus der Browser Tool- und Statusleiste. Eingezeichnet sind zudem die Breiten 800px und 960px. Die Kästchen in der Rasterung entsprechen dabei 32x32px.

Die Vorlagen sind für das eigene Brainstorming, aber auch vielleicht zum ersten Ideensammeln mit dem Kunden eine hilfreiche Unterstützung. In Zukunft soll es die Skizzenbücher auch zum Kaufen als "richtige" Bücher geben.

Via Designer in Action

Ligthbox Matrix: das richtige Script finden

Ich war neulich auf der Suche nach einem Lightbox-Script, das eine gutes Verhältnis aus Performance und gebotenen Funktionen anbietet. Für diejenigen, die es nicht wissen: Lightbox nennt man Scripte, die die Bilder und andere Elemente versuchen ansprechend zu präsentieren.

auf der Suche anch einem geeigneten Script hat mit die Website mit dem Dienst The Lightbox Clones Matrix gute Dienste geleistet:

Die Suche nach dem richtigen Script kann man durch Aus-/Abwahl verschiedener Kriterien – welche JS-Bibliothek bzw. Framework kommt zum Einsatz, kann das Script Bilder gruppieren, Größe etc. – eingegrenzt werden. Klar, das Testen der einzelner Scripte kann das Tool nicht ersetzen, führt aber auf jeden Fall dazu, dass man schneller zum Ziel kommt, weil die absolut ungeeigneten Kandidaten von vorne rein ausgesiebt werden.

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.

PixelZoomer: Lupe, Farbpciker und Maßband in Einem

Bei PixlZoomer handelt es sich um ein sehr interessantes Firefox-Addon für Webworker. Mit dieser Erweiterung kann man Aschnitte einer Website vergrößern, die Farbwerte auslesen und Bereiche und Abstände pixelgenau ausmessen.

Nach der Installation ist das Addon über den Icon in der Statusleiste und über das Kontextmenü aufrufbar. Es öffnet sich ein neues Fenster und in diesem wird die Website geklont und nun kann man Farbwerte auslesen, Zoomen und/oder Abstände ausmessen.

Auf der Website des Autors gibt es neben zusätzlichen Infos in deutscher Sprache auch ein Video in dem die Funktionen der Erweiterung demonstriert werden.

Entdeckt auf Twitter.

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.