CSS-Tricks
Carousel-Slider mit HTML und CSS (SCSS) Verwendbar in Gambio-Shops, WordPress-Webseiten, individuellen HTML-Webanwendungen etc. Ohne jQuery, ohne Javascript, ohne Plugin, ohne Frameworks, ohne Libraries Ein Carousel-Slider wird oft für Bilder, Posts oder Rezensionen verwendet. Dabei wechseln die Slides automatisch, zeitlich gesteuert, um alle Einträge anzuzeigen. Die Slides werden in diesem Beispiel links aus dem Fenster geschoben […]
Responsive Image-Slider mit HTML und CSS Der folgende Slider mit vier wechselnden Bildern ist mit HTML und CSS erstellt, ohne Javascript, jQuery, WordPress-Plugin, Bootstrap oder sonstigen Frameworks und Libraries. Image-Slider/Carousel mit HTML und CSS Entscheidend bei dieser Lösung ist die Korrelation zwischen Anzahl Slides, Animationsdauer und Start der Animationen. Der Slider funktioniert mit folgendem Code: […]
Icons aus einem Font listen Nicht immer sind die Namen der Icons in einem Font so gewählt, dass man direkt weiß, was sich dahinter versteckt. Deshalb habe ich mir ein kleines Programm geschrieben, das eine CSS-Datei mit den Icons als Input hat und diese im Browser mit Namen anzeigt. Beispiel: Icons im Theme Betheme für […]
CSS-Animationen mit keyframes mit Javascript starten Falls eine Animation nicht automatisch startet, kann mit ein paar Zeilen Javascript die Animation aktiviert werden, wenn das Element beim Scrollen sichtbar wird. Beispiel Here comes the text … HTML <div id=“id-of-element“>Here comes the text …</div> Javascript // Text animieren, wenn sichtbar function isInViewport(element) { const rect = element.getBoundingClientRect(); […]
Mit CSS Reihenfolge von Elementen ändern Eine Webseite soll auf allen Geräten optimal dargestellt werden. Daher ist es manchmal nötig, dass div-Elemente auf dem Desktop in einer anderen Reihenfolge angeordnet sein müssen als auf dem Tablet oder Smartphone. In diesem Beispiel werden in der Produktübersicht bei der Desktop-Darstellung die drei verschiedenen Produkte nebeneinander angezeigt. Zu […]