Sehr schön und praktisch: Culturecode hat eine sehr übersichtliche Referenz für die CSS 2.1 Eigenschaften erstellt.
Archives
13
Mai 06
Linklisten CSS-Galerien
Sowohl Dr. Web als auch SELFHTML haben Linklisten herausgegeben. Eine Unmenge an CSS Galerien zur Inspiration und auch als Lehrmeister ;) Eine schöne Sache. Und es erspart mir die Arbeit, mir selbst solch eine Linkliste zu erstellen.
Übrigens schon länger gibt es eine Aufliste von nicht nur CSS Galerien im Web Developer's Handbook.
16
Apr 06
diverses zum Thema Webdevelopement
Viel zu lesen. Zum Beispiel ein Artikel des SELFHTML-Weblogs der sich mit dem Thema Layout beschäftigt: Tabellen, Spalten und Weblogs vs. Hypertext. Passend dazu das Floatutorial von maxdesign. tjkdesign beschreiben in ihrem Artikel, wie man aus einer klaren XHTML-Struktur viele unterschiedliche Layouts erstellen kann - nur mit der Power von CSS. Und wenn ich schon dabei bin ^-^''. Um so etwas zu bewerkstelligen braucht man Positionierung, also schnell zum Tutorial Learn CSS Positioning in Ten Steps und Einschließen von Floats ohne zusätzliches Markup.
Dann lohnt es sich definitiv bei Webdesign from Scratch vorbeizuschauen, gleich zwei interessante Artikel sind mir damals ins Auge gefallen. Zum einen Information Architecture Models, zum anderen ein Artikel über die Basics des Webdesigns. Etwas mehr Theorie, dennoch interessant: Five simple steps to typesetting on the web: printing the web, ein Thema, über das man normalerweise nicht so nachdenkt ^-^'' - ich zumindest nicht. Wobei ich bei meiner Tutorialseite damals eine Druckansicht hinzugefügt habe.
Zwei Seiten habe ich dann noch, die sich mit dem Thema Formulare beschäftigen, zum einen eine Anleitung eine Suchbox so aussehen zu lassen, als sei es eine Safari Suchbox. Sieht schick aus und werde ich bestimmt irgendwann einmal ausprobieren ^-^''. Und der zweite Artikel: Using CSS to Create a Two-Column Layout.
Zuletzt noch ein paar Seiten, die sich mit den CSS-Codes auseinandersetzten. Perun verlinkt auf zwei Seiten, welche sich mit der Übersichtlichkeit des Codes beschäftigen. Bei Webstandart geht es um CSS shorthand properties, also wie man manche CSS-attribute bündeln kann.
01
Feb 06
Linktipp: Selfhtml aktuell Weblog
Eigentlich mag ich gerne auf den aktuellen Artikel des Selfhtml aktuell Weblogs hinweisen. Ziemlich ausführlich beschäftigen sich die Autoren mit Grundlagen für Spaltenlayouts mit CSS. Ein längerer Artikel, der Methoden wie float: oder auch Tabelllen-Verhalten anspricht. Natürlich mit Beispielen, wie man es von Selfhtml gewöhnt ist und einer Analyse des "wie die Browser reagieren".
30
Jan 06
CSS: Generierter Content
Ich weiß nicht, in wie fern Opera da mitmacht, der Internet Explorer kann es auf jeden Fall noch nicht. Mit CSS generierter Content bei Pseudo-Elementen.
Hööö, Bahnhof?
Also, bei CSS gibt es Pseudo-Elemente, diese erkennt man an den Doppelpünktchen. So sind :hover und :visited bekanntere Pseudo-Elemente (diese funktionieren sogar im IE ;)) :before und :after, :first-child, :last-child, :first-letter, :first-line eher unbekanntere. Es gibt auch noch andere, dafür bitte hier nachlesen ;).
Mit den Pseudo-Klassen kann man richtig schöne Formatierungen erstellen. Eine Möglichkeit wäre z.B., dass der erste Buchstabe eines Eintrages richtig groß sein soll, wie es in alten Büchern der Fall ist. Aber was ich gerne machen mag, ist extra Inhalt einfügen. Und zwar bei Links.
CSS generierten Inhalt einfügen
geht ganz einfach. Angenommen, vor jedem Link soll ein Kringel auftauchen, dann füge ich eine Definition für das Pseudo-Element a:before ein und erzeuge das Kringelchen mit content: '°'a:before {So einfach geht das ;). Hier kann beliebiger Text eingefügt werden, welcher natürlich auch mit Hilfe von CSS formatiert werden kann (z.B. die Farbe kann geändert werden, die größe, die Zeilenhöhe...). Und es geht noch besser. Mit dem passenden Unicode-Code könnt ihr auch jedes Sonderzeichen einfügen lassen, mezzoblue erklärt es sehr schön und liefert ein paar schöne Glyphen ;).
content: '° ';
}
Um beliebige Zeichen darzustellen, benötigt ihr den Unicode (z.B. über die Windows Zeichentabelle (nur die Zahl nach U+) oder direkt über die Unicode Seite). Diese wird dann hinter einem Backslash eingefügt.
a:before {Und wenn der Browser es kann, taucht dann vor jedem Link das ausgewählte Zeichen auf. Eine Andwendungsmöglichkeit ist z.B. auch einen besuchten Link "abzuhacken". Hierfür fügt man nach jedem besuchten Link ein Häckchen ein:
content: "\123";
}
a:visited:before {
content: "\2713";
}
Mel aka