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   y   ú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. HTML CSS  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>  </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">  </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í

This story contains new, firsthand information uncovered by the writer.

Read My Stories

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Una breve introducción a la teoría del cerebro de Boltzmann

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Una breve introducción a la teoría del cerebro de Boltzmann

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps