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í .
