Accordéon / Collapse
Question 1 : Qu'est-ce que HTML ?
HTML (HyperText Markup Language) est le langage de balisage standard pour créer des pages web. Il structure le contenu et définit sa signification sémantique.
Question 2 : Qu'est-ce que CSS ?
CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour décrire la présentation d'un document écrit en HTML.
Question 3 : Peut-on créer des composants sans JavaScript ?
Oui ! Cette page démontre de nombreux composants UX fonctionnels créés uniquement avec HTML et CSS.
Onglets (Tabs)
Profil utilisateur
Informations sur votre profil, photo, biographie et statistiques.
Paramètres
Configurez vos préférences, notifications et options de confidentialité.
Messages
Consultez vos messages, conversations et notifications.
Toggle Switch
Tooltips
Survolez les HTML et CSS pour voir les tooltips.
Cette technique utilise des pseudo-éléments et l'attribut data-*.
Progress Bar
Progression du projet
Téléchargement
Rating (Étoiles)
Survolez et cliquez sur les étoiles
Cards avec effets
Card 1
Effet hover avec élévation
Card 2
Animation au survol
Card 3
Transform CSS
Flip Card (survolez)
Loading & Skeleton
Spinner
Skeleton Loading
Alerts
Pricing Table
Gratuit
Par mois
- ✓ 5 projets
- ✓ 1 Go stockage
- ✓ Support email
Pro
Par mois
- ✓ Projets illimités
- ✓ 100 Go stockage
- ✓ Support prioritaire
- ✓ API access
Entreprise
Par mois
- ✓ Tout Pro +
- ✓ Stockage illimité
- ✓ Support 24/7
- ✓ Intégrations
Search Expandable
Cliquez dans le champ de recherche pour le voir s'étendre
Modal avec :target
Off-Canvas Menu
Autres pages spécialisées
Certains composants nécessitent des pages dédiées pour une meilleure démonstration :
- Carrousel/Slider - nécessite scroll-snap et navigation par ancres
- Lightbox - galerie d'images avec agrandissement
- Multi-step Form - formulaire en plusieurs étapes
- Image Comparison - slider avant/après
- Scroll Snap Gallery - galerie avec défilement magnétique
Voulez-vous que je crée ces pages spécialisées ?