Lasse Dich von CSS-Tricks via Screencast weiterbilden oder inspirieren

Neben Tricks und Tipps zum Thema CSS gibt es in den momentan 23 Screencast umfassenden Archiv unter anderem eine Anleitung, wie man eine außergewöhnliche und individuelle Twitter-Seite erstellt, eine Einleitung in jQuery oder mehrere Vorträge (2 verschiedene Designs) zu Thema, wie man einen Photoshop-Entwurf in HTML/CSS umsetzt.

Die Screencasts sind sehr angenehm, ein gut verständliches Englisch und soweit ich es bisher gesehen habe, auch ohne unnötiges Geplapper, welches nichts mit dem Thema zu tun hat.

Passend dazu gibt es z.B. die Community userstyles.org, auf der man viele gesammelte Styles für die verschiedensten Seiten finden kann – ideal für jeden, der keine Ahnung von CSS hat.

Das Anpassen von Seiten ist für jene mit CSS Kenntnissen und z.B. der Erweiterung X-Ray zum einfachen Ansehen von Klassen und ID-Details einer Seite sehr simpel.

Und bei der Gelegenheit: Hicksdesign hat ein geniales Stylish-CSS für den Google Reader erstellt. Sehr schick!

Rauslaufender Text

Nach dem das erste Mal der Rahmen eingesetzt wurde, rückt der Text immer weiter nach links. Mit Rand und Innenabstand hat das nichts zu tun. Und erst nach mühsamen auskommentieren und einzelnem wiedereinfügen meiner CSS-Definitionen habe ich den Übeltäter gefunden.

Glücklicherweise konnte ich damit auch googlen und eine Lösung finden. Bei Position is Everything ist dieser Bug als Magik Creeping Text bekannt. Und dort erhält man glücklicherweise eine Lösung für das Problem, auch wenn empfohlen wird, so stark verschachtelte Boxen nicht einzusetzen. Die Lösung ist letztendlich noch seltsamer: Im übergeordneten Element muss ein border-bottom gesetzt sein. *kopfschütteln*

Wer noch mehr seltsame Eigenheiten des IE’s ansehen möchte, sollte unbedingt bei den e-workers vorbeischauen. Dort gibt es nämlich eine nette Bloßstellung des M$-Browsers.

Ähm… nur um es zu erwähnen. Weil ich beide Artikel fand und überflog. Auch das Markup-Journal schrieb über diese Lösungsmöglichkeit.

Übrigens: Falls man immer die gleiche Bildgröße verwendet (was vor allem bei umflossenen Bildern sinnvoll sein kann, weil die Float-Eigenschaft bei CSS immer eine Breitenangabe benötigt) ist es auch sehr einfach mit Hilfe der Definitionsliste das Bild mit einem Hintergrundbild (z.B. einer Schattengraphik) zu verschönern ;)). Bei Gelegenheit gehe ich darauf vielleicht mal näher ein. Ansonsten denke ich, dass es etliche Tutorials dazu bereits in den Weiten des Webs gibt.

Nachtrag Tja hmm, da gibt’s ja auch noch Levels of CSS-Knowledge. Würde mich auch da zwischen vier und fünf einordnen ^-^”… auch gegen fünf *lol*. Denn auch im CSS-Bereich habe ich noch viel zu lernen. Finde diese beiden Artikel allerdings auf jeden Fall sehr interessant.

Sehr schön und praktisch: Culturecode hat eine sehr übersichtliche Referenz für die CSS 2.1 Eigenschaften erstellt.

Übrigens schon länger gibt es eine Aufliste von nicht nur CSS Galerien im Web Developer’s Handbook.

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.

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 {
 content: '° ';
}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 ;).

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 {
 content: "\123";
}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:
a:visited:before {
 content: "\2713";
}

Was sind Block-Elemente?
Was bedeutet das jetzt? ‘Block’-Elemente sind z.B. Layer oder Absätze. Sie sind abgeschlossen und nach ihnen wird automatisch die Zeile umgebrochen. Für genauere Beschreibungen verweise ich einfach mal auf einschlägige Literatur und begnünge mich mit Beispielen: <div>,<p> und <ul> oder <ol> sind ‘Block’-Elemente, während z.B. <b>,<i> oder besser <strong>,<em> oder aber auch <img>-Elemente es nicht sind. Sie sind ‘inline‘, das heißt, hinter ihnen geht es ganz normal, ohne einen Textumbruch, weiter.

Nun bietet CSS die Möglichkeiten, Elementen eine Anzeige-Eigenschaft (z.B. block oder inline) zuzuweisen. Dies geschieht mit der Angabe:display:block; bzw.display:inline;

Automatisches Zentrieren der Bilder via CSS
Für das automatisch zentrierte Bild, muss man dem <img>-Tag die Anzeigart block zuweisen, zentriert wird danach mit margin:auto:.storycontent img {
 display:block;
 margin-left:auto;
 margin-right:auto;
}
.storycontent  habe ich vor img gesetzt, da ich nur die Bilder innerhalb meines Postings ansprechen möchte. Und  das Posting befindet sich in einer Box der Klasse .stroycontent. Mit obrigem Code wirkt die CSS-Definition nur auf alle Bilder innerhalb dieser Boxen.

Jetzt kann man das Bild beliebig formatieren. Z.B. einen Bilderrahmen darum setzten. Hierfür benötigt man einen inneren Randabstand (padding), und einen Rahmen (border) und kann z.B. auch noch die Hintergrundfarbe (background) ändern.

Beispielcode
Ein Beispiel für solch einen Code ist: .storycontent img {
 display:block;
 margin:2px auto;
 padding:4px;
 border:1px dotted blue;
 background: white;
}

Nachtrag:
Diese Art zu zentrieren funktioniert natürlich auch mit jedem anderen Blockelement. Somit ist es z.B. die einfachste Möglichkeit, eine komplette Seite mit fester Breite, im Browser-Fenster zu zentrieren (Im Template Lavender habe ich noch meine alte und wesentlich umständlichere Methode verwendet, so als Vergleich ;)).

Mehr zum Thema CSS CSS rund und eckig und überall, css – Browserkompatibilität und Positionierung, CSS Intensivstation und Menu-Highlights

Lustig (Bild anklicken und scrollen) ^-^” Wird nur mit XHTML und CSS verwirklicht: X-Ray-Effekt [via PHP-Princess]. Achso, nix für Internte Explorer-Benutzer!

Und noch ein paar Einzelseiten, die defnitiv mindestens einen Besuch wert sind ;). Matthias Nicolai besticht mich mit interessanter Navigation. Vasava ist das Portfolio einer spanische Artwort Agentur, sehr sehenswert. Shift ist ein japanisches Ezine, natürlich auch mit Blog. db-db.com – Design together ist für das Füchschen auf dem Rechner meines Freundes etwas zu heftig. Liegt wohl an der Visualisierung der gerade auf der Seite befindlichen Besucher ^-^”. Für mich etwas unübersichtlich. Schön anzusehen, im wicked worn-Style: 555design.

Komme ich nun zu diversen Blogs, welche ich min. noch einmal besuchen mag ;). hinterding und joshuaink. TheMM or us?, der ISNMblog der Uni Lübeck. Definitiv ein Kandidat für den RSS-Reader ;) : Veerle’s blog, geniale Tutorials und auch ansonsten sehr lesenswert. Weiter geht’s mit der Ideengeberin, auf jeden Fall mit Control-O und Platoon. Der Gadgetryblog ist auch ein Kandidat, wenn auch schon ein alter Bekannter. ^-^” Und als Abschluss ein Besuch bei the flow.

Für CSS-Fans, oder solche, die es werden wollen Wohl eher für letztere ist definitiv Flumpcakes zu empfehlen. In meine Favoriten ist auch noch der Weblog eines Pessimistischen Webdesigners geraten – coole Seite ^-^”. Und von dort gleich weiter zum Pixeltutorial des Pixelfreak.

Und auch schon seit Ewigkeiten in meinen Links: Für alle die gerne Scrabblen ist Morewords die optimale Schummelmaschine. Eingeben der Buchstaben die man hat, und das online-Dictionary spukt passende Wörter aus. Fastfoodkids ist eine seltsame Seite, die ich vor längerem mal entdeckt habe. Dort findet sich der ein oder andere Link zu Kitsch-Shops.

In einem anderen Blog (leider habe ich Link aus meinem RSS-Reader schon gelöscht – Entschuldigung!) gefunden: das Rätselblog – juchuuu.. wiedergefunden [via ab::gebloggt]. Und ging vor ein paar Wochen in der Blogger-Szene rum: Tunespoon.tv als Alternative zu MTViva – gegen den Klingeltonwahnsinn – aber nur mit Banbreite zu genießen.

Gulli:World begibt sich in eher andere Kreise des Internets. Monsun.blogg habe ich noch nicht ganz verstanden – aber mich auch noch nicht so damit beschäftigt. Mangelnde Bandbreite. Mag DSL haben :(. Noscope muss ich mir auch noch mal genauer ansehen.

Ansonsten, wie wäre es mit In 80 Klicks um die Welt. Und einem halt bei diesen tollen Bildern von Pariesern Hört sich blöd an ^-^” . Aber die Bilder sind genial!! Und wer jetzt noch Lesestoff benötigt kann in Bens WG-Zimmer schmöckern.