21 valiosos trechos de código HTML e CSS para desenvolvedores da Web

Os desenvolvedores da Web estão sempre procurando maneiras de melhorar seu fluxo de trabalho e facilitar suas vidas. Neste artigo, apresentaremos 21 trechos de código e úteis que podem ajudar a simplificar as tarefas diárias de desenvolvimento da web. Esses trechos de código são práticos, economizam tempo e podem ser facilmente personalizados para atender às suas necessidades. HTML CSS Descubra uma coleção de trechos de código práticos 1. Menu de navegação responsivo Um menu de navegação responsivo é essencial para uma experiência de usuário perfeita em diferentes dispositivos. Aqui está um trecho simples de HTML e CSS para criar um menu de navegação responsivo: 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. Redefinição de CSS A aplicação de uma redefinição de CSS pode ajudar a garantir que seu site tenha uma aparência consistente em diferentes navegadores. Aqui está um snippet de redefinição de CSS simples para começar: * { margin: 0; padding: 0; box-sizing: border-box; } 3. Centralize um elemento vertical e horizontalmente Use o Flexbox para centralizar facilmente um elemento vertical e horizontalmente em seu contêiner: .container { display: flex; justify-content: center; align-items: center; height: 100vh; } 4. Dica de CSS Crie uma dica de ferramenta simples usando apenas HTML e 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. Botões estilosos Adicione um toque especial aos seus botões com este simples trecho 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. Role suavemente para o topo Implemente um efeito de rolagem suave para navegar até o topo da sua página da 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. Galeria de imagens responsiva Crie uma galeria de imagens responsiva usando 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. Cabeçalho Fixo da Tabela Mantenha o cabeçalho da tabela fixo enquanto percorre o conteúdo da tabela: Header 1 Header 2 Header 3 .fixed-header { width: 100%; border-collapse: collapse; } .fixed-header thead { position: sticky; top: 0; background-color: #f1f1f1; } 9. Imagem de fundo em tela cheia Defina uma imagem de plano de fundo em tela cheia para sua página da web: body { background-image: url('background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; } 10. Rodapé Fixo Mantenha o rodapé na parte inferior da página mesmo quando não houver conteúdo suficiente para preencher a janela de visualização: Footer content .page-container { display: flex; flex-direction: column; min-height: 100vh; } .content-wrap { flex: 1; } footer { background-color: #f1f1f1; padding: 1rem; } 11. Layout do cartão Crie um layout de cartão moderno para exibir conteúdo usando o 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. Pão ralado Crie uma navegação de breadcrumb simples usando HTML e CSS: Home > Section 1 > Section 2 .breadcrumbs { padding: 1rem; } .breadcrumbs a { text-decoration: none; color: #3498db; } .breadcrumbs a:hover { text-decoration: underline; } 13. Acordeão Simples Crie um acordeão simples usando HTML e 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. Paginação Simples Crie uma navegação de paginação simples usando HTML e 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. Incorporação de vídeo responsivo Crie uma incorporação de vídeo responsiva usando HTML e 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. Carregador CSS Crie um carregador CSS simples para o seu site: .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. Efeito de rolagem parallax Adicione um efeito de rolagem paralaxe simples à sua página da 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. Sistema de Grade Flexbox Crie um sistema simples de grade Flexbox para o seu site: 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. Indicador de rolagem animado Crie um indicador de rolagem animado para mostrar aos usuários até onde eles rolaram: .progress-container { width: 100%; height: 8px; background-color: #f3f3f3; position: fixed; top: 0; } .progress-bar { height: 8px; background-color: #3498db; width: 0%; } 20. Efeitos de Filtro CSS Aplique efeitos de filtro CSS às suas imagens: .filter { filter: grayscale(100%); } 21. Integração do Google Fonts Integre o Google Fonts em seu site: body { font-family: 'Roboto', sans-serif; } Esses 21 trechos de código HTML e CSS úteis podem ajudá-lo a aprimorar seus projetos de desenvolvimento da Web e otimizar seu fluxo de trabalho. Mantenha-os à mão para facilitar a consulta e não hesite em modificá-los e adaptá-los para atender às suas necessidades específicas. Publicado também . aqui