Guymon

3d Rollovers

Chris Heilmann stellt eine Sammlung von 3d Rollover Effekten auf Github bereit.

In Webkit Browsern sieht das wirklich nett aus. In anderen Browsern ist das unspektakulär, aber nutzbar.

Dazu gibt es auch diese Seite auf der man mit den Werten spielen kann.

Checkboxen und Radioboxen gestalten

Sven Wolfermann stellt eine Idee für individuelle Checkboxen & Radio Inputs vor.

Einige Formular-Elemente lassen sich (…) nur schwerlich, bis gar nicht cross-browser-konform stylen, z.B. das input[type=”file”]. Für Checkboxen und Radio-Buttons möchte ich heute eine Möglichkeit zeigen, die zudem auch die neuen CSS3 Pseudo-Klasse :checked beinhaltet.

Die Idee ist die Input-Felder über background-clip zu verstecken und das Label Element für die Styles zu nutzen.

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!