21 précieux extraits de code HTML et CSS pour les développeurs Web

Les développeurs Web sont toujours à la recherche de moyens d'améliorer leur flux de travail et de se simplifier la vie. Dans cet article, nous présenterons 21 extraits de code et utiles qui peuvent aider à rationaliser les tâches de développement Web quotidiennes. Ces extraits de code sont pratiques, permettent de gagner du temps et peuvent être facilement personnalisés pour répondre à vos besoins. HTML CSS Découvrez une collection d'extraits de code pratiques 1. Menu de navigation réactif Un menu de navigation réactif est essentiel pour une expérience utilisateur transparente sur différents appareils. Voici un extrait HTML et CSS simple pour créer un menu de navigation réactif : Home About Services Contact .navbar { display: flex; justify-content: space-around; background-color: #333; padding: 1rem; } .navbar a { color: white; text-decoration: none; padding: 0.5rem; } .navbar a:hover { background-color: #ddd; color: black; } 2. Réinitialisation CSS L'application d'une réinitialisation CSS peut aider à garantir la cohérence de votre site Web sur différents navigateurs. Voici un simple extrait de réinitialisation CSS pour commencer : * { margin: 0; padding: 0; box-sizing: border-box; } 3. Centrer un élément verticalement et horizontalement Utilisez Flexbox pour centrer facilement un élément à la fois verticalement et horizontalement dans son conteneur : .container { display: flex; justify-content: center; align-items: center; height: 100vh; } 4. Info-bulle CSS Créez une info-bulle simple en utilisant uniquement HTML et CSS : Hover over me Tooltip text .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; padding: 5px; border-radius: 6px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } 5. Boutons élégants Ajoutez du style à vos boutons avec ce simple extrait CSS : .button { background-color: #4CAF50; border: none; color: white; text-align: center; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; padding: 10px 24px; border-radius: 8px; transition: background-color 0.3s; } .button:hover { background-color: #45a049; } 6. Défilement fluide vers le haut Implémentez un effet de défilement fluide pour naviguer vers le haut de votre page Web : Back to Top html { scroll-behavior: smooth; } .scroll-to-top { position: fixed; bottom: 20px; right: 20px; text-decoration: none; background-color: #4CAF50; color: white; padding: 10px 15px; border-radius: 8px; } 7. Galerie d'images réactive Créez une galerie d'images réactive à l'aide de CSS Grid : .image-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px; } .image-gallery img { width: 100%; height: auto; } 8. En-tête de tableau fixe Gardez l'en-tête du tableau fixe tout en faisant défiler le contenu du tableau : Header 1 Header 2 Header 3 .fixed-header { width: 100%; border-collapse: collapse; } .fixed-header thead { position: sticky; top: 0; background-color: #f1f1f1; } 9. Image d'arrière-plan plein écran Définissez une image d'arrière-plan plein écran pour votre page Web : body { background-image: url('background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; } 10. Pied de page collant Gardez votre pied de page en bas de la page même lorsqu'il n'y a pas assez de contenu pour remplir la fenêtre : Footer content .page-container { display: flex; flex-direction: column; min-height: 100vh; } .content-wrap { flex: 1; } footer { background-color: #f1f1f1; padding: 1rem; } 11. Disposition des cartes Créez une mise en page de carte moderne pour présenter le contenu à l'aide de Flexbox : Card Title Card description.

.card { display: flex; flex-direction: column; width: 300px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; } .card img { width: 100%; height: auto; } .card-content { padding: 1rem; } 12. Chapelure Créez une navigation fil d'Ariane simple en utilisant HTML et CSS : Home > Section 1 > Section 2 .breadcrumbs { padding: 1rem; } .breadcrumbs a { text-decoration: none; color: #3498db; } .breadcrumbs a:hover { text-decoration: underline; } 13. Accordéon simple Créez un accordéon simple en utilisant HTML et CSS : Section 1 Section 1 content.

Section 2 Section 2 content.

.accordion { cursor: pointer; width: 100%; text-align: left; outline: none; transition: 0.4s; } .panel { display: none; overflow: hidden; transition: max-height 0.2s; } 14. Mise en page simple Créez une navigation de pagination simple en utilisant HTML et CSS : « Prev 1 2 3 4 Next » .pagination { display: inline-block; padding: 1rem; } .pagination a { color: #3498db; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } .pagination a:hover { background-color: #f1f1f1; } .pagination a.active { background-color: #3498db; color: white; border: 1px solid #3498db; } 15. Intégration vidéo réactive Créez une vidéo intégrée réactive en utilisant HTML et CSS : .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 16. Chargeur CSS Créez un chargeur CSS simple pour votre site Web : .loader { border: 8px solid #f3f3f3; border-radius: 50%; border-top: 8px solid #3498db; width: 60px; height: 60px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 17. Effet de défilement de parallaxe Ajoutez un simple effet de défilement parallaxe à votre page Web : .parallax { background-image: url("your-image.jpg"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } 18. Système de grille Flexbox Créez un système de grille Flexbox simple pour votre site Web : Column 1 Column 2 Column 3 .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .col { flex: 1; padding-left: 15px; padding-right: 15px; } 19. Indicateur de défilement animé Créez un indicateur de défilement animé pour montrer aux utilisateurs jusqu'où ils ont fait défiler : .progress-container { width: 100%; height: 8px; background-color: #f3f3f3; position: fixed; top: 0; } .progress-bar { height: 8px; background-color: #3498db; width: 0%; } 20. Effets de filtre CSS Appliquez des effets de filtre CSS à vos images : .filter { filter: grayscale(100%); } 21. Intégration des polices Google Intégrez Google Fonts à votre site Web : body { font-family: 'Roboto', sans-serif; } Ces 21 extraits de code HTML et CSS utiles peuvent vous aider à améliorer vos projets de développement Web et à rationaliser votre flux de travail. Gardez-les à portée de main pour pouvoir les consulter facilement et n'hésitez pas à les modifier et à les adapter à vos besoins spécifiques. Également publié . ici