03
Feb 06

Tools: Online-Farbtools

Online-Farbtools gibt es wie Sand am Meer. Ein paar davon habe ich gerade eben besonders in mein Herz geschlossen.

Zum einen Colormixers.

Man hat die Möglichkeit, Hex-Codes einzugeben und kann dann mit Hilfe von RGB-Reglern herumspielen. Zusätzlich werden zu der eingestellten 8 weitere Farben vorgeschlagen. Solche Farbschemata kann man dann auf verschiedene Arten exportieren.

Und dann der Color Scheme Generator.

Bei ihm bekommt man immer drei Farben vorgeschlagen, die zu der eingegebenen passen. Dabei kann man auswählen, wie die Farben sich anpassen sollen, ob kontrastreich oder Ton-in-Ton.

Das dritte Tool ist das 4096 Color Wheel.

Hier kann man sieben Farben auswählen, welche dann „gespeichert“ werden. Kleiner Nachteil ist, dass die erste Farbe überschrieben wird, wenn man eine achte Farbe anklickt usw.

Ansonsten gibt es natürlich noch ColorMatch 5k und dieser Seite nachempfunden Traumwind 6-Colormatch. Auch Colorblender liefert passende Farben zu einer mit einem RGB-Regler eingestellten Farbe. Eine schöne Liste über solche Tools findet sich in den Bookmarks for Web-Designers and Web-Developers und im WebDevelopers Handbook.


01
Feb 06

Linktipp: Selfhtml aktuell Weblog

Eigentlich mag ich gerne auf den aktuellen Artikel des Selfhtml aktuell Weblogs hinweisen. Ziemlich ausführlich beschäftigen sich die Autoren mit Grundlagen für Spaltenlayouts mit CSS. Ein längerer Artikel, der Methoden wie float: oder auch Tabelllen-Verhalten anspricht. Natürlich mit Beispielen, wie man es von Selfhtml gewöhnt ist und einer Analyse des „wie die Browser reagieren“.


30
Jan 06

CSS: Generierter Content

Ich weiß nicht, in wie fern Opera da mitmacht, der Internet Explorer kann es auf jeden Fall noch nicht. Mit CSS generierter Content bei Pseudo-Elementen.

Hööö, Bahnhof?
Also, bei CSS gibt es Pseudo-Elemente, diese erkennt man an den Doppelpünktchen. So sind :hover und :visited bekanntere Pseudo-Elemente (diese funktionieren sogar im IE ;))  :before und :after, :first-child, :last-child, :first-letter, :first-line eher unbekanntere. Es gibt auch noch andere, dafür bitte hier nachlesen ;).

Mit den Pseudo-Klassen kann man richtig schöne Formatierungen erstellen. Eine Möglichkeit wäre z.B., dass der erste Buchstabe eines Eintrages richtig groß sein soll, wie es in alten Büchern der Fall ist. Aber was ich gerne machen mag, ist extra Inhalt einfügen. Und zwar bei Links.

CSS generierten Inhalt einfügen
geht ganz einfach. Angenommen, vor jedem Link soll ein Kringel auftauchen, dann füge ich eine Definition für das Pseudo-Element a:before ein und erzeuge das Kringelchen mit content: ‚°‘a:before {
 content: '° ';
}
So einfach geht das ;). Hier kann beliebiger Text eingefügt werden, welcher natürlich auch mit Hilfe von CSS formatiert werden kann (z.B. die Farbe kann geändert werden, die größe, die Zeilenhöhe…). Und es geht noch besser. Mit dem passenden Unicode-Code könnt ihr auch jedes Sonderzeichen einfügen lassen, mezzoblue erklärt es sehr schön und liefert ein paar schöne Glyphen ;).

Um beliebige Zeichen darzustellen, benötigt ihr den Unicode (z.B. über die Windows Zeichentabelle (nur die Zahl nach U+) oder direkt über die Unicode Seite). Diese wird dann hinter einem Backslash eingefügt.
a:before {
 content: "\123";
}
Und wenn der Browser es kann, taucht dann vor jedem Link das ausgewählte Zeichen auf. Eine Andwendungsmöglichkeit ist z.B. auch einen besuchten Link „abzuhacken“. Hierfür fügt man nach jedem besuchten Link ein Häckchen ein:
a:visited:before {
 content: "\2713";
}


28
Jan 06

Tool: ScreenGrab!

Mal eben schnell einen Screenshot von einer Webseite machen? Am besten noch von der kompletten Seite, nicht nur dem Ausschnitt, den man im Browserfenster sieht? Kein Problem mit der Firefox Erweiterung ScreenGrab!

Nach dem man die Erweiterung installiert und Firefox einmal neugestartet hat, befindet sich im Kontext-Menu (rechte Maustaste) das Menu ScreenGrab!, welches drei verschiedene Aufnahmemodi anbietet:

  • Save document as image…: Aufnahme der kompletten Seite, also auch das, was außerhalb des
    Browserfensters liegt. Beim Abphotographieren der Seite scrollt ScreenGrab! diese einmal komplett durch.
  • Save viewport as image…: Screenshot der Seite, Inhalt des Browserfenster
  • Save window as image…: Aufnahme des Browserfenster (also inklusive der Firefoxmenus)

Das so „geschossene“ Bild wird dann in einer *.png Datei gespeichert. Der Speicherort wird nach der Aufnahme abgefragt.

Damit ScreenGrab! funktioniert, muss Java installiert und angestellt sein. Und bei zu langen Seiten, kann es sein, dass das Abphotographieren der kompletten Seite nicht funktioniert, denn diese Funktion ist speicherbegrenzt.

Neugierig geworden? ScreenGrab!


28
Jan 06

Linktipp: Typetester

Du bist Dir nicht sicher, welche Schrift dir am besten gefällt? Oder Du magst wissen, worin sich die Schriten unterscheiden? Typetester ist eine kleine Seite, die in solchen Fällen hilft.

Drei verschiedene Schriftarten können direkt online verglichen werden. Auswählen kannst Du alle bei dir auf dem System installierten Schriftarten.

Ausprobieren?: Typetester.