21 valiosos fragmentos de código HTML y CSS para desarrolladores web

Los desarrolladores web siempre buscan formas de mejorar su flujo de trabajo y facilitarles la vida. En este artículo, presentaremos 21 fragmentos de código HTML y CSS útiles que pueden ayudar a agilizar las tareas diarias de desarrollo web. Estos fragmentos de código son prácticos, ahorran tiempo y se pueden personalizar fácilmente para satisfacer sus necesidades.

Descubra una colección de prácticos fragmentos de código

1. Menú de navegación sensible

Un menú de navegación receptivo es esencial para una experiencia de usuario perfecta en diferentes dispositivos. Aquí hay un fragmento simple de HTML y CSS para crear un menú de navegación receptivo:

 <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. Restablecimiento de CSS

Aplicar un restablecimiento de CSS puede ayudar a garantizar que su sitio web se vea consistente en diferentes navegadores. Aquí hay un fragmento de código de restablecimiento de CSS simple para comenzar:

 * { margin: 0; padding: 0; box-sizing: border-box; }

3. Centre un elemento vertical y horizontalmente

Use Flexbox para centrar fácilmente un elemento tanto vertical como horizontalmente dentro de su contenedor:

 .container { display: flex; justify-content: center; align-items: center; height: 100vh; }

4. Información sobre herramientas de CSS

Cree una información sobre herramientas simple usando solo HTML y 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. Botones con estilo

Agregue un poco de estilo a sus botones con este simple fragmento de 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. Desplazamiento suave hacia arriba

Implemente un efecto de desplazamiento suave para navegar a la parte superior de su página 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. Galería de imágenes receptivas

Cree una galería de imágenes receptiva usando 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. Encabezado de tabla fijo

Mantenga fijo el encabezado de la tabla mientras se desplaza por el contenido de la tabla:

 <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. Imagen de fondo de pantalla completa

Establezca una imagen de fondo de pantalla completa para su página web:

 body { background-image: url('background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; }

10. Pie de página fijo

Mantenga su pie de página en la parte inferior de la página incluso cuando no haya suficiente contenido para llenar la ventana gráfica:

 <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. Diseño de la tarjeta

Cree un diseño de tarjeta moderno para mostrar contenido usando 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. Pan rallado

Cree una navegación de migas de pan simple usando HTML y 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. Acordeón sencillo

Crea un acordeón simple usando HTML y 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. Paginación simple

Cree una navegación de paginación simple usando HTML y 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. Incrustación de video sensible

Cree una inserción de video receptiva usando HTML y 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. Cargador CSS

Cree un cargador de CSS simple para su sitio 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. Efecto de desplazamiento de paralaje

Agregue un efecto de desplazamiento de paralaje simple a su página 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. Sistema de rejilla Flexbox

Cree un sistema de cuadrícula Flexbox simple para su sitio 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. Indicador de desplazamiento animado

Cree un indicador de desplazamiento animado para mostrar a los usuarios cuánto se han desplazado:

 <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. Efectos de filtro CSS

Aplique efectos de filtro CSS a sus imágenes:

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

21. Integración de fuentes de Google

Integre Google Fonts en su sitio web:

 <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> body { font-family: 'Roboto', sans-serif; }

Estos 21 fragmentos de código HTML y CSS útiles pueden ayudarlo a mejorar sus proyectos de desarrollo web y optimizar su flujo de trabajo. Manténgalos a mano para una fácil referencia y no dude en modificarlos y adaptarlos para que se ajusten a sus necesidades específicas.

También publicado aquí .