Tier List das últimas melhores features de CSS: o que realmente vale a pena usar
Tier List: ranking das novas features CSS 2024. Avaliação crítica de :has(), container queries, cascade layers e outras novidades. Descubra as melhores!
Ler artigoCSS
115 posts
Layouts com CSS Grid e minmax()
Crie layouts responsivos inteligentes com CSS Grid e minmax(). Função poderosa para tracks flexíveis com tamanhos dinâmicos. Domine Grid agora!
Ler artigoEstilização de formulários com CSS puro (avançado)
Estilize formulários HTML com CSS puro de forma avançada e profissional. Técnicas e seletores pouco conhecidos para forms modernos. Sem JavaScript!
Ler artigo10 dicas para melhores animações e transições CSS
Aprenda 10 técnicas essenciais para criar animações e transições CSS fluidas e profissionais. Descubra como melhorar dramaticamente a UX do seu site!
Ler artigoCSS Condicional com :has e :nth-last-child
Aprenda CSS condicional com :has e :nth-last-child avançados. Crie layouts dinâmicos baseados no número de elementos sem JavaScript. Técnica poderosa!
Ler artigoComo selecionar irmãos anteriores com CSS usando :has()
Seletor de irmão anterior com :has() em CSS puro. Nova pseudo-classe revolucionária para estilos baseados em descendentes e contexto. Use agora!
Ler artigoCSS Logical Properties
Domine CSS Logical Properties para layouts inclusivos e multilíngues. Crie interfaces que se adaptam automaticamente a diferentes idiomas e preferências.
Ler artigoCSS Style Queries
Style Queries CSS: consultas baseadas em estilos de componentes. Próxima evolução após Container Queries para componentes ainda mais inteligentes. Futuro!
Ler artigoCSS min-content, max-content e fit-content
Entenda min-content, max-content e fit-content em CSS completamente. Guia completo sobre dimensionamento intrínseco para layouts flexíveis e responsivos!
Ler artigoGuia de unidades CSS para espaçamento
Guia completo de unidades CSS para espaçamento profissional. Domine px, em, rem, vw, vh, % e outras unidades para criar layouts precisos. Aprenda!
Ler artigoComo fazer code review de CSS
Guia prático para code review de CSS profissional. 6 critérios essenciais: estilo, cross-browser, especificidade, pré-processadores e performance. Revise!
Ler artigoCSS Shorthands: Dica de Ouro
Cuidado com CSS shorthands! Descubra o perigo oculto das propriedades abreviadas e como usá-las corretamente sem prejudicar código. Dica de ouro!
Ler artigo5 dicas para melhorar a performance CSS
Otimize o desempenho do seu CSS com 5 técnicas comprovadas. Aprenda minificação, compressão, CSS crítico e remoção de código não utilizado. Acelere!
Ler artigoAcessibilidade e CSS
Crie layouts acessíveis com CSS moderno. Aprenda técnicas essenciais de visibilidade de foco, contraste de cores e design inclusivo conforme WCAG.
Ler artigoprefers-reduced-data: como funciona a nova media query
Prefers-reduced-data: economize dados do usuário com CSS. Media query nativa para detectar preferência por menor consumo de dados móveis. Respeite!
Ler artigoAs novas viewports: Large, Small e Dynamic
Descubra as novas viewports CSS: Large, Small e Dynamic. Unidades lvh/svh/dvh para resolver problemas com barras móveis flutuantes. Use agora!
Ler artigoO novo web design responsivo
Descubra o novo web design responsivo: além de breakpoints. Container queries, component-driven e abordagens modernas de RWD. Atualize-se agora!
Ler artigoTailwind CSS: adiciona complexidade; não faz nada
Tailwind CSS: framework utility-first revolucionário. Domine classes utilitárias, customização avançada e desenvolvimento rápido com Tailwind. Use agora!
Ler artigoDark Mode com variáveis de luminosidade invertida
Técnica avançada de dark mode usando variáveis de luminosidade invertida. Implemente modo escuro com LCH e variáveis CSS de forma inovadora.
Ler artigoComo melhorar a legibilidade de textos na Web
Como melhorar significativamente legibilidade de textos na web. Tipografia adequada, contraste, espaçamento e técnicas para leitura confortável. Melhore!
Ler artigoCSS mask-image: mascaramento CSS nativo
Aprenda CSS mask-image para criar efeitos visuais incríveis e únicos. Tutorial completo de mascaramento nativo com imagens, SVG e gradientes CSS. Domine!
Ler artigoComo encontrar o elemento-pai relativo mais próximo
Descubra como encontrar o elemento-pai relativo mais próximo usando offsetParent e DevTools. Resolva problemas complexos de posicionamento CSS. Debugue melhor!
Ler artigoO que é possível colocar em uma variável CSS?
Descubra o que é possível colocar em variáveis CSS. Valores aceitos, limitações de custom properties e casos de uso práticos. Aprenda agora!
Ler artigoTécnicas CSS para elementos de cobertura
Técnicas CSS essenciais para elementos de cobertura (overlay). Aprenda a sobrepor elementos com position, z-index, classes utilitárias e melhores práticas!
Ler artigo10 dicas para manter a Especificidade CSS baixa
10 dicas práticas para manter especificidade CSS baixa. Evite guerra de seletores e facilite manutenção com boas práticas de arquitetura CSS. Aprenda!
Ler artigoNavegação âncora e smooth scroll com CSS puro
Implemente navegação âncora com smooth scroll usando apenas CSS puro. Aprenda scroll-behavior nativo sem JavaScript para rolagem suave perfeita. Veja como!
Ler artigoTira-dúvidas sobre BEM
Esclareça suas dúvidas sobre a metodologia CSS BEM. Live completa com explicações práticas, benefícios e aplicação da convenção mais popular do mundo.
Ler artigoO conceito mais importante de CSS
Descubra a Cascata, o conceito mais importante do CSS. Entenda especificidade de seletores e ordem de aplicação dos estilos para dominar CSS. Essencial!
Ler artigoCSS acessível
Aprenda técnicas de CSS acessível (a11y) para todos os usuários. Descubra como separar conteúdo e apresentação, evitar armadilhas e criar estilos inclusivos!
Ler artigo9 regras básicas de Web Design Responsivo
Aprenda as 9 regras básicas de Web Design Responsivo para criar sites que funcionam perfeitamente em qualquer dispositivo. Guia prático e direto ao ponto.
Ler artigo16 dicas de Sass para facilitar sua vida (parte 2)
Domine Sass com 8 dicas avançadas: argumentos variáveis, mixins inteligentes, operações e arquitetura de estilos. Facilite sua vida no front-end!
Ler artigoDark Mode com CSS: o jeito mais fácil
Implemente dark mode com CSS de forma simples e eficiente. Técnica prática para adicionar modo escuro responsivo às preferências do usuário.
Ler artigo@property: variáveis CSS com superpoderes
@property CSS: propriedades customizadas tipadas e poderosas. Nova feature revolucionária para custom properties com tipos, valores iniciais e herança. Use!
Ler artigoCUBE CSS: uma nova metodologia CSS
Conheça CUBE CSS, metodologia que trabalha com o navegador, não contra ele. Simplicidade, pragmatismo e escalabilidade para projetos de qualquer tamanho.
Ler artigoBEM: guia definitivo do padrão CSS mais famoso
Guia completo da metodologia BEM (Block Element Modifier). Aprenda a convenção CSS do Yandex com exemplos práticos, vantagens e melhores práticas.
Ler artigoBarra de progresso circular com CSS
Crie barras de progresso circular impressionantes com CSS puro e Sass. Técnica diferenciada usando linear-gradient para 100 níveis de preenchimento radial!
Ler artigoComo fazer menu dropdown com CSS puro
Crie menu dropdown com CSS puro sem JavaScript. Técnica acessível usando :hover e :focus para menus suspensos nativos e responsivos. Aprenda!
Ler artigoTextos responsivos com CSS clamp()
Crie textos responsivos com CSS clamp(). Tipografia fluida que escala suavemente entre tamanhos mínimos e máximos sem media queries. Aprenda!
Ler artigoOs benefícios de performance de animações CSS
CSS ou JavaScript para animações web? Descubra métricas de performance reais, técnicas de otimização e por que transform supera position absolute. Compare!
Ler artigoMelhor forma para listas com caption?
Listas HTML com caption e label para melhor acessibilidade. Técnicas semânticas avançadas para descrições e legendas em listas. Melhore HTML!
Ler artigoBordas personalizadas responsivas com CSS background-repeat
Crie bordas personalizadas e responsivas com CSS puro facilmente. Técnica surpreendente usando background-repeat: space e round para efeitos únicos. Incrível!
Ler artigoComo fazer menu off canvas da maneira mais fácil
Aprenda a criar menu off-canvas da maneira mais fácil. Navegação lateral responsiva que desliza da lateral para mobile. Técnica e código completo!
Ler artigoO básico sobre Media Queries
Media queries CSS: guia completo de responsive web design. Breakpoints inteligentes, sintaxe e estratégias práticas para layouts adaptativos. Domine RWD!
Ler artigoAnimação de loading com CSS puro
Crie animações de loading leves e performáticas com CSS puro facilmente. Elimine gifs pesados e melhore performance sem bibliotecas JavaScript. Otimize!
Ler artigoO básico de Sass para se virar nas webs
Domine o básico de Sass para se virar nas webs. Aprenda variáveis, nesting, mixins e organização para escrever CSS profissional. Comece agora!
Ler artigoIntrodução a Animações CSS
Domine os fundamentos de animações CSS do zero. Aprenda keyframes, propriedades animation-* e easings para criar experiências visuais impactantes. Anime!
Ler artigoCores e variáveis CSS: box-shadow-color?!
Cores e variáveis CSS: box-shadow-color existe de verdade?! Técnicas avançadas para sombras e cores dinâmicas com custom properties CSS. Truque incrível!
Ler artigoSlanted shapes (formas diagonais) com CSS
Slanted Shapes: crie formas diagonais em CSS. Técnicas criativas para backgrounds, seções e layouts com ângulos inclinados impressionantes. Domine!
Ler artigo6 vantagens em usar BEM ao escrever CSS
Organize e escale seu CSS com metodologia BEM profissionalmente. Descubra 6 vantagens: nomes de classes compreensíveis, consistentes e fáceis de manter!
Ler artigoSource Maps em produção?
Source maps em produção: devo usar ou não? Analise vantagens de debug facilitado vs riscos reais de exposição de código-fonte. Tome decisão informada agora!
Ler artigoO macete para unidades de viewport em mobile
Descubra o macete para unidades viewport (vh/vw) em mobile. Solução definitiva para problemas com barras de navegação em iOS e Android. Funciona!
Ler artigoVocê deve saber isso sobre unidades de viewport
Você deve saber isso sobre unidades viewport. Comportamentos inesperados, bugs mobile comuns e soluções práticas para vh, vw. Evite problemas!
Ler artigoCSS element()
Descubra a função CSS element() que renderiza qualquer parte de um site como imagem ao vivo. Crie efeitos avançados com reflexos e dobras 3D.
Ler artigodpw expo #36 - React Bolt, Butter Cake, Browserhacks
Explore React Bolt, Butter Cake e Browserhacks no dpw expo. Componentes React ultra rápidos, CMS headless moderno e hacks de navegadores. Descubra!
Ler artigoVulnerabilidades de segurança CSS
Descubra vulnerabilidades de segurança CSS. Ataques via estilos, exfiltração de dados e técnicas para proteger suas aplicações web. Proteja-se!
Ler artigo4 Layouts mais comuns com CSS Grid
Aprenda 4 layouts comuns e essenciais com CSS Grid. Veja exemplos práticos de galerias, grids de artigos e designs bidimensionais responsivos. Domine Grid!
Ler artigo9 dicas básicas de web design responsivo
Domine os fundamentos do design responsivo. Aprenda mobile first, viewports, media queries e crie layouts robustos para todos os dispositivos.
Ler artigoCSS Grid intrinsecamente responsiva com minmax() e min()
CSS Grid intrinsecamente responsiva: layouts que se adaptam sozinhos. Domine minmax(), min() e técnicas para grids sem media queries. Revolucionário!
Ler artigodpw expo #31 - Page Transitions, Hopscotch, Agile CSS Framework
Explore Page Transitions, Hopscotch e Agile CSS no dpw expo. Transições suaves entre páginas, tours guiados interativos e framework CSS leve. Teste!
Ler artigodpw expo #30 - collectorium, perfundo, npkill
Explore Collectorium, Perfundo e npkill no dpw expo. Biblioteca de padrões UI, lightbox minimalista elegante e limpeza de node_modules pesados!
Ler artigoCSS e o Contexto de Formatação de Bloco (Block Formatting Context)
Entenda Block Formatting Context (BFC) em CSS profundamente: como controlar floats, margin collapsing e criar layouts mais previsíveis e eficientes. Domine!
Ler artigodpw expo #28 - simplePARALLAX, Gitfolio, CSS Border Animations
Explore simpleParallax, Gitfolio e CSS Border Animations no dpw expo. Parallax ultra fácil, portfólio automático do GitHub e bordas animadas. Teste!
Ler artigohack flex-grow 9999: o hack de Flexbox que você precisa conhecer
Hack Flexbox com flex-grow: 9999 para layouts super inteligentes. Técnica avançada para quebra de linha automática sem media queries. Truque incrível!
Ler artigoCSS Grid: o jeito certo
Aprenda CSS Grid do jeito certo desde o início absoluto. Fundamentos sólidos, conceitos essenciais e práticas corretas para dominar layouts modernos. Comece!
Ler artigodpw expo #24 - Animista, Static Site Boilerplate, Humanize Duration
Explore Animista, Static Site Boilerplate e Humanize Duration no dpw expo. Gerador de animações CSS, starter kit moderno e formatação de tempo. Experimente!
Ler artigoA mentalidade CSS
Desenvolva a mentalidade CSS correta para profissionais. Paradigmas, arquitetura e forma de pensar para escrever CSS escalável e manutenível. Evolua!
Ler artigodpw expo #21 - freezeframe.js, Spotlight.js, Microjs
Explore Freezeframe.js, Spotlight.js e Microjs no dpw expo. Controle inteligente de GIFs, galeria de imagens overlay e catálogo de micro-frameworks. Veja!
Ler artigoComo criar templates com CSS Grid
Crie templates poderosos com CSS Grid facilmente. Guia prático sobre grid-template-areas, linhas nomeadas e layouts profissionais semânticos. Domine Grid!
Ler artigodpw expo #20 - Transfonter, Specificity Calculator, ms
Explore Transfonter, Specificity Calculator e ms no dpw expo. Conversor de fontes webfont, calculadora de especificidade CSS e parser de tempo. Útil!
Ler artigofont-display: controle de exibição de fontes para ajuste em performance
Font-display: otimize carregamento de fontes web drasticamente. Controle exibição durante download e melhore performance com swap, fallback e optional. Use!
Ler artigoFlexbox: como passar para a próxima linha fácil
Aprenda como quebrar para próxima linha em Flexbox. Técnicas e truques práticos para controlar wrapping e quebras de elementos flex. Domine!
Ler artigoComo detectar touch com CSS puro
Aprenda a detectar dispositivos touch com CSS puro usando Interaction Media Features. Hover e pointer para suporte a diferentes tipos de entrada. Detecte!
Ler artigoPlanejamento com imagens responsivas
Planejamento de imagens responsivas: estratégias completas e boas práticas. Otimize performance, UX e carregamento ideal para diferentes dispositivos. Planeje!
Ler artigoVariáveis CSS são melhores que loops de Sass?
Variáveis CSS são melhores que loops de Sass? Compare custom properties com preprocessadores para geração dinâmica de estilos. Veja exemplos!
Ler artigoJumps: o novo steps() em Web Animation
Domine steps e jumps em animações CSS para efeitos únicos. Crie animações frame-by-frame incríveis e efeitos escalonados com timing functions discretas. Anime!
Ler artigoCombinação de seletores CSS
Domine combinações de seletores CSS para regras mais eficazes. Aprenda descendentes, filhos diretos, irmãos adjacentes e seletores compostos.
Ler artigoVariáveis CSS: um guia prático
Variáveis CSS: guia prático completo para iniciantes. Custom properties, escopo, fallbacks e cases de uso para CSS moderno e manutenível. Domine agora!
Ler artigoHifenização de CSS (CSS hyphenation) em 2019
Hifenização (hyphenation) em CSS para textos justificados e responsivos. Use hyphens para quebras de linha naturais e legibilidade aprimorada. Melhore textos!
Ler artigoComo encontrar CSS morto e otimizar estilos
Técnica simples para identificar e remover CSS morto em produção. Descubra como otimizar estilos e melhorar performance eliminando código legado. Limpe!
Ler artigoDiquinhas marotas de CSS Grid (parte 2)
Continue dominando CSS Grid com dicas avançadas - Parte 2. Mais técnicas profissionais, casos de uso reais e otimizações para layouts perfeitos. Domine Grid!
Ler artigoO poder de flex-grow em Flexbox
Descubra o verdadeiro poder de flex-grow em Flexbox CSS. Entenda distribuição inteligente de espaço e controle preciso de crescimento de elementos. Domine!
Ler artigoCSS Blocks: introdução à API
Conheça CSS Blocks da LinkedIn: otimizador revolucionário que reescreve CSS para máxima performance. Introdução à API e casos de uso práticos. Otimize!
Ler artigoLinkedIn anuncia CSS Blocks, o novo otimizador de CSS
Descubra CSS Blocks da LinkedIn: tecnologia que otimiza automaticamente seu CSS. Aprenda como reduzir drasticamente o tamanho dos arquivos CSS. Revolucionário!
Ler artigoDiquinhas marotas de CSS Grid (parte 1)
Domine CSS Grid com dicas essenciais - Parte 1 da série. Aprenda técnicas avançadas, truques profissionais e melhores práticas para layouts modernos. Comece!
Ler artigoA maneira 100% correta de fazer breakpoints em CSS
Descubra a abordagem correta para breakpoints CSS responsivos. Aprenda a definir pontos de quebra baseados em conteúdo, não em dispositivos.
Ler artigoCurso "Flexbox: o guia completo"
Curso completo de Flexbox: guia definitivo e prático. Domine o sistema de layout unidimensional mais poderoso do CSS com exemplos práticos. Aprenda tudo!
Ler artigoPorque CSS Grid é melhor que Bootstrap para criar layouts
Comparativo técnico: CSS Grid vs Bootstrap. Descubra por que Grid oferece código mais limpo, flexibilidade superior e layouts antes impossíveis.
Ler artigoResponsive Components: uma solução para container queries
Responsive Components com Container Queries revolucionárias. Componentes que respondem ao próprio tamanho, não à viewport. Revolução no CSS moderno!
Ler artigoMinicurso grátis "Sass placeholders: o jeito certo"
Minicurso grátis de Sass Placeholders completo. Aprenda a usar @extend corretamente e evite armadilhas comuns em pré-processadores CSS. Aprenda agora!
Ler artigoCurso "CSS Grid: o sistema definitivo de layouts"
Primeiro curso brasileiro de CSS Grid Layout. Aprenda o sistema definitivo de layouts web com exemplos práticos, técnicas modernas e abordagens reais.
Ler artigo16 dicas de Sass para facilitar sua vida (parte 1)
Descubra 8 dicas avançadas de Sass que você provavelmente não conhecia: prefixos, mixins, funções e técnicas que vão mudar seu CSS. Aprenda!
Ler artigoCurso "CSS: um passo adiante"
Curso completo de CSS avançado: OOCSS, SMACSS, BEM, Sass e arquitetura CSS profissional. Eleve seu código ao próximo nível com técnicas de experts.
Ler artigoMotion UI: 4 formas de usar animação funcional
Descubra 4 formas essenciais de usar animação funcional em Motion UI. Feedback visual, navegação, orientação espacial e relacionamento. Anime com propósito!
Ler artigoVocê não precisa de um framework CSS Grid
CSS Grid vs Frameworks: análise completa e imparcial. Descubra quando usar Grid nativo e quando frameworks CSS ainda fazem sentido em projetos. Decida!
Ler artigoImagem de largura total em layout com limite de largura
Imagem de largura total em layout com largura limitada. Técnica CSS para breakout de imagens full-width sem quebrar grid ou container. Truque incrível!
Ler artigoCSS @supports (CSS Feature Queries): detecção nativa de suporte a propriedades CSS
Domine CSS @supports (Feature Queries) para detectar suporte nativo. Melhore compatibilidade cross-browser sem JavaScript ou prefixos vendor. Use agora!
Ler artigoDesmistificando o CSS crítico "acima da borda"
Análise crítica sobre CSS inline crítico acima da borda: vantagens, desvantagens e quando realmente usar. Otimização de páginas vs sites. Desmistifique!
Ler artigoUnidades de viewport: controle de tipografia em web design responsivo
Domine unidades viewport para controle tipográfico responsivo. Use vw, vh, vmin/vmax para textos que escalam perfeitamente com a tela. Aprenda!
Ler artigoUX em validação de formulários com HTML e CSS
UX em validação de formulários com HTML e CSS puro. Feedback visual imediato, mensagens claras e validação nativa para experiência superior. Implemente!
Ler artigoLivro "CSS Eficiente"
Resenha completa do livro CSS Eficiente de Maurício Samy Silva. Guia sobre técnicas, arquitetura e otimização de CSS para projetos profissionais. Leia!
Ler artigoImagens responsivas com srcset e sizes
Srcset e sizes: imagens responsivas baseadas em viewport HTML. Controle inteligente de resolução e densidade de pixels para performance otimizada!
Ler artigoFlexbox
Guia completo de Flexbox: sistema de layout unidimensional do CSS. Domine todas as propriedades, alinhamento e distribuição de elementos flexíveis. Aprenda!
Ler artigoUnidades de CSS moderno: rem, vh, vw, vmin, vmax, ex, ch
Unidades CSS: rem, vh, vw, vmin, vmax, ex, ch explicadas. Guia completo de unidades modernas para layouts flexíveis e tipografia responsiva. Domine!
Ler artigoPré-processadores CSS e Chrome DevTools
Aprenda a usar pré-processadores CSS no Chrome DevTools. Debug e edição de Sass/LESS diretamente no navegador com source maps. Acelere o workflow!
Ler artigoUIkit: framework front-end modular responsivo
UIkit: framework front-end modular e responsivo profissional. Alternativa leve ao Bootstrap com componentes elegantes para desenvolvimento ágil. Use!
Ler artigoWebshims Lib: Polyfills de recursos de HTML5 e CSS3
Conheça Webshims Lib: polyfills completos para HTML5 e CSS3. Biblioteca de fallbacks para recursos modernos em navegadores antigos. Use jQuery!
Ler artigoFiltros CSS (CSS Filter Effects)
Guia completo de filtros CSS3 (filter effects). Aprenda blur, brightness, contrast, saturate e outros efeitos visuais nativos impressionantes. Domine!
Ler artigoComo melhorar a performance do site limpando HTML, CSS e imagens
Aprenda técnicas práticas para melhorar performance limpando HTML, CSS e imagens. Aumente velocidade de carregamento e reduza drasticamente bounce rate!
Ler artigoEscrevendo CSS eficiente
Escreva CSS eficiente para melhor performance web. Entenda seletores otimizados, especificidade e técnicas de otimização para sites rápidos. Otimize!
Ler artigoUsando Modernizr para detectar features de HTML5 e CSS3
Modernizr: detecte features HTML5 e CSS3 no navegador facilmente. Biblioteca essencial para feature detection e progressive enhancement moderno. Use!
Ler artigoNão use IDs como seletores CSS
Descubra por que não usar IDs como seletores CSS em projetos. Análise de especificidade, performance real, reutilização e melhores práticas de arquitetura!
Ler artigoURLs longas apresentadas corretamente com CSS
URLs longas apresentadas corretamente com CSS puro. Quebra de linha inteligente, overflow e técnicas para exibir links grandes adequadamente. Resolva!
Ler artigoGradiente CSS cross browser: degradês em CSS sem usar imagens
Crie gradientes CSS cross-browser sem imagens. Técnica completa para degradês compatíveis com todos os navegadores usando CSS puro. Funciona mesmo!
Ler artigoDiferenças entre IDs e Classes
Entenda de vez as diferenças entre IDs e Classes em HTML, CSS e JavaScript. Guia completo sobre quando e como usar cada um corretamente. Clarifique agora!
Ler artigoCSS float: considerações, dicas e macetes para bons layouts na web
Guia completo sobre CSS float para layouts: o que é, para que serve, problemas comuns e técnicas de clearfix. Domine layouts tableless clássicos na web!
Ler artigo