Amazing CSS: Radialer Ladebalken

Von Marco

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

Von Marco

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…

Amazing CSS: text-shadow

Von Marco

Aus meiner Fundgrube. Hier gibt es 4 verschiedene und kreative Beispiele für den Textschatten und wie man diesen in Szene setzt. Ein Pen von Jorge Epunan.

Amazing CSS: Custom File Inputs – Images

Von Marco

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…

Amazing CSS: transition-delay

Von Marco

Aus meiner Fundgrube. Vielen ist nicht bewusst das in CSS ein Delay für die transition geschaltet werden kann. Dies verzögert die Animation durch die Transition. Welch tolle Effekte man damit erzielen kann,  zeigt hier Jesper Klitgaard.