Webwork-Tools - Dem Webworker seine Werkzeugkiste



Kinderleicht Hintergrundgrafiken & Muster erstellen

Von Vladimir am 22. Oktober 2012 um 12:56

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

Hintergrundgrafiken und -Muster online 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.

Kommentare deaktiviert

lorempixum – ein Bildgenerator der Extraklasse

Von Sahanya am 11. April 2011 um 13:39

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

Von Sahanya am 03. März 2011 um 09:37

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

Von Vladimir am 22. Januar 2011 um 10:12

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.

Variationen einer Farbe

Variationen einer Farbe

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.

Kommentare deaktiviert

Arboreal: im Firebug den DOM-Baum veranschaulichen

Von Vladimir am 05. Januar 2011 um 15:24

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

Arboreal: in Firebug den DOM-Baum veranschaulichen

Ausschnitt des DOM-Baums von perun.net

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

Von Sahanya am 06. September 2010 um 18:29

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.

Paper Browser

Paper Browser

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

Von Vladimir am 30. August 2010 um 11:40

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:

Lightbox Matrix

Mit Hilfe der Lightbox Matrix die Suche einschränken

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

Von Vladimir am 28. August 2010 um 09:55

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

CSS 3.0 Maker

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.

Kommentare deaktiviert

PixelZoomer: Lupe, Farbpciker und Maßband in Einem

Von Vladimir am 14. Juli 2010 um 09:15

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.

PixelZoomer im Einsatz

PixelZoomer: Lupenfunktion und Maßband im Einsatz

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

Von Vladimir am 30. April 2010 um 13:28

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

CSSDesk

CSSDesk im Einsatz

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.

Archiv: 1 2 3 »»