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";
}


30
Jan 06

Upgrade auf WordPress 2.0

Das ging ja einfach und problemlos. Upgrade auf WP 2.0 lief ohne Probleme. Was ich designtechnisch anpassen muss werde ich sehen. Bis jetzt sehe ich kein Problem. Archiv funktioniert noch und auch meine ganzen anderen Unterseiten. Wow - viel besser als beim letzten Mal.

Und nach dem ich festgestellt habe, wie es funktioniert, den Editor umzustellen werde ich auch langsam mit dem neuen Admin-Panel warm ^-^''. Gefällt mir gut.

Jetzt frage ich mich allerdings, ob ich wirklich strickten HTML-Quelltext schreiben muss, oder mir der Editor die Zeilenumbrüche trotzdem macht.

:)

Etwas werde ich allerdings irgendwann ändern. Mir gefällt die Archiv-Form überhaupt nicht mehr, bzw. mir fehlt eine Möglichkeit, viele Einträge auf einmal anzeigen zu lassen. Monatweise oder so etwas in der Art, werde ich mich mit beschäftigen müssen, wenn ich etwas Zeit habe. Also ab Mitte März ^-^''. Bis dahin, bleibt der kleine netzgeschaedigt-Weblog genauso vernachlässigt wie er das die letzten Monate war.


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.


28
Jan 06

Linktipp: Veerle's Blog

Warum? Weil es ein interessanter Blog ist, der von Zeit zu Zeit richtige Leckerbissen bietet. 

So hat Veerle u.A. ein interessantes Tutorial zum Thema "Von der Skizze bis zur Illustration" geschrieben oder berichtet über interessante Details zum Thema Webdesign oder Arbeiten mit Illustrator oder Photoshop - natürlich nicht nur ;).

Am besten ihr macht euch selbst ein Bild: Veerle's Blog.