Ein Kessel Buntes Rotating Header Image

Bitte, ein Raster!

Auf Internetseiten ist alles am Raster ausgerichtet. Insofern überrascht es nicht, dass es bereits von mehreren Seiten (mehr oder weniger) kleine Helferlein zur Darstellung von Rastern („Grids“) gibt. Zwei sind mir in letzter Zeit über den Weg gelaufen und ich möchte sie kurz vorstellen.

080122-Tools-01.jpg

Wie auf dem Bildschirmfoto erkennbar kann man beide als Lesezeichen im Browser einbinden. Das eine erzeugt „nur“ ein Raster, das andere gibt einem gleich vier (Design-)Tools zur Hand, von denen eines ein (vielfältig veränderbares) Raster ist.

Zuerst möchte ich auf das kleine Rastertool eingehen, das ich bei CSS-Tricks gefunden habe.

Dieses lässt ein transparentes PNG über dem eigentlichen Seiteninhalt schweben. Beispiel:

080122-grid.jpg

Dabei werden in dem Beispiel-Datei drei PNG-Dateien zur Verfügung gestellt, die entweder ein horizontale, eine vertikale oder eben wie auf dem Bild horizontal wie vertikale Hervorhebung haben.
Bei den Kommentaren auf oben genannter Seite findet man auch bereitgestellte Javascripte, bei denen die Bilder von externen Servern zur Verfügung gestellt werden. Einfach nur das Script einsetzen und schon kann es losgehen. Ich habe es „Grid on/off“ genannt, denn ein zweiter Klick lässt es wieder verschwinden.

Schon vor einiger Zeit hatte ich bei Frank Bültge von dem zweiten Design-Tool-Set gehört, welches ich vorstellen will. Im Dezember konnte ich es aber (aus welchen Gründen auch immer) nicht bei mir starten. Im Januar wurde ich wiederum (von o.g. Seite bei CSS-Tricks – unter „other options“) darauf aufmerksam, so dass ich es wieder probierte … und war begeistert.

Deshalb empfehle ich nun gerne einen Besuch bei Allan Jardine, um dieses „Four-in-One“-Webdesigntool anzuschauen.

Dabei handelt es sich ebenfalls nicht um ein Plugin, das an einen Webbrowser gebunden ist, sondern um ein Javascript-Programm, das deshalb ebenso auf anderen als dem favorisierten Browser funktioniert. Nachdem man das Script in ein Lesezeichen gespeichert hat, ist das Designtool jederzeit über die Lesezeichenleiste einsatzbereit. Nach dem Aufrufen erscheint ein schwebendes Fenster, das die vier Helfer zur Verfügung stellt:

080122-designtool-01.jpg

Wenn man nun das erste Werkzeug aktiviert, so erscheint neben einem Raster auch ein Fenster, in dem man das Aussehen des Rastern verändern kann. Sehr praktisch.

080122-designtool-02.jpg

Die restlichen drei erklären sich von selbst:

  • ein Lineal-Werkzeug („Rule“)
  • ein Einheitenmesser („Unit“)
  • ein Fadenkreuz („Crosshair“)

Und nun viel Spaß beim Ausprobieren.

-->

bereits 1 Kommentar

  1. Wirklich eine gute Idee, danke für Link-Hinweis

Raum für einen Kommentar