Skip to content

Die Simpsons in CSS

CSS, das ist der Kompagnon von HTML, beides zusammen beschreibt die Webseiten die Du dir immer so aufmerksam ansiehst. Grob gesagt definiert das HTML_was_ auf der Seite ist (Überschrift, normaler Text, Link usw.) und das CSS dessen Aussehen.

Praktisch ist es etwas komplizierter und gerade CSS sind viel mehr. Man kann zum Beispiel mit ihnen zeichnen:

Die Simpsons in CSS

Dies ist nur ein Screenshot, in Chris Pattles git gibt es noch mehr Figuren und man kann sich auch den CSS Code ansehen und sein git forken.
Das ist ziemlich irre und abgefahren. CSS Magier Stufe drölf würde ich sagen tongue

  • Twitter
  • Facebook
  • Bookmark using any bookmark manager!

Amazon Referrerlinks per CSS kennzeichnen

Eine sehr elegante Lösung für Partnerlinks zu Amazon habe ich bei Felix Schwenzel gefunden. Er verweist auf ein paar Zeilen CSS die hinter jeden Partnerlink zu Amazon ein kleines Amazon-Logo setzt um ihn kenntlich zu machen. Wirklich simpel:

a[href*=“stdlw-21”]:after { content: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAABKUlEQVQ4jaXTvyuGURQH8A9KEVEMBpkok/wYlBiMLAws/gFlMJgNyiQGgxSzzSoDpRQ26V3YyCA/FskkvAzv1fs4PW8Gp07Pved8v9/nnHvu5Z9WVSHejnF0oIhr7OPpL8FGbOEDX8HfsILaSuQWFALpM3k2doz6vFaOAnEeDajDbBDaiQJT4S8XaMMulhLmMmCGoDolZ4JgL/ZwjsMUew2YmaxAX0ieYjCtJ9P3K2D6swJNIXmi1PO08uhuAqY5K/AYkmNJdCARO3MquM9uNpUPZzWRXvGQid+mitbTfpHyTexROvlqPGNO6TKNpPxlamU4ibSiC3fZKtb8HlMBG6m6s5BbkGM12A7A6EUs55GzNqE8hR/iOw4wGsGVXiOlt9GdhK7wkgf6BoarY5Bw4HxiAAAAAElFTkSuQmCC”); margin: 0 0 0 3px; opacity:0.6; }

Partnerlinks zu Amazon sind also ab sofort hier entsprechend gekennzeichnet. Und irgendwie hab ich das Gefühl, dass man damit auch noch andere lustige Dinge machen kann, mal draufrumdenken smile

  • Twitter
  • Facebook
  • Bookmark using any bookmark manager!

Mehrwertbeitrag: Twitter im neuen Gewandt

Jaaaa, auch ich habe bemerkt, dass Twitter (und Friendfeed) ein neues Design haben und muss natürlich drüber bloggen. Wie so viele Blogs in meinem Feedreader, ich kann sie ohne Taschenrechner nicht mehr zählen.
Ich schwimme mit diesem Beitrag also wie ein toter Fisch mit dem Strom, stemme mich aber ein wenig gegen die Strömung indem ich nicht nur verkünde, dass bei Twitter alles neu rund ist sondern biete Mehrwert :

(zumidest ein wenig) Wer das neue Design nicht mag oder nicht weit genug geht findet bei userstyles.org diverse CSS-basierte Modifikationen (für Firefox, benötigt das Plugin Stylish oder Greasemonkey).
Wenn es stimmt was die Twitter-Macher versprechen dann werden wir mit der neuen, AJAX-basierten, Oberfläche den Failwhale seltener sehen. Wer ihn vermisst bekommt ihn aber wieder! Mit diesem Plugin wird er zufällig dennoch eingeblendet. Denn was man wirklich liebt merkt man erst wenn es weg ist… wink

noch 2…
  • Twitter
  • Facebook
  • Bookmark using any bookmark manager!

Webseiten-Spielereien

Hab den Dilbert wieder rausgeworfen und statt dessen ein Google-Maps-Mashup hinzugefügt mit einer Karte woher die Besucher dieser Seiten kommen. Wenig überraschend fast komplett aus Deutschland. Ich bin schon aufgrund meines beruflichen Hintergrunds kein Freund derartiger Auswertungen, IPs sind von Natur aus nicht Ortsbezogen, auch wenn viele Provider ihren einzelnen Einwahlgeräten (und damit einer geographischen Region) einen festen Pool zuweisen. Nur weiss dass der Auswerter nicht im Detail und das kann sich auch von heut auf morgen ändern. Jeder versuch einer geographischen Zuordnung hat so etwa die Zuverlässigkeit von Kaffeesatz oder gewürfelten Hühnerknochen.
Wenn man die Fehlerquote ignoriert passt es aber zumindest aufs Land genau oft halbwegs und es sieht einfach lustig aus smile Also ist es jetzt bis auf Weiteres drin.
Hinter den Kulissen bastel ich gerade an einer neuen Blogrolle, thematisch sortiert, umfangreicher und und hoffentlich trotzdem Übersichtlich via CSS, ohne Javascript, zum aufklappen. Inspirationen und Teilvorlagen hol ich mir da wie schon beim Hauptmenu oben von Stu Nicholls CSS play, hab da aber nichts perfekt passendes gefunden, also bastel ich selbst und das wird eine unbestimmte Zeit dauern.
Gefunden hab ich dort aber eine Menge Varianten für Gallerien, die werd ich wohl auch noch mal ausprobieren. Idealerweise finde ich da eine die auch im RSS-Reader funktioniert.
Mal sehen wie lange das alles dauert, bei dem Wetter im Moment eher länger cool

  • Twitter
  • Facebook
  • Bookmark using any bookmark manager!

Designaktualisierung

Hab heute Nachmittag ein wenig umgebaut und oben eine Menüleiste ergänzt. Das Menü hab ich von Stu  Nicholls’ genialer Seite Cssplay übernommen, seine Seite ist ein wahres Wunderwerk an CSS-Baukunst.
Dementsprechend ist es auch komplett in CSS geschrieben ohne altertümliche Tabellen. Es sollte trotzdem in allen gängigen (CSS-fähigen) Browsern funktionieren, falls nicht bitte Bescheid sagen.
Allgemeine Meinungen höre ich aber auch gern dazu smile

  • Twitter
  • Facebook
  • Bookmark using any bookmark manager!

Firefox verschluckt sich an CSS

Seit ein paar Tagen lädt mein Rechenr zu Haus unter counter.blogscout.de das Stylesheet nicht mehr, mein Bürorechner zeigt das gleiche Problem bei www.saftboxen.de. Beide Seiten sehen ohne CSS nicht nur Bescheiden aus sondern sich auch nicht mehr wirklich angenehm zu benutzen.
Hat jemand eine Idee woran das liegen kann? Neu Laden und Cache leeren hab ich schon probiert.

  • Twitter
  • Facebook
  • Bookmark using any bookmark manager!

Gesucht: CSS-Schatten

Nachdem ich ja etwas mit dem Design gespielt habe und oben nun ein Foto¹ über die gesamte Breite geht habe ich das tiefe Bedürfnis die darüber liegende Schrift mittels eines Schattens etwas besser zur Geltung kommen zu lassen.
Nur hat mir da das W3C offenbar einen Strich durch die Rechnung gemacht. Die haben nämlich einfach die mit CSS2.0 eingeführte Eigenschaft text-shadow in der Version 2.1 rausgeworfen. Warum auch immer. Eine Alternative gibt es jedenfalls nicht wirklich, die Methode den Text zwei mal zu schreiben kommt nicht in Frage und die von meinem Haus- und Hofmagier vorgeschlagene Variante mit filtern kommt schon aus ethischen Gründen nicht in Frage weil es nichtstandardisierter, proprietärer Microsoft-Kram ist der ausserdem auch noch der Leserschaft nichts bringt, da ist größtenteils Firefox angesagt.

Hat jemand noch ‘ne Idee? Der Text wird dynamisch generiert und zeigt in der Detailansicht die Artikelüberschrift an, eine feste Grafik geht also nicht, CSS ist angesagt.

¹ Das Bild ist ein Ausschnitt eines Fotos das ich 2001 auf Achill Island gemacht habe

  • Twitter
  • Facebook
  • Bookmark using any bookmark manager!