13.08.09

Selbstauferlegte Aufgabe mit viel Rock’n’Roll und noch mehr Gefrickel

Netzpolitik hat am vergangenen Montag zum CDU-Plakat-Verschandeln aufgerufen. So weit dürften das die meisten mitbekommen haben. Im Nullkommanichts gab es claimbefreite Vorlagen sowohl als PDF als auch als Bilddateien. Besonders pfiffig war Niels Heidenreich, der die FPDF-Library nutzte, um ein Online-Formular zu basteln, welches das Remixen erheblich erleichterte.

Ein wenig CSS steckte schon drin, aber es sah doch noch sehr trist und nach purem Defaultstyle aus. Und weil ich in der Nacht auf Mittwoch nicht richtig schlafen konnte und demnach Zeit für Blödsinn hatte, nahm ich die Herausforderung – Redesign des Generators – an.

Herausforderung nenne ich es deshalb, weil ich mir vorgenommen hatte, bloß am CSS zu basteln und das Markup völlig unberührt zu lassen. Schon die Absenz eines Inhalts-Wrappers machte diese Aufgabe nicht gerade leichter. Was es aber durchaus erleichterte, war die Tatsache, dass den Generator IE6- und IE7-User wohl nie zu Gesicht bekommen würden. Also brauchte ich darauf schon einmal keine Rücksicht zu nehmen und konnte deshalb, was die shiny Featureness von CSS3 anging, aus den Vollen schöpfen.

Die Header-Schäublone

Das Design ansich ist nicht spektakulär. Die Header-Schäublone war ursprünglich mal eine Katze, weil ich die Internet-Remixkultur irgendwie mit Katzen verbinde. Der Inhaltsbereich wurde von einem Schlagschatten eingeschlossen und das eigentliche Formular mit absoluten Positionierungen und dem original Hintergrundbild aufgehübscht.

Das Formular

Den Schlagschatten wollte ich eigentlich ganz easy mit box-shadow realisieren, bedachte aber zum Zeitpunkt des Pixelschubsens nicht, dass sich dies aufgrund des Fehlens eines Wrapper-Divs etwas sehr viel schwieriger gestalten würde.

Ich schaute mir im ersten Anlauf also das HTML an und hackte drauf los. Da ich normalerweise ohnehin zuerst das komplette Markup schreibe und danach die CSS-Regeln definiere, war mir der sich einstellende Workflow nicht unbekannt. Die größte Herausforderung bestand aber eben darin, die Div-Knappheit in den Griff zu bekommen.

Naiverweise dachte ich, es würden keine Inhalte mehr hinzukommen. Deshalb gab ich dem ersten auftretenden Absatz (p:first-child) einen 800px großen padding-bottom und einen ebenso großen, negativen margin-bottom. Dadurch konnte das Hintergrundbild mit dem Schlagschatten in seiner ganzen Fülle dargestellt werden, während sich alle folgenden Elemente einfach darüber platzierten – negativer Margin sei dank.

Das war der erste Streich, simpel. Das Ganze an Niels geschickt und der baute es ein. Als aber dann nach und nach immer mehr zusätzlicher Content auf der Seite auftauchte, wurde mir meine Naivität klar. Ich sah den Inhalt sich der magischen Grenze von 800px vertikaler Ausdehnung langsam nähern. In meinem Kopf stolperte Buchstabe um Buchstabe über die schattige Klippe, jede Type seinem Kontrast-Tod entgegen. (Auweia, ich sollte Dramen schreiben!)

Also doch, das Hintergrundbild slicen, denn etwas Flexibles musste her. Der erste Absatz bekam den oberen Rand, der letzte den unteren. In der Mitte wurde es schwieriger. Ich musste allen Elementen, die ein direktes Kind des body sind (body > *), das 1px hohe Hintergrundbild zuweisen. So konnte ich dem form jedoch nicht mehr das Schäuble-Plakat als Hintergrundbild definieren, dazu musste jetzt das erste fieldset herhalten.

Die Aktion machte unheimlich Spaß und ist nicht zu vergleichen mit einem Design für den CSSzengarden, wo es viele zusätzliche Elemente gibt, die sich zum Styling nutzen lassen. Ganz postpraktikum-mäßig kann ich auch sagen, dass ich etwas gelernt habe. Was? Das kann ich, wie bei besagten Praktika, nicht genau sagen.

Zum Glück ist das Internet bekanntermaßen ein rechtsfreier Raum, ich möchte nicht wissen, wie lange ich in den Datenknast müsste, für das was ich an diesem Tag den Web-Technologien antat.

Kommentar verfassen

Textile-Hilfe

  • *stark*
  • _betont_
  • "Link":http://url.com/
  • bq. Zitatkasten
  • bc. Code-Block
Der Kommentar kann erst abgeschickt werden, wenn man mindestens einmal die Vorschaufunktion aktiviert hat.

Flattr

Blogrolle

Podroll

Soziale Netzwerke

Twitroll

PromoteJS

JS String .toUpperCase