Links 19/2011: CSS3

Diesmal gibt es in den Linktipps einen Überblick über verschiedene CSS3-Beiträge, die in den letzten Wochen ihren Weg ins Netz gefunden haben. Nicht alle sind produktiv in Websites einsetzbar, aber es ist doch interessant, wie weit man die Darstellung mittels CSS3 verbiegen kann!

CSS3

  • TutorialShock zeigt div-Elemente mit Blättereffekten (verbogenen/aufgeklappten Ecken) und fortgeschrittenen Schatten, durchsichtigen Klebstreifen (österr. Tixo) und einer Polaroid-Darstellung ohne Verwendung von Bildern.
  • Design Festival: hier wurde ein interessanter Artikel gepostet, der erklärt, wie man mit CSS und kleinen Bildern sich scheinbar nicht wiederholende Hintergrundmuster erstellt. Das Prinzip: man verwendet halbtransparente Graphiken, deren Breite einer Primzahl entsprechen, und definiert sie als Mehrfach-Hintergrundbilder. Tiles einer Breite von 29, 37 und 53 Pixel ergeben zum Beispiel eine Tapete die sich erst nach 56.869 Pixeln wiederholt. Man muss sich aber nicht auf abstrakte Motive beschränken: auch ein schöner Vorhang lässt sich damit erzeugen.
    Inzwischen ist daraus ein eigenes Projekt mit einer beeindruckenden Galerie entstanden.
  • Viget Inspire: was lässt sich alles mit Box-Shadows erreichen? Dieser Frage hat sich Doug Avery gestellt und 39 Beispiele für teils wahnwitzige (und nicht überall funktionierende) gebastelt.
  • Lea Verou: gibt einen Ausblick in die Zukunft, wie man irgendwann einmal  graphische Hintergrund-Bilder (u.a. Karomuster, Herzen, Carbon oder Sterne) mit reinem CSS darstellen kann. Die breiteVerwendbarkeit stelle ich noch in Frage, denn als Voraussetzung wird u.a. IE10+ genannt (außer man kann mit Abstrichen leben).
  • simurai: verwendet CSS3, um den aus der Photographie bekannten Tilt-Shift-Effekt zu simulieren.
  • Inspect Element: mit den neuen Befehlen lassen sich auch hübsche Bildergalerien mit 3D-Lightbox-Effekt zaubern.
  • WDL: der Einstieg in CSS3 wird durch sechs nützliche CSS3-Tools erleichtert.
  • Smashing Magazine: stellt CSS3-Pseudoklassen vor, mit denen man bisher vor allem durch JavaScript-Bibliotheken jQuery in Berührung gekommen ist: :root, :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :first-of-type, :last-of-type, :only-of-type, :last-child, :only-child, :empty, :target, :enabled, :disabled, :checked und :not. Auch die Cross-Browser-Kompatibilität und Einsetzbarkeit wird diskutiert.
  • Smashing Magazine: ein weiteres Posting, in dem verschiedene Tutorials, Beispiele und Tools für CSS3 vorgestellt werden.

Das könnte Ihnen auch gefallen...