Code-Snippets
Finde die perfekte Komponente für dein nächstes Projekt.
Akkordeon (FAQ) nur mit CSS
Eine hochgradig barrierefreie Akkordeon-Komponente (FAQ), die ohne JavaScript und ausschließlich mithilfe der HTML-Elemente details/summary und CSS umgesetzt wurde.
FAQ-Akkordeon
Nur mit HTML5-Details/Zusammenfassungselement und CSS implementiert, kein JavaScript erforderlich. Ein zugängliches Akkordeon für FAQs mit sanften Öffnungs- und Schließanimationen.
Bild-Akkordeon
Ein Akkordeon, das beim Öffnen des Panels nicht nur Text, sondern auch ein schönes Hintergrundbild anzeigt.
überlappende Avatargruppen
Avatar-Benutzeroberfläche mit mehreren übereinander gestapelten Benutzersymbolen und einem Abzeichen, das anzeigt, wie viele Personen noch übrig sind.
Animierter Farbverlauf-Hintergrund
Ein ansprechender, nahtlos farbwechselnder Hintergrund mit Farbverlauf, der ausschließlich mit CSS umgesetzt wurde.
Animierter Mesh-Gradient
Hierbei handelt es sich um eine Hintergrundkomponente mit dynamischer Mesh-Abstufung, bei der sich Farben sanft ändern und vermischen und die nur mit CSS implementiert wird.
Aurora-Hintergrund
Ein fantastischer Hintergrundeffekt, der wie eine Aurora Borealis mit mehreren animierten ovalen Klecksen und Filtern fließt. Mit reinem CSS implementiert.
Partikelfeld-Hintergrund
Hintergrundeffekt, der mithilfe einer CSS-Animation schwebende Partikel erzeugt
Animierter Polkadot-Hintergrund
Dies ist eine Hintergrundkomponente, die CSS Radial-Gradient verwendet, um ein sauberes Tupfenmuster mit Animation zu zeichnen.
Pulsing Status Badge
Ein Abzeichen mit einer Wellenanimation (Pulse), die hervorhebt, dass Sie online sind oder Live-Streaming betreiben.
Cyberpunk-Button
Eine futuristische Schaltflächenkomponente mit Neoneffekten und Glitch-Animationen, die zu einem dunklen Thema großartig aussieht.
Gradient-Border-Button
Diese Schaltflächenkomponente verfügt über einen schönen rotierenden Verlaufsrahmen durch die Kombination von CSS „-webkit-mask-composite“ und animiertem Verlauf.
Liquid-Fill-Button
Ein Knopf, der sich von unten wellenförmig mit Flüssigkeit füllt, wenn man darüber schwebt
Magnetischer Button
Eine interaktive magnetische Tastenkomponente, die dem Mauszeiger sanft folgt, als ob er magnetisch angezogen würde.
Neumorphismus-Button
Ein rein mit CSS erstellter Button im Neumorphismus-Stil (Neumorphism), der durch eine dreidimensionale und weiche Optik besticht.
Shimmer-Button
Eine schöne Tastenkomponente, die beim Schweben und in regelmäßigen Abständen ein Lichtband (Schimmereffekt) aussendet.
3D-Flip-Card
Interaktive Kartenkomponente, die sich beim Schweben im 3D-Raum umdreht
Glass-Profilkarte
Eine elegante, durchscheinende Benutzerprofilkarte, die den Milchglaseffekt (Glasmorphismus) nutzt.
Glassmorphism-Card
Eine moderne und ästhetische Karten-UI-Komponente im Glassmorphism-Design, die Transparenz und Unschärfe-Effekte ähnlich wie bei Milchglas nutzt.
Neon-Glow-Karte
Hierbei handelt es sich um eine interaktive Karten-UI-Komponente, bei der der Rand der Karte beim Bewegen der Maus wie ein Neonlicht aufleuchtet und sich der Scheinwerfer je nach Mausposition bewegt.
Animierte Pricing-Karte
Eine moderne Preiskartenkomponente, die beim Bewegen des Mauszeigers hervorgehoben wird und über einen animierten Preisabschnitt verfügt.
Statistik-Counter-Karte
Hierbei handelt es sich um eine Statistikkartenkomponente, die sich ideal für Dashboards und Landingpages eignet, da die Zahlen beim Scrollen der Seite animiert werden und von Null an hochgezählt werden.
unendliches Festzeltkarussell
Eine Komponente, die es Logos und Karten ermöglicht, ohne Unterbrechung horizontal zu scrollen.
Mega-Fußzeilen-Layout
Große Fußzeile mit mehrspaltigen Links, Newsletter-Anmeldung und Social-Media-Symbolen.
Animierte Suchleiste
Eine minimalistische Suchleiste, die sich nahtlos erweitert, wenn Sie auf das Symbol klicken.
Benutzerdefinierter Toggle-Schalter
Ein Implementierungsbeispiel für einen ästhetisch animierten, benutzerdefinierten Toggle-Schalter, der die native HTML-Checkbox nahtlos ersetzt.
File-Upload-Dropzone
Moderner Datei-Upload-Bereich mit Drag-and-Drop-Unterstützung.
Floating-Label-Input
Ein modernes Eingabefeld mit einem Platzhalter, der beim Fokussieren nahtlos als Beschriftung eingeblendet wird.
OTP-Eingabefeld
Eine intuitive 6-stellige OTP-Eingabekomponente, die sich bei der Eingabe eines einzelnen Zeichens automatisch fokussiert und mit der Rücktaste zum vorherigen Feld zurückkehrt. Unterstützt auch Einfügen.
Passwort-Stärke-Anzeige
Eine Benutzeroberfläche, die die Stärke des eingegebenen Passworts visuell anzeigt.
Bento-Grid-Layout
Ein asymmetrisches, modernes Bento-Box-Rasterlayout, das für Funktionseinführungen und Dashboards beliebt ist.
Masonry-Layout
Wunderschönes unregelmäßiges Rasterlayout im Pinterest-Stil mit CSS-Spalten
Responsive CSS-Grid-Galerie
Eine elegante Methode zur Implementierung einer responsiven Bildergalerie mit auto-fit und minmax, ganz ohne Media Queries.
Sidebar mit Header
Das Grundlayout einer modernen Webanwendung mit einer festen Seitenleiste links und einer Kopfzeile oben. Ideal für Verwaltungsbildschirme und SaaS-Produkte.
Pure CSS Loading-Spinner
Ein moderner, eleganter Loading-Spinner, der gänzlich ohne Bilder oder JavaScript auskommt und nur mithilfe von conic-gradient und mask in CSS umgesetzt wurde.
Dots-Wave-Loader
Eine reine CSS-Animationsladekomponente, die kein JavaScript benötigt, mit 5 Wellenpunkten.
Glitch-Text-Loader
Ein Textladebildschirm mit einem Glitch-Effekt im Cyberpunk-Stil.
Progress-Bar-Loader
Dies ist eine Loader-Komponente, die mithilfe von reinem CSS drei Arten von Fortschrittsbalkenanimationen realisiert: Gradation, Stripe und Pulse.
Pulse-Ring-Loader
Ein Ladespinner mit Abstufung und Ringanimation, der sich wie Wellen ausbreitet.
Skeleton-Screen-Loader
Skelett-Benutzeroberfläche mit satten Schimmeranimationen, die beim Laden von Inhalten angezeigt werden
Glassmorphismus-Modal
Ein wunderschöner glasartiger modaler Dialog mit unscharfem Hintergrund.
Breadcrumb-Navigation
Moderne und schöne pfeilförmige Breadcrumb-Navigation
Floating-Dock-Navigation
macOS-ähnliche Floating-Dock-Navigation, bei der Symbole erweitert werden, wenn man mit der Maus darüber fährt.
Hamburger-Menü-Animation
Eine elegante und interaktive Implementierung eines Hamburger-Menüs, das sich beim Klicken nahtlos in ein Schließen-Symbol („X“) verwandelt.
Einklappbares Sidebar-Menü
Dies ist eine Seitenleistennavigation, die auf Dashboards usw. verwendet werden kann und auf einen reinen Symbolstatus reduziert werden kann.
Sticky Navbar
Eine klebrige Navigationsleistenkomponente, die mit einem Glasmorphismuseffekt einfriert und sich beim Scrollen in einen kompakten Stil ändert.
Feature-Karten-Bereich
Abschnitt zur Funktionseinführungskarte für SaaS/Landingpages. Eine Karten-UI-Komponente mit einem Abstufungsrahmen, der beim Bewegen der Maus sanft leuchtet.
Hero-Video-Hintergrund
Dies ist ein Heldenbereich, der ein sich wiederholendes Video im Hintergrund platziert, um ihm eine visuelle Wirkung zu verleihen.
Split-Hero-Bereich
Kräftige Typografie und visuelle Elemente sind in einen linken und einen rechten Abschnitt unterteilt, wobei ein Heldenabschnitt beim Laden eingeschoben wird.
Responsive Preistabelle mit Tailwind CSS
Ein modernes und responsives UI-Snippet für eine Preistabelle, ideal für SaaS-Plattformen. Ausschließlich mit Tailwind CSS umgesetzt.
Testimonial-Slider
Slider-Bereich zur Anzeige eines Karussells mit Benutzerbewertungen
Vertikaler Timeline-Bereich
Eine vertikale Zeitleiste, die die Phasen und den Verlauf eines Projekts darstellt.
Animierte Underline-Tabs
Tab-Navigation mit Unterstreichungsindikatoren, die aktiven Tabs reibungslos folgen.
Erfolgs-Toast-Benachrichtigung
Eine Popup-Toastbenachrichtigung, die den Benutzer über einen erfolgreichen Vorgang informiert.
Animierter magnetischer Tooltip
Ein raffinierter, einblendbarer animierter Tooltip, der der Bewegung des Cursors über das Element reibungslos folgt.
Kontextmenü
Benutzerdefiniertes Rechtsklick-Kontextmenü mit reichhaltigem Design
Pure CSS-Tooltip
Ein leichtgewichtiger, geschmeidiger Hover-Tooltip, der komplett ohne JavaScript und ausschließlich mit CSS realisiert wird.
Popover-Menü
Ein Popover-Menü, das beim Klicken (oder Fokussieren) geöffnet wird und eine Liste von Aktionen anzeigt, nicht beim Bewegen des Mauszeigers.