HTML / CSS / JavaScript

Tous les cas

Choisissez un cas complet, consultez directement le résultat, modifiez le code source et exécutez-le dans le navigateur.

1046Page 1 / 44
Affichage actuel de 24 cas
0001Composants de base et sélecteurs

CSS bouton dégradé

Un ensemble de boutons dégradés modernes avec effets lumineux, contour et retour au clic.

HTMLCSSBoutonDégradé
Ouvrir et exécuter
0002couches flottantes et retours d’état

Boîte de dialogue modale

Utiliser l’élément dialog natif pour créer une boîte de dialogue de confirmation accessible.

HTMLCSSJavaScriptDialog
Ouvrir et exécuter
0003Cartes, listes et organisation du contenu

Panneau repliable accordéon

Composant FAQ à accordéon avec prise en charge du clavier et déploiement fluide.

HTMLCSSJavaScriptAccessibilité
Ouvrir et exécuter
0004Animation et micro-interactions

Basculement d’onglets

Composant d’onglets avec navigation par touches fléchées et animation de changement de contenu.

HTMLCSSJavaScriptTabs
Ouvrir et exécuter
0005Tableaux et affichage des données

Tableau de données adaptatif

Liste de commandes qui bascule automatiquement entre tableaux sur ordinateur et cartes d’information sur mobile.

HTMLCSSResponsiveTableau
Ouvrir et exécuter
0006Cartes, listes et organisation du contenu

Chronologie verticale

Chronologie adaptative pour afficher l’avancement d’un projet et ses étapes clés.

HTMLCSSchronologiemise en page
Ouvrir et exécuter
0007Mise en page et adaptivité

Grille de cartes responsive

Construisez, avec CSS Grid, des cartes de voyage qui se réorganisent automatiquement.

HTMLCSSGridcartes
Ouvrir et exécuter
0008Navigation et menus

Menu de navigation déroulant

Navigation responsive pour le survol sur ordinateur et le clic sur mobile.

HTMLCSSJavaScriptNavigation
Ouvrir et exécuter
0009Animation et micro-interactions

Animation de chargement créative

Effet visuel de pulsation de rail et de progression de chargement réalisé entièrement avec CSS.

HTMLCSSAnimationLoading
Ouvrir et exécuter
0010Typographie et effets de texte

Animation de texte machine à écrire

Utilise l’animation de progression de CSS pour simuler l’apparition du texte caractère par caractère et le clignotement du curseur.

HTMLCSSAnimationTexte
Ouvrir et exécuter
0011Cartes, listes et organisation du contenu

3D carte à retourner

Carte d’information en relief utilisable à la souris, au tactile et au clavier.

HTMLCSS3Dcartes
Ouvrir et exécuter
0012Animation et micro-interactions

Animation du taiji tournant

Un motif yin-yang dessiné et animé uniquement à partir de formes CSS.

HTMLCSSAnimationTaiji
Ouvrir et exécuter
0013Mini-applications et mini-jeux

Compte à rebours d’activité

Minuteur avec réglage des minutes et prise en charge de la pause, de la reprise et de la réinitialisation.

HTMLCSSJavaScriptMinuteur
Ouvrir et exécuter
0014Mini-applications et mini-jeux

Calculatrice simple

Calculatrice arithmétique de base prenant en charge la saisie au clavier et les calculs successifs.

HTMLCSSJavaScriptCalculatrice
Ouvrir et exécuter
0015Cartes, listes et organisation du contenu

Recherche de liste en temps réel

Saisissez un mot-clé pour filtrer instantanément les villes et mettre en surbrillance les résultats correspondants.

HTMLCSSJavaScriptRecherche
Ouvrir et exécuter
0016Formulaires et saisie

Validation instantanée des formulaires

Formulaire d’inscription avec état en temps réel, messages d’erreur et retour de soumission.

HTMLCSSJavaScriptFormulaires
Ouvrir et exécuter
0017Effets visuels créatifs

Effet de chute de neige romantique

Scène de chute de neige en plein écran avec quantité de neige et direction du vent réglables, Canvas.

HTMLCanvasJavaScriptFlocons de neige
Ouvrir et exécuter
0018Effets visuels créatifs

Canvas effet de feu d’artifice

Effet de particules interactif qui fait éclore des feux d’artifice colorés dans le ciel nocturne au clic.

HTMLCanvasJavaScriptFeux d’artifice
Ouvrir et exécuter
0019Effets visuels créatifs

Horloge analogique

Un cadran mécanique raffiné qui tourne en temps réel selon l’heure locale.

HTMLCSSJavaScriptHorloge
Ouvrir et exécuter
0020Effets visuels créatifs

Effet de traînée de particules

Particules lumineuses colorées qui se déplacent en suivant le curseur de la souris ou le toucher.

HTMLCanvasJavaScriptParticule
Ouvrir et exécuter
0021Composants de base et sélecteurs

Sélecteur segmenté de salle de réunion

Réalisez un sélecteur segmenté dans un contexte de salle de réunion : contenu réel, contrôles interactifs, retours d’état clairs et mise en page multi-formats.

Composants de base et sélecteursSélecteur segmentéHTMLCSSJavaScript
Ouvrir et exécuter
0022Formulaires et saisie

Formulaire d’inscription des bénévoles avec validation en temps réel

Formulaire de validation en temps réel pour une inscription de bénévoles : contenu réaliste, contrôles utilisables, retour d’état clair et mise en page multi-tailles.

Formulaires et saisieFormulaire avec validation instantanéeHTMLCSSJavaScript
Ouvrir et exécuter
0023Navigation et menus

Menu principal réactif pour le guide du musée

Dans un contexte de guide de musée, utilisez un menu principal réactif : contenu réel, contrôles interactifs, retours d’état clairs et mise en page adaptative à différentes tailles.

Navigation et menusMenu principal responsiveHTMLCSSJavaScript
Ouvrir et exécuter
0024couches flottantes et retours d’état

Dialogue de confirmation de révision de document

Réalisez une boîte de dialogue de confirmation dans le contexte de relecture de documents : elle comprend du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à plusieurs tailles.

couches flottantes et retours d’étatBoîte de dialogue de confirmationHTMLCSSJavaScript
Ouvrir et exécuter