CSS Font Stacks
Über das Smashing Book (welches ich gerade lese und danach einen kurzen Erfahrungsbericht zu abgeben werde) bin ich auf Font Stacks gestoßen. Ich hab zwar schon vorher mit komma-separierten Font-Familien in meiner CSS Datei gearbeitet, aber das Thema an sich noch nie wirklich intensiv behandelt und angewendet.
Um mir für die Zukunft die Suche zu ersparen, hier zwei Links wo man schnell seinen passenden Font Stack auswählen kann:
- 21 Css Font Stacks with Examples - der Link zu den Beispielen befindet sich unterhalb vom Bild
- Build better CSS Font Stacks - mit prozentualer Anzeige auf wievielen Rechnern die jeweilige Font-Familie vorhanden ist.
Und hier noch für Interessenten ein paar Links zum Thema:
- Better CSS Font Stacks - mit ausbalancierten Font-Familien für Title und Content
- Guide to CSS Font Stacks: Techniques and Resources - alles was man zu CSS Stacks wissen muss, auf Smashing Magazine natürlich ;)
Tags: css, font, font stacks, font-family, fonts
CSS Sprites - Background Repeat Problem
CSS Sprites sind wirklich was feines, man kann einen Hover Effekt ganz einfach mit der “:hover” Pseudo Klasse des a-Tags von HTML realisieren, man benötigt keinen Preloader für den Hover-Bildaustausch, und man spart sich ein paar HTTP-Requests, da weniger Einzel-Daten geladen werden müssen. Doch ein Problem konnte ich bislang damit nicht lösen, nämlich wenn ein Teil des Sprites als Background-repeat benutzt werden soll.
Bei einem aktuellen Projekt habe ich gerade genau das Problem. Ich habe eine Datei, in der ich einige PNG24 Grafiken (die mit Verlaufs-Transparenz) zusammengefasst habe, die “normalen” Grafiken machen auch keinerlei Probleme, doch was passiert mit den Grafiken, die als “background-repeat” verwendet werden? Folgender CSS-Code funktioniert leider nicht wie gewollt:
#box2r {width: 676px; padding-bottom: 5px; background: url('img/png24_set.png') 0px -26px; background-repeat: repeat-y;}
Es handelt sich um die “Hauptbox” deren Höhe durch den Inhalt vorgegeben ist. Ich möchte aus dem Sprite die Teilgrafik haben, die 676px breit und 1px hoch ist und möchte diesen Teil über die komplette Höhe der Box legen (normalerweise realisiert durch “background-repeat: repeat-y”), doch leider funktioniert das nicht mit Sprites :(
Es gibt zwar eine Möglichkeit, aber ich halte die nicht für wirklich brauchbar, da man ziemlich eingeschränkt wird und für meinen Fall ist es keine Alternative, hat sonst noch jemand eine Idee wie man das lösen könnte?
