Schlagwort: html

CSS Schalter On / Off muss nicht hässlich sein
von

1. Worum es geht… Ich nutze den „Hidden Checkbox Hack“ und CSS, um iOS-like Kippschalter (Toggles, Switches) zu gestalten. Diese sehen am Ende so aus:   2. Das HTML Das HTML ist ein umwrappendes div, […]

Datum: September 2019
Kategorie: Onlinekram
Tags: , , , , ,

Animierte Slideshows ohne JavaScript
von

Ich finde CSS-Transitions und Animations ja ziemlich lustig 🙂 und wollte schon immer so eine Web-Slideshow basteln ohne irgend ein JavaScript basteln. Hier mal ein Beispiel: Slide01 Slide02 Slide03 Slide04 Slide05 Das war einfacher als […]

Datum: August 2018
Kategorie: Onlinekram
Tags: , ,

CSS: Hüpfende Bälle möglichst realsitisch animiert
von

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: Los gehts: 1. Das HTML: Weniger ist mehr […]

Datum: Januar 2018
Kategorie: Onlinekram
Tags: , ,

Post-Its und Notizzettel in CSS gestalten
von

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 … … […]

Datum: Januar 2018
Kategorie: Onlinekram
Tags: , ,

CSS-Transitions Teil 3: Beispiele mit JavaScript
von

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. Download: Rakete. […]

Datum: Januar 2016
Kategorie: Onlinekram
Tags: , , ,

CSS-Transitions Teil 2: Beispiele ohne JavaScript
von

Ein erstes „reines CSS“-Beispiel – eine nette Spielerei: Dieses Anwendungsbeispiel verwendet unprefixed transitions. Funktioniert nicht in Internet Explorer 9 (oder älter) und nicht in Oprea mini. Vgl. https://caniuse.com/#search=transitions Los / Zurück Hier verwende ich übrigens […]

Datum: Dezember 2015
Kategorie: Onlinekram
Tags: , ,

:hover-Effekte für Touchscreens? 'touch event'-Experimente mit JavaScript
von

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 […]

Datum: Dezember 2015
Kategorie: Onlinekram
Tags: , , ,

Videowrapper Box mit festem Seitenverhältnis bei variabler Breite
von

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 […]

Datum: August 2015
Kategorie: Onlinekram
Tags: , , ,

Sticky Footer Fußzeile unten anheften
von

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 […]

Datum: August 2015
Kategorie: Onlinekram
Tags: , ,