Da gestern von Sidebars und ihrer Verwendung die Rede war, möchte ich heute mal an zwei Beispielen zeigen, was Leute aus ihrer Sidebar gemacht haben. Der Look ist in beiden Fällen etwas grungy, was nicht jedem gefällt, aber darauf kommt es hier nicht an. Es soll ja nur die Vielfalt der Möglichkeiten gezeigt werden.
Die Technik dahinter ist nicht schwierig zu verstehen. Es wird alles über CSS gesteuert. Die Überschriften bekommen ein passendes Hintergrundbild und der eigentliche Text wird mit einem text-indent: -9999px aus dem Sichtfeld geschoben, damit er nicht das Hintergundbild überdeckt. Dadurch bleibt er – wenn verlinkt – klickbar.
Beispiel:
{
height: 46px;
background-color: transparent;
background-image: url(images/cat.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
text-indent: -9999px;
}
Hier die Showcases:
High Voltage SEO
highvoltageseo.com
The Always Upward Blog
alwaysupward.com
Schaut euch einfach die Blogs an und lasst euch von der Gestaltung inspirieren.
Thesis rockt! Get it now! · Live Demo
Related Posts
Tiny Url für diesen Beitrag: http://tinyurl.com/bfzxz6
{ 4 comments… einen eigenen schreiben }
Thanks for the kind words!
You’re welcome. Thank you for the inspiring Thesis modification.
Coole Sache mit der Gestaltung der Überschriften.
Kannst du mir sagen wo ich den oben angezeigten Code reinschreibe. In die custom.css datei? Muss ich den Code für jede Überschrift neu schreiben? Kannst du das einfügen der Grafik eventuell noch genauer beschreiben da ich ein Programmier Anfänger bin.
Gruß
JackG
Ja, in die custom.css. Den Code musst du für jede Überschrift neu schreiben, weil du ja jeweils eine eigene Grafik einbinden willst. Du musst also für jede einzelne Überschrift den Dateinamen (hier: cat.png) anpassen.