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 HTML et CSS 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.

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 :

 <nav class="navbar"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#contact">Contact</a> </nav> .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 :

 <span class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </span> .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 :

 <a href="#top" class="scroll-to-top">Back to Top</a> 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 :

 <div class="image-gallery"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> .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 :

 <table class="fixed-header"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <!-- Table Content --> </tbody> </table> .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 :

 <div class="page-container"> <div class="content-wrap"> <!-- Your main content here --> </div> <footer>Footer content</footer> </div> .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 :

 <div class="card"> <img src="image.jpg" alt="Card image"> <div class="card-content"> <h3>Card Title</h3> <p>Card description.</p> </div> </div> .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 :

 <nav class="breadcrumbs"> <a href="#home">Home</a> > <a href="#section1">Section 1</a> > <a href="#section2">Section 2</a> </nav> .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 :

 <button class="accordion">Section 1</button> <div class="panel"> <p>Section 1 content.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Section 2 content.</p> </div> .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 :

 <nav class="pagination"><a href="#prev">« Prev</a> <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#next">Next »</a> </nav> .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 :

 <div class="video-container"> <iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allowfullscreen></iframe> </div> .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 :

 <div class="loader"></div> .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 :

 <div class="parallax"></div> .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 :

 <div class="row"> <div class="col">Column 1</div> <div class="col">Column 2</div><div class="col">Column 3</div> </div> .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 :

 <div class="progress-container"> <div class="progress-bar"></div> </div> .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 :

 <img src="your-image.jpg" alt="Your Image" class="filter"> .filter { filter: grayscale(100%); }

21. Intégration des polices Google

Intégrez Google Fonts à votre site Web :

 <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> 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 .