Amazing CSS: Radialer Ladebalken

Mithilfe von SVG – Grafiken, CSS und etwas Javascript lässt sich erstaunliches erschaffen. So auch in diesem Fall – radiale Ladebalken, welche animiert sind. Vor allem das Zusammenspiel aus den Grafiken mit CSS ist erstaunlich.

Pen von Erin E. Sullivan

Amazing CSS: Animierte Signatur ohne JS

Aus meiner Fundgrube.

Eine flüssig animierte Signatur ohne Javascript? Technisch umsetzbar, wenn auch viele Bedingungen zutreffen müssen. Hierbei wird mittels CSS Animationen und einem Bild, welches mehrere Frames (im Endeffekt ein kleiner Film in einzelnen Bildern) besitzt eine starke Leistung erzielt.

Vielleicht dient dies manchen als eine Art Machbarkeit-Studie – für den alltäglichen Gebrauch wird man sich wahrscheinlich für andere Umsetzungen entscheiden.

Hier ist der Pen von Damian Drygel.

Amazing CSS: Custom File Inputs – Images

Aus meiner Fundgrube.

Die file-input Elemente stellen in Sachen Gestaltung sowieso seit jeher ebenso wie die Checkboxen eine Besonderheit dar. Jedoch kann man mit neuen, überlagernden Pseudo Elementen oder effektivem CSS-Design diese Hürde umgehen.

Im folgenden Fall werden die input[type=file] Felder umgestylt, mit rudimentärem jQuery (CSS Klasse switchen – on.change) und CSS3.

Hier findet ihr den Code von Paolo-Duzioni.