HTML & CSS-Snippets
Alle Snippets für HTML & CSS — copy-&-paste-fertig, erklärt und aus der Praxis.
Slider und Karussell mit CSS scroll-snap – ohne Bibliothek
Ein wischbares Karussell, das sauber an jeder Karte einrastet, brauchst du nicht per JavaScript zu bauen. Mit scroll-snap sagst du dem Browser, wo der Scroll stehenbleiben soll – flüssig, mit Touch und Trackpad.
aspect-ratio in CSS – Seitenverhältnisse ohne Padding-Trick
Früher brauchte man den berüchtigten padding-top-Hack, um ein 16:9-Element zu bauen. Mit aspect-ratio geht das in einer Zeile – für Videos, Vorschaubilder und quadratische Kacheln, die beim Laden nicht springen.
Akkordeon & FAQ ohne JavaScript – <details> und <summary>
Aufklappbare Abschnitte brauchen kein JavaScript. Das HTML-Paar <details>/<summary> bringt das Auf- und Zuklappen von Haus aus mit – barrierefrei und tastaturbedienbar. Ich zeige das Markup, ein sauberes Styling und wie du eine echte Akkordeon-Gruppe baust.
Modale Dialoge ohne Framework – das native <dialog>-Element
Für ein Modal brauchst du kein Bibliotheks-Ballast und keine z-index-Schlacht. Das HTML-Element <dialog> bringt Overlay, Fokus-Falle und Schließen mit Escape von Haus aus mit. Ich zeige dir showModal(), ::backdrop und das saubere Schließen.
Container Queries – Komponenten, die auf ihren Platz reagieren, nicht auf den Bildschirm
Media Queries fragen die Bildschirmbreite ab. Container Queries fragen, wie breit der Container einer Komponente gerade ist – so passt sich eine Karte in der Sidebar anders an als dieselbe Karte im Hauptbereich. Endlich wirklich wiederverwendbare Bausteine.
Sanfte Übergänge in CSS – Hover-Effekte mit transition statt harter Sprünge
Ein guter Hover-Effekt springt nicht, er gleitet. Mit transition animierst du Farbe, Größe und Schatten weich – in einer Zeile. Ich zeige das Muster, warum du niemals transition: all nimmst und wie du Nutzer mit Bewegungsempfindlichkeit respektierst.
position: sticky – ein Header, der beim Scrollen oben kleben bleibt
Für einen mitfahrenden Header brauchst du kein JavaScript. Zwei CSS-Zeilen genügen mit position: sticky. Ich zeige das Muster, erkläre die eine Voraussetzung, die oft vergessen wird, und den häufigsten Grund, warum es „nicht klebt".
CSS-Variablen und Dark Mode – ein Theme, das sich selbst umschaltet
Mit CSS Custom Properties definierst du Farben an einer Stelle und nutzt sie überall. Der Clou: Für den Dark Mode überschreibst du nur die Variablen – nicht jede einzelne Regel. Ich zeige beides, inklusive automatischer System-Erkennung.
Etwas mittig zentrieren mit Flexbox – horizontal und vertikal in drei Zeilen
Das alte „wie zentriere ich einen Div vertikal?" ist mit Flexbox endgültig gelöst. Drei Zeilen genügen. Ich zeige dir das Grundmuster, den Unterschied zwischen justify-content und align-items und warum gap besser ist als margin.
Der Eltern-Selektor ist da – bedingtes Styling mit CSS :has()
Jahrelang gab es in CSS keinen Weg, ein Element abhängig von seinem Inhalt zu stylen. Mit :has() geht das endlich – ganz ohne JavaScript. Drei Beispiele, die ich ständig brauche.
Fluid Typography mit CSS clamp() – Schrift, die ohne Media Queries mitwächst
Statt an drei Breakpoints feste Schriftgrößen zu setzen, lässt du sie mit clamp() flüssig zwischen einem Minimum und Maximum skalieren. Eine Zeile CSS ersetzt einen Stapel Media Queries.
Responsives Karten-Grid ganz ohne Media Queries
Mit repeat(auto-fill, minmax()) baust du ein Grid, das die Spaltenzahl selbst an die Breite anpasst. Ein einziger Deklarationsblock ersetzt einen Stapel Media Queries.