Dezente 3D-Animationen haben was, finde ich 😀. Mit Hilfe von CSS sind diese auch relativ einfach und mit wenig Code machbar. Dennoch gibt es ein paar Kleinigkeiten, die es zu berücksichtigen gilt. Ich verwende in meinen Beispielen so gut es geht Tailwind und nur für die Spezialitäten klassisches CSS. Da Tailwind per heute keine speziellen […]
In CSS können mithilfe von Animation/Keyframes mittlerweile Animationen recht einfach erstellt werden. Sollen aber mehrere Animationen z. B. für unterschiedliche Elemente in Reihe geschaltet werden, kann dies relativ schnell komplex werden. Und hier kommt u. a. GSAP ins Spiel. Dabei handelt es sich um eine umfangreiche Bibliothek, die schon über 10 Jahre existiert und sogar Animationen im […]
Scroll-Snap ermöglicht es, dass wenn ein Container-Element, welches kleiner ist als die darin enthaltenen Elemente, an bestimmten Stellen beim Scrollen einrastet. Dieses Verhalten kennt man bspw. von Galerien oder Webseiten, die aus mehreren Blöcken bestehen, die untereinander angeordnet sind und jeweils bildschirmfüllend sind. Die Umsetzung ist einfach. Das Container-Element erhält die Eigenschaft „scroll-snap-type“. Eine weitere […]
Die CSS-Eigenschaft „position“ dürfte allen bekannt sein (static, fixed, relative und absolute). Relativ neu ist hier der Wert „sticky“. Mit diesem kann eingestellt werden, dass ein Element so lange sichtbar bleibt, wie der Container, in dem es sich befindet, sichtbar ist. Ein praktischer Anwendungsfall ist z. B. eine Tabelle, bei der die Überschriftenzeile so lange sichtbar […]
Mittlerweile unterstützen alle Browser (IE ist kein Browser 😉) CSS Variablen (werden auch Custom Properties genannt). Dass diese für einfache Werte verwendet werden können, dürfte allen, die damit arbeiten, klar sein. Der Blog-Post https://codersblock.com/blog/what-can-you-put-in-a-css-variable/ zeigt noch wesentlich mehr Anwendungsfälle toll aufbereitet. Folgende Themen werden u. a. behandelt: Lesen dringend empfohlen 🤘.
In den nächsten Beiträgen geht es um Webprogrammierung und dabei um Themen, die eventuell nicht allen bekannt sind. Als erstes habe ich mir das Thema Input mit integrierten Buttons ausgesucht. Wer sich den Code ansieht, stellt fest, dass es sich um einen kleinen Hack handelt. Der Button ist nicht Teil des Inputs, sondern steht neben […]
Im Web findet man Farben meistens als HEX-Wert wie z. B. #FFFFFF (schwarz) oder #FF0000 (rot). Dies ist nichts anderes, als eine alternative Schreibweise für RGB (rot, grün, blau), wobei die Werte als HEX der Zahlen von 0 bis 255 angegeben werden. Die ersten zwei Stellen stehen für rot, die nächsten zwei für Grün und die […]
Ich bin zwar Full-Stack-Entwickler, allerdings gefällt mir die Backend-Entwicklung wesentlich besser. Nichts desto trotz kenne ich mich in CSS relativ gut aus. Bei neuen Projekten macht es mir am Anfang meist sogar noch Spaß. Früher oder später kommt dann aber immer der Moment, an dem ich mich vor lauter CSS-Klassen und vor allem Hilfsklassen nicht […]
Ich bin ein großer Fan von CSS Flexbox und Grid. Allerdings gibt es ein paar Dinge, die ich mir nicht merken kann. Daher zur Abwechslung etwas CSS, in dem ich diese sowie ein paar Grundlagen zusammenfasse. Meine nachfolgenden Beispiele sind für Spalten. Das Ganze kann natürlich auch in der gleichen Logik für Zeilen gemacht werden. […]
