Eine Farbwähler-Bastelanleitung
Bastelanleitung für einen interaktiven Farbwähler. Dieser ist in HTML, CSS, JS, jQuery umgesetzt und kann die einstellbaren Helligkeits-, Sättigungs- und Farbwerte in HSB, HSL, RGB und HEX ausgeben.
Weiterlesen
Kreise animieren (2)
Generieren und Animieren von SVG circles mittels CSS und jQuery unter Nutzung der Attribute stroke („Pfadkontur“), stroke-dasharray (in etwa: „gestrichelte Kontur“) und stroke-dashoffset (meint so etwas wie: „Verschiebung der gestrichelten Kontur“).
Kreise animieren (1)
Gestaltung von runden Fortschrittsbalken, Timern oder Countern mittels CSS via transform:rotate absolut positionierter HTML-Elemente.
CSS-Transitions
Zu Beginn wieder eine Spielerei 🙂 Rakete! Via jQuery wird über den Button eine Klasse zweier Container (für die Rakete und den Hintergrund) getoggelt, bei denen die Position mittels CSS Transition animiert wird. Es gibt aber auch sinnvolle Beispiele, z.B. beim Button-Design: Auch hier auf der Seite wird übrigens der Menü-Button via toggleClass() und CSS Transitions animiert: Und das geht "recht einfach": Der Button besteht lediglich aus zwei divs, einem […]
:hover-Effekte für Touchscreens?
Bei dem Artikel zu CSS-Transitions ist mir mal wieder aufgefallen, wie selbstverständlich (sprich: altmodisch, da desktop-sozialisiert 🙂 ) man mit der Pseudoklasse :hover umgeht, obwohl doch Benutzer von Endgeräten mit Touchscreens nicht "hovern" können. Da aber irgendwas zwischen 30 und 50% aller Seitenaufrufe im Internet (je nach Quelle, Tendenz: steigend) von Mobilgeräten getätigt werden, ist das ein wenig vermessen – vor allem, wenn man den Anspruch hat, geräte-unabhängige Webseiten zu […]