Guymon

CSS3 Lighting Effects CSS3 Lighting Effects

Schönes Experiment von Tom Giannattasio mit CSS3 Transforms, Gradients und Masken.

3D transforms are awesome, but they’re even cooler with lighting effects! The specular highlights are created with CSS gradients and masks. The cast shadow relies on box shadows and transforms.

Macht nur in Webkit Browsern richtig Spaß.

CSS3: Animations, Transforms and Transitions

Nette Präsentation von Estelle Weyl über diverse CSS3 Eigenschaften.

CSS3: Transitions, Transforms and Animation

Einige spannende Ressourcen habe ich über den Beitrag CSS3 transitions to go von Sven Wolfermann gefunden.

Zum einen den sehr ausführlichen Artikel Using CSS3 Transitions, Transforms and Animation:

First things first - these demos are showing of CSS transitions, transforms (2D and 3D) and animations. Currently (April 2011), 2D transforms are available in all current browsers including IE9, transitions are available in all browsers except Internet Explorers older than version 10, while 3D transforms are in Safari, Chrome and Firefox. Animations are available in Safari, Chrome, Firefox 5+ and IE10. Most examples degrade nicely, so if you are using a legacy browser you can still use a site using these, you just won’t get animation. 3D transforms generally don’t degrade nicely, so be careful when using them.

Dann die beiden Tools CSS Easing Animation Tool und cubic-bezier, sowie das Textmatebundle Ceaser-CSS-Easing.

Vielen Dank für die Hinweise!

CSS3: Multi-column Layouts

Stephan Heller hat das Multi-column-Layout-Modul von CSS3 auf seine Praxistauglichkeit getestet und zieht folgendes Fazit:

Der browserübergreifende Einsatz von CSS-Eigenschaften für die mehrspaltige Darstellung eines HTML-Elements ist heute noch nicht möglich. Allerdings könnt ihr für Firefox, Opera, Safari und Google Chrome mehrspaltiges Layout einsetzen.

Für Opera, Safari und Chrome können Inhalte durch »überspannende« Elemente in horizontale Blöcke unterteilt werden und führt zu guten Ergebnissen.

Solange eine Webseite browserkompatibel sein soll, müsst ihr für den Einsatz dieser Eigenschaften darauf warten, bis eine weitreichende Unterstützung gegeben ist.

CSS Transform und Transition Beispiel

Ein nettes Beispiel was man mit CSS Transforms und Transitions anstellen kann wird im heutigen Eintrag des CSS3 Advenstkalenders vorgestellt.

… einen Morphing-Prozess bei MouseOver (Produktabbildung “verwandelt” sich in Produktpreis), auf Basis der Kombination der CSS3 Module Transition & Transform, ohne JavaScript und mit lediglich ein paar Zeilen HTML und CSS.