22
Jun 08

CSS Tricks Screencast Tutorials

Natürlich gibt es eine Menge schriftliche Tutorials, Howtos, Anleitungen, Artikel im Netz zu diversen den Bereich Webdevelopement betreffenden Themen. Manchmal ist es jedoch auch einfach mal schön, sich “berieseln” zu lassen, Dinge vorgemacht und kommentiert zu bekommen. Daher möchte ich gerne die Screencast Tutorials von CSS Tricks empfehlen.

CSS Tricks Screenshot
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.


18
Apr 07

Stylish: Webseiten dem eigenen Geschmack anpassen

Eine geniale Erweiterung (nicht nur) für das Füchschen. Stylish erlaubt das Anpassen des Aussehens beliebiger Internetseiten auf eine einfache und intuititve Art und Weise.

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!


21
Sep 06

Der wahrscheinlich bescheurtste IE-Bug

So was ätzendes. Da hat verwendet man nichtsahnend Listen in Listen und möchte ihnen einen schönen linken Rahmen geben, und plötzlich macht der Internet Explorer, was er will.

Magik Creeping Text
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.


04
Jul 06

Bildunterschrift mit Hilfe einer Definitionsliste

Ich weiß gar nicht mehr genau, wofür ich es gesucht habe - warum, wieso... auf jeden Fall habe ich vor kurzem nach einer Möglichkeit gesucht, Bilder zu beschriften. Gefunden habe ich den sehr guten Artikel "Die vergessene Bildunterschrift" bei Mediaevent. Dort wird eine Lösung mittels einer Definitionsliste vorgeschlagen.
<dl>
  <dt><!-- zu definierender Begriff --></dt>
  <dd><!-- Definition --></dd>
</dl>
Diese wird dann mit CSS beliebig formatiert. Und fertig. Ich bin wirklich begeistert, da das dämliche Klassengedöns für Bilder damit wegfällt, ebenso die umständliche CSS-Formatiererei. Ich werde wohl noch eine recht- und eine links-Klasse erstellen, für kleiner Bilder, die vom Text links- oder rechtsbündig umflossen werden sollen. Sehr praktisch. ^.^

Ä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.


17
Jun 06

Levels of HTML-Knowledge

Tja, hmm... Ich denke mal .. ich bin irgendwo in between 4 & 5. Das mit der DIV-Mania habe ich noch nicht ganz hinter mir, Datentabellen mit Div's und Spans würde ich allerdings nie bauen ^-^''. Kurz vor fünf?? Wahrscheinlich eher nicht... ^-^'' aber vielleicht werd ich's ja, wenn ich länger in meinem Job gearbeitet habe ^-^''. Interessante Sache der Artikel Levels of HTML-Knowledge. Und ich bin ein bißchen stolz darauf, es über Wysiwyg hinaus geschafft zu haben ^-^'' Ich sage nur MsPublisher *rotwerd* - meine wohl größte Sünde ^-^''... Naja.. aber zu lernen habe ich noch viel, vor allem, was Feinheiten angeht. Und mehr Routine kann ja auch nicht schaden. ^.^

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.