CSS-Transformationen
Ich habe mich mal mit CSS-basierten 2D- und 3D-Transformationen auseinandergesetzt. Alles, was ich herausgefunden habe, steht in diesem Artikel; incl. Bastelanleitungen für Wendekarten und 3D-Würfel.
Weiterlesen
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.
CSS Schalter
Mittels Hidden Checkbox Hack kann man recht einfach hübsche CSS Toggles basteln, die z.B. in Einstellungsmenüs oder Formularen verwendet werden können.
Animierte Slideshows
Ich finde CSS-Transitions und Animations ja ziemlich lustig 🙂 und wollte schon immer so eine Web-Slideshow basteln ohne irgend ein JavaScript. Hier mal ein Beispiel: Slide01 Slide02 Slide03 Slide04 Slide05 Das war einfacher als gedacht. In diesem Artikel hab ich das nun etwas aufbereitet – als Inspiration, zum Nachbauen oder Experimentieren (und nicht zuletzt als Dokumentation für mich). 1. Bilder aussuchen Man nehme ein paar Bilder, z.B. diese hier: Oder […]
CSS: Hüpfende Bälle
Hier also – wie angekündigt – ein weiteres Projekt aus der Kategorie "Funny CSS Stuff": Heute geht es um animierte, halbwegs realistisch hübpfende bunte Bälle mit Schatten: 1. Worum es geht… … im Schnelldurchlauf in diesem Video: 2. Das HTML: Weniger ist mehr Wir benötigen nur eine Bühne und Bälle. Die Doppelklassen der Bälle erklärt sich aus dem Wunsch nach aufgeräumtem Code. Die Klasse ball sorgt für das grundsätzliche Design, […]
Post-Its und Notizzettel
1. Worum gehts? Selten habe ich einen so dermaßen treffenden Beitragstitel geschrieben 🙂 Hier geht es also um die reine CSS-seitige Gestaltung von Post-Its und/oder Notizzetteln, die dann z.B. so aussehen können: Post-It Ein wenig Text … … und ein Link Notiz mit Pin Ein wenig Text … … und ein Link 2. Der Zettel Das Ganze gibts jetzt hier zum Nachbasteln, Schritt für Schritt. Beginnen wir mit dem […]
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 […]
CSS-Transitions
Ein erstes "reines CSS"-Beispiel – eine nette Spielerei: Los / Zurück Dieses Anwendungsbeispiel verwendet unprefixed transitions. Funktioniert nicht in Internet Explorer 9 (oder älter) und nicht in Oprea mini. Vgl. https://caniuse.com/#search=transitions Hier verwende ich übrigens eine unsichtbare Checkbox, die mit dem (als Button gestylte) Klick / Tap auf das Label de-/aktiviert wird. Die Pseudoklasse :checked dient dazu, um das Folgeelement ~ #carway .car zu animieren. Hier die Codes: HTML <div […]
: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 […]
Videowrapper
Die in der Überschrift angedeutete Anforderung kommt mir unter allem bei eingebetteten Videos unter. Daher bezieht sich das Beispiel auf diesen Anwendungsfall, lässt sich aber problemlos auf andere Anwendungen – z.B. im CMS/LMS hochgeladene Videos – übertragen. Problem: iframes mit fester Breite 🙁 Die "Teilen"-Funktion der gängigen Videoportale bietet auch immer die Möglichkeit an, die Videos in eine eigene Webseite einzubetten. Das ist toll, hat aber für den Designer einige […]
Sticky Footer
Den Anspruch "Footer immer unten" hat man vor allem, wenn man Seiten mit wenig Content hat. Konstruieren wir mal ein Beispiel. Ein gängiger Seitenaufbau nach dem Strickmuster "Header – Content – Footer" sieht ja oft in etwa so aus: HTML <html> <header> … </header> <section> … </section> <footer> … </footer> </html> Hier mal ein beispielhaftes Styling mit fixierter Kopfzeile: CSS body { font-family: Arial, sans-serif; margin:0; padding:0; background:#eee; } header […]