FLIR statt sIFR und @font-face?

12. August 2008, Keine Kommentare

FLIR unter der Haube

Träum nicht mehr von der @font-face Unterstützung in Safari! Es gibt jetzt eine neue Technik, die sich «Facelift Image Replacement» nennt, auch kurz: FLIR. Alle Browser, die Javascript und Bilder anzeigen können (Also fast alle Browser ;) ) unterstützen diese Technik. PHP und die GD Library machen den Rest.

Die Technik

  1. Zuerst liest ein Javascript den Inhalt des Elements aus, das ersetzt werden soll und übergibt sie an ein PHP Skript.
  2. Das PHP Skript erstellt dann ein Bild, das den Inhalt mit der bestimmten Schriftformatierung und Schriftart (die vorher natürlich durch eine ttf Datei URL angegeben wird) anzeigt.
  3. Das Javascript ersetzt den Text durch das Bild.

Interessant zu erwähnen ist auch, dass das PHP Skript ein halbdurchsichtiges png Bild erzeugt. Das bedeutet, dass Hintergrundfarbe/-bild durch das Bild durchscheinen wird und somit auch funktioniert.

Nachteile?

  • Der Text kann nicht selektiv kopiert werden, sondern nur als ganzer Text (wegen dem alt Attribut des Bildes) oder als ganzes Bild.
  • Da Javascript nur dann einsetzt, wenn die Seite fertig geladen ist, gibt es ein kurzes Aufblitzen von unformatierten Text.

An alternative to sIFR: Facelift Image Replacement | Breathe new life into your web pages

FancyShadow

23. Juli 2008, Keine Kommentare

Sommer Special

FancyShadow auf Bildern angewandt

Hast du dich schon mal gefragt, wie ich diese schönen Schattenwürfe bei meinem Wood Theme auf den Bildern angewendet habe? Die sind eigentlich ganz leicht zu machen mit einbisschen CSS, xHTML und Javascript. Javascript, weil wir in unserer xHTML Datei keine unnötigen, unsemantischen <div> Tags haben wollen ;) .

Ich habe dafür eine ganz einfache, simple Mootools Klasse geschrieben, den ich kurzerhand FancyShadow getauft habe, die den xHTML Code automatisch generiert.

Mit Firefox Mockups erstellen

9. Juli 2008, Keine Kommentare

Pencil erstellt Mockups

Pencil ist ein Firefox 3 Extension, mit dem man ganz einfach Mockups erstellen kann…

Ob für Webseiten, Windows oder Linux Programme; Pencil stellt alles in Form von einer kleinen “Shapes” Bibliothek zur Verfügung. Leider gibt es als Shapes nur die Widgets von Windows XP.

Es gibt Pencil auch als Standalone Version, die nicht von Firefox 3 abhängig ist – für Windows und Linux.

Home - Pencil Project

CSS Tutorial: Photo Stream

1. Juli 2008, Keine Kommentare

Ein Photo Stream

Ein CSS Tutorial, also. Wir wollen ein Photo Stream mit horizontale Scrollleisten (mit 3 ‘l’!) erstellen; ihr könnt das Endergebnis hier begutachten:

(Nicht im Quellcode spicken ;) )

Weiterlesen…

Texturen für Designer

27. Juni 2008, Keine Kommentare

Unterschiedliche Texturen, wie z.B. von Papier

Eine tolle Sammlung von Texturen… Sind größtenteils auf stock.xchng gehostet, wer sie downloaden will, muss sich zuerst registrieren. Aber wozu gibt es BugMeNot? **gg*

99 Free Canvas, Paper, Paint, and Metal Textures | Tutorial9 - Tutorial Bliss.