Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 18.05.2005, 09:45
Benutzerbild von derHund
derHund derHund ist offline
durstiges Tier
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard des hundes hexenküche

na gut,

http://csskueche.xhtmlforum.de/index.php?css=5

dann will ich auch mal. (anm.: wie ich gerade feststelle, befinden sich in diesem text kaum details zur technik, wer sich also dafür interessiert, braucht praktisch garnicht erst mit dem lesen anfangen)

ursprünglich hatte ich gar kein interesse an einer teilnahme und wie immer auch keine zeit (u.a. wegens der gepardenforelle). philippps beitrag zum thema nicht-anzeige des background im body/html hat dann irgendwie doch mein interesse geweckt, drei tage vor dem einsendeschluß

ursprünglich wollte ich den screen vertikal halbieren, schwarz/weiß, mit nem schönen bild (a la dieser fehlerseite), welches dann aber wohl der zensur zum opfer gefallen wäre.

dadurch wäre das design dann recht flexibel gewesen, die idee habe ich aber dann recht schnell fallen lassen, ich weiß nicht mehr genau, warum. also blieb eigentlich nur das zentrierte, welches auch auf einen 800er paßt.

die frau am seitenende war dann das erste bild. das rot, welches man ab und an mal findet, stammt von ihren lippen. der rest ist scharz/weiß/verschiedene grautöne, und ein wenig grün (abbr), welches aus dem stiel der gelben paprika stammt.

die h1/h2 habe ich nebeneinander gesetzt, weil ich mir dachte, daß das sonst niemand machen wird ^^ dadurch ergab sich auch die schmale textbreite, die ich eigentlich ganz nett finde - blocksatz (eigentlich dem print vorbehalten) bot sich da dann auch an. die idee, den text beim hover lesbarer zu machen, habe ich wohl mal im csszengarden aufgeschnappt.

ich hatte teile des textes ursprünglich noch per relativer positionierung hin- und hergeschoben, habe es dann aber aufgrund größerer unterschiede in den verschiedenen browser (die ich auch nicht beseitigen konnte) verworfen.

die texte hatten auch ursprünglich eine 40px breiten rahmen, was einen optischen sehr netten effekt erzeugt hat - mir war vorher nie bewußt, daß die border sich dann im 45° Winkel aneinanderlegen - nach der ersten entzückung habe ichs dann aber wieder entfernt.

dadurch, daß ich mich irgendwann entschlossen hatte, irgendwas themenrelevantes zu machen, sind die h3s auch so hoch geworden - ich habe ja recht schöne, passende bilder gefunden.

bei den h3s sollte der erste buchstabe eigentlich gleich groß wie der rest des textes sein, zusammen mit dem lowercase sah das ganz nett aus. so, wies jetzt ist, ist aber auch ok. lowercase/uppercase benutze ich sowieso gern und in dem css auch noch häufiger.

im header hatte sich zuerst ein schönes sonnenblumenfeld, welches zwar themenfremd war, aber echt super aussah. ich habs dann verworfen, und mir die schöne arbeitsküche gesucht. die war anfangs nur halb zu sehen, neben dem menu - zum glück habe ich sie dann über die gesamte breite verteilt - wirkte gleich viel besser. die idee, das menu erst beim hover erscheinen zu lassen, kam mir dann auch irgendwie.

den gestreiften hintergrund habe ich mir auch bei csszengarden abgeschaut, in dem design, welches ich auch bei der gepardenforelle nachgemacht/geklaut habe.

wie ich auf die idee kam, den title der abbr mit anzuzeigen, weiß ich nicht mehr ... doch, sie entstand wohl aus einem meiner print-stylesheets, wo die hrefs auf diese art angegeben werden. daraus folgte dann auch der erste zusatz-text (im footer, ich hatte gerade musik gehört ... wer kennt den song? niemand? ok.)

ich habe in letzter zeit die pseudos after/before nicht mehr verwendet, wegens dem ie, aber hier sah ich meine chance. allerdings habe ichs wohl etwas übertrieben, mich hat es dann gepackt, und ich habe bei fast jedem element irgendwie noch after/before reingequetscht - was eigentlich dem konzept von css widerspricht, da ich ja zusätzlichen inhalt eingefügt habe ... hmm.

das einzige, was mir garnicht gefällt, ist das icon bei den externen links ... stammt einfach aus web/windings ... naja, auch da fehlte mir dann die lust/zeit. sowieso wurden viele kleine details nicht umgesetzt, weil mir die zeit fehlte. das stylesheet ist auch so schon groß genug.

viele sachen sind auch einfach nur entstanden, weil noch soviel freiheitsgrade vorhanden waren, so z.b. die gedrehten vertikalen und die horizontal gefadeten 'ranken'.

wie ich die größere schnecke (bei 'wachstum') gefunden habe, weiß ich auch nicht mehr ... zumindest habe ich gleichzeitig die zweite (kleine, im footer) gefunden ... diese wurde geteilt, um den effekt zu erzeugen, daß sie von einem in den anderen bereich kriecht. zum küchenthema habe ich mir dann noch das obst im header gesucht ... sind euch die zwei schoten aufgefallen, die übereinandergelgt ein X ergeben ^^ ... leider hatte ich keine lust mehr, daß besser mit dem xhtml in verbindung zu bringen ...

sind außerdem jemanden die kaffeebohnen aufgefallen, die sich beim hover verändern? einer der vielen gimmicks, die eigentlich wegen over-gimmickierung rausfliegen sollten, aber trotzdem geblieben sind.
das kaffee-thema paßt auch im bereich 'eigene rezepte' ganz gut - auf mich bezogen.

der link im footer, der auf den nächsten contest verweist, ist übrigens (eigentlich) so formatiert, daß er erst sichtbar wird, wenn dort wirklich ein ziel definiert wurde (#footer a[href="#"]) ... ich sehe gerade, daß dort wohl noch ein kleiner fehler sitzt, naja.

gehackt wurden z.b. alle sachen, die auf einem anderen als dem <a> hovern, außerdem die transparenz-simulation per schachbrett für den ie. glücklicherweise bleibt der text dabei noch lesbar. ie-spezifisches wurde meistens/immer mittels * html selector definiert, dinge, die der ie nicht sehen sollte, mittels attribut-selektor (#navigation[id] ul ...)

die idee, alle stati der link-bgs in eine datei zupacken, habe ich, soweit ich mich erinner, von wahsaga ... es hat den nicht zu unterschätzenden vorteil, daß beim hover gleich das bild da ist und nicht erst geladen werden muß. die bilder für #active und :visited habe ich dann auch gleich mit hineingenommen.

irgendwie habe ich beim betrachten des nackten quellcodes dann auch die idee gehabt, das irgendwie mit einzubauen ... die umsetzung gefällt mir auch nicht besonders, aber ich fand das metaphorische darin so genial. daraus folgte dann der text ganz oben, und aus den ganzen zusätzen der erklärende text unter dem menu. aus der positionierung ergab sich dann auch die zweite, höher gesetzte ebene ... auch nicht so schön, wie ich finde.

dort (im menu) habe ich dann auch nochmal exzessiv die pseudos verwendet, im opera sogar noch counter (nachdem ich endlich begriffen hatte, wie die syntax lautet). das alt/neu in klammern leitet sich übrigens aus dem visited-status des links her, falls ihr es nicht mitbekommen haben solltet ...

den lateinischen satz auf dem rechten rand (teil der ursprünglichen aufzeichnung der fermatschen vermutung) hatte ich gerade zuvor gelesen ... beim warten auf meine frau, die einkaufen war.

zwei gimmicks, die ursprünglich noch in den freiheiten waren, dann aber rausgeflogen sind, will ich hier trotzdem kurz noch nennen, da ich die bilder dafür extra noch 'angefertigt' hatte ...

das erste war ein stapel meiner bücher, die in zeitlicher reihenfolge (m)eine entwicklung ungefähr widerspiegelten ... angefangen von 'vor dem anfang' über 'web-publishing mit html', 'kreuz und quer', 'einstürzende neubauten', 'css - kurz und gut', 'rauschdrogen', 'kraftwerk - ich war ein roboter' bis hin zu 'defensive design for the web' und 'die zukunft ist fuzzy' ... war echt bedeutungsschwanger leider war das bild nachher viel zu klein, um erkennbar zu sein ...

das zweite war ein photo eines schreibtisches mit einem monitor, auf dem der ala-artikel Usability experts are from Mars, graphic designers are from Venus zu sehen war ^^

alles in allem bin ich total ohne konzept heran gegangen, das css ist mit den ideen gewachsen, und durch die ständige veränderung des grundlayouts auch recht chaotisch geworden.

schlußendlich habe ich noch ein kleines php-script geschrieben, welches die verwendeten grafiken samt dimension und größe auflistet.

mir hat der contest auf jeden fall spaß gebracht, neue erfahrungen, neues wissen, vorallem über die unterschiedlichen bugs in den verschiedenen browsern ...

irgendwie habe ich auch viel mehr über mich und meine intension gesprochen, als über technik und ...

es gäbe wohl noch viel zu sagen, aber ich denke, das reicht erstmal

falls ihr fragen habt (die im hauptthread noch nicht geklärt wurden), nur zu. das css ist zwar unkommentiert, sollte aber selbsterklärend sein.

mein eines ü wird als ? angezeigt, kann man da server-seitig etwas machen?

so richtig gefällt mir mein design nicht, so von den farben her.

wow, der text ist ganz schön lang geworden ^^
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...
Sponsored Links