Extraits de Code
Trouvez le composant parfait pour votre prochain projet.
Accordéon (FAQ) 100% CSS
Un composant d'accordéon (FAQ) hautement accessible, conçu uniquement avec les éléments HTML details/summary et du CSS, sans la moindre ligne de JavaScript.
Accordéon FAQ
Implémenté avec uniquement des détails/éléments de résumé HTML5 et CSS, aucun JavaScript requis. Un accordéon accessible pour les FAQ avec des animations d'ouverture et de fermeture fluides.
Accordéon d'images
Un accordéon qui affiche non seulement du texte mais aussi une belle image de fond lorsque vous ouvrez le panneau.
groupes d'avatars qui se chevauchent
Interface utilisateur d'avatar avec plusieurs icônes d'utilisateur empilées les unes sur les autres et un badge indiquant le nombre de personnes restantes.
Arrière-plan dégradé animé
Un superbe arrière-plan dégradé aux transitions de couleurs fluides, conçu exclusivement en CSS.
Mesh Gradient animé
Il s'agit d'un composant d'arrière-plan de gradation de maillage dynamique où les couleurs changent et s'entremêlent en douceur, implémenté en utilisant uniquement CSS.
Background Aurora
Un effet d'arrière-plan fantastique qui coule comme une aurore boréale avec plusieurs blobs et filtres ovales animés. Implémenté avec du CSS pur.
Background de particules
Effet d'arrière-plan qui génère des particules flottantes à l'aide d'une animation CSS
Background à pois animés
Il s'agit d'un composant d'arrière-plan qui utilise un dégradé radial CSS pour dessiner un motif à pois propre avec animation.
Pulsing Status Badge
Un badge avec une animation ondulée (Pulse) qui souligne que vous êtes en ligne ou en direct.
Bouton Cyberpunk
Un composant de bouton futuriste avec des effets néon et une animation glitch qui convient parfaitement à un thème sombre.
Bouton à bordure dégradée
Ce composant de bouton a une belle bordure de dégradé rotatif en combinant CSS `-webkit-mask-composite` et un dégradé animé.
Bouton Liquid Fill
Un bouton qui se remplit de liquide par vagues depuis le bas lorsqu'il est survolé
Bouton magnétique
Un composant de bouton magnétique interactif qui suit en douceur le curseur de la souris comme s'il était attiré magnétiquement.
Bouton Neumorphism
Un bouton au design Neumorphism offrant une texture douce et tridimensionnelle, conçu entièrement en CSS.
Bouton Shimmer
Un magnifique composant de bouton qui émet une bande de lumière (effet chatoyant) en survol et périodiquement.
Carte Flip 3D
Composant de carte interactif qui se retourne dans l'espace 3D au survol
Carte de profil Glass
Une carte de profil utilisateur élégante et translucide qui utilise l'effet verre dépoli (glassmorphisme).
Carte Glassmorphism
Un composant de carte moderne au design Glassmorphism, utilisant des effets de transparence et de flou pour un rendu semblable à du verre dépoli.
Carte Neon Glow
Il s'agit d'un composant d'interface utilisateur de carte interactive dans lequel le bord de la carte s'allume comme un néon lorsqu'il est survolé et le projecteur se déplace en fonction de la position de la souris.
Carte de prix animée
Un composant de carte de tarification moderne qui est mis en évidence au survol et comporte une section de tarification animée.
Carte compteur de stats
Il s'agit d'un composant de carte de statistiques idéal pour les tableaux de bord et les pages de destination, car les nombres s'animent et comptent à partir de zéro au fur et à mesure que la page défile.
carrousel de chapiteau infini
Un composant qui permet aux logos et aux cartes de défiler horizontalement sans interruption.
disposition du méga pied de page
Grand pied de page avec liens multi-colonnes, inscription à la newsletter et icônes de réseaux sociaux.
Barre de recherche animée
Une barre de recherche minimaliste qui se développe facilement lorsque vous cliquez sur l'icône.
Interrupteur à bascule personnalisé
Exemple d'implémentation d'un interrupteur à bascule (toggle switch) personnalisé et superbement animé, en remplacement de la case à cocher native.
Dropzone d'upload
Zone de téléchargement de fichiers moderne avec prise en charge du glisser-déposer.
Input à label flottant
Un champ de saisie moderne avec un espace réservé qui apparaît en douceur sous forme d'étiquette lorsqu'il est mis au point.
Formulaire multi-étapes
Interface utilisateur qui bascule entre plusieurs étapes (avec indicateur de progression), souvent utilisée sur les écrans d'inscription, etc.
Input OTP
Un composant de saisie OTP intuitif à 6 chiffres qui se met automatiquement au point lorsque vous saisissez un seul caractère et revient à la case précédente avec retour arrière. Prend également en charge la pâte.
Indicateur de force de mot de passe
Une interface utilisateur qui affiche visuellement la force du mot de passe saisi.
Layout Bento Grid
Une disposition en grille de boîte à bento asymétrique et moderne, populaire pour les introductions de fonctionnalités et les tableaux de bord.
Layout Masonry
Belle disposition de grille irrégulière de style Pinterest utilisant des colonnes CSS
Galerie CSS Grid Réactive
Comment implémenter une galerie d'images réactive grâce à auto-fit et minmax, sans avoir recours aux requêtes multimédias.
Sidebar avec Header
La présentation de base d'une application Web moderne avec une barre latérale fixe à gauche et un en-tête en haut. Idéal pour les écrans de gestion et les produits SaaS.
Spinner de chargement pur CSS
Un indicateur de chargement (spinner) moderne et élégant, conçu avec conic-gradient et mask en CSS, sans recourir ni aux images ni à JavaScript.
Loader Dots Wave
Un composant de chargement d'animation CSS pur qui ne nécessite aucun JavaScript, avec 5 points ondulés.
Loader de texte Glitch
Un écran de chargement de texte avec un effet glitch de style cyberpunk.
Loader barre de progression
Il s'agit d'un composant de chargement qui réalise trois types d'animations de barre de progression : gradation, bande et impulsion en utilisant du CSS pur.
Loader Pulse Ring
Un spinner de chargement avec gradation et animation en anneau qui se propage comme des ondulations.
Skeleton Loader
Interface utilisateur squelette avec de riches animations chatoyantes affichées pendant le chargement du contenu
Modale Glassmorphism
Une belle boîte de dialogue modale en forme de verre avec un arrière-plan flou.
Breadcrumb
Fil d'Ariane moderne et magnifique en forme de flèche
Dock de navigation flottant
Navigation par dock flottant de type macOS où les icônes se développent lorsqu'elles sont survolées.
Menu hamburger animé
Un menu hamburger interactif doté d'une animation fluide se transformant élégamment en croix (« X ») lors du clic.
Sidebar rétractable
Il s'agit d'une barre de navigation latérale qui peut être utilisée sur les tableaux de bord, etc., et qui peut être réduite à un état composé uniquement d'icônes.
Navbar Sticky
Un composant de barre de navigation collant qui se fige avec un effet de morphisme de verre et prend un style compact lorsque vous faites défiler.
Section de cartes de fonctionnalités
Section de la carte d'introduction aux fonctionnalités pour les pages SaaS/de destination. Un composant d'interface utilisateur de carte avec une bordure de gradation qui brille doucement lorsqu'elle est survolée.
Hero avec vidéo en background
Il s'agit d'une section héros qui place une vidéo en boucle en arrière-plan pour lui donner un impact visuel.
Hero Split
La typographie audacieuse et les visuels sont divisés en sections gauche et droite, avec une section héros qui se glisse au chargement.
Tableau de tarification réactif en Tailwind CSS
Un modèle de tableau de tarification moderne et entièrement réactif, idéal pour les plateformes SaaS. Conçu exclusivement avec Tailwind CSS.
Slider de témoignages
Section slider pour afficher un carrousel d'avis d'utilisateurs
Timeline verticale
Une chronologie verticale qui représente les phases et l'historique d'un projet.
Onglets avec underline animé
Navigation par onglets avec indicateurs de soulignement qui suivent en douceur les onglets actifs.
Toast de succès
Une notification toast contextuelle informant l'utilisateur d'une opération réussie.
Tooltip magnétique animé
Une info-bulle animée en fondu sophistiqué qui suit en douceur le mouvement du curseur sur l'élément.
Menu contextuel
Menu contextuel personnalisé par clic droit avec un design riche
Infobulle pure CSS
Une infobulle (tooltip) légère et fluide s'affichant au survol, conçue exclusivement en CSS, sans aucun JavaScript.
Menu Popover
Un menu contextuel qui s'ouvre au clic (ou au focus) et affiche une liste d'actions, plutôt qu'au survol.