Layout
44 posts
text-box-trim: controle do espaço acima e abaixo do texto
Como text-box-trim e text-box-edge removem o espaço fantasma que a fonte cria acima e abaixo do texto, e resolvem centralização e alinhamento com padding igual.
Ler artigoHover por proximidade com CSS moderno
Como afetar os elementos ao redor daquele sob o cursor em um grid responsivo, calculando coordenadas com sibling-index(), scroll-driven animations e if().
Ler artigoLayouts matemáticos com sibling-index() e sibling-count()
As funções sibling-index() e sibling-count() levam a contagem de elementos para o CSS: animações escalonadas, larguras e menus radiais sem JavaScript.
Ler artigoCSS Gap Decorations
Com suporte total no Chrome e no Edge, as gap decorations do CSS já permitem estilizar os espaços de grid e flexbox com bastante controle.
Ler artigoA grande expansão do CSS
CSS agora faz nativamente o que Floating UI, GSAP, Framer Motion e react-select exigiam em JavaScript. Veja quanto isso economiza e o que ainda falta.
Ler artigoItem Flow: o novo sistema de layout para CSS
Conheça o Item Flow, proposta CSS que unifica flex-flow e grid-auto-flow em um sistema só, com masonry integrado. Notas e análise da nova sintaxe.
Ler artigoLayouts 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 artigoRetrospectiva 2015
Retrospectiva 2015 do desenvolvimento para web. Relembre principais artigos, conquistas e momentos marcantes do ano no blog. Nostalgia pura!
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 artigoPrevenindo "layout thrashing" com FastDom
Aprenda a prevenir layout thrashing com FastDOM. Otimize manipulações DOM evitando reflows forçados e melhorando drasticamente a performance!
Ler artigoTipografia responsiva: melhores artigos e tutoriais
Tipografia responsiva: melhores artigos e tutoriais selecionados. Curadoria completa de recursos essenciais sobre tipografia fluida e adaptativa. Aprenda!
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 artigo5 armadilhas de web design responsivo a evitar
Evite erros comuns em design responsivo. Aprenda sobre performance, conteúdo, contexto e experiência mobile para criar sites verdadeiramente adaptáveis.
Ler artigoAs novas regras da web responsiva
Descubra as novas regras da web responsiva moderna. Container queries, aspect-ratio e técnicas atuais de responsive design em CSS. Atualize-se!
Ler artigoTwitter Bootstrap
Twitter Bootstrap: o framework front-end mais popular do mundo. Grid system flexível, componentes prontos e desenvolvimento rápido de interfaces responsivas!
Ler artigoElementos de design aplicados à Web
Princípios fundamentais de design aplicados à web moderna. Entenda equilíbrio visual, contraste, hierarquia e elementos essenciais para interfaces eficazes!
Ler artigoWireframes para web: guia completo de desenvolvimento
Wireframe web: guia completo para prototipação profissional. Ferramentas, técnicas e boas práticas para esboçar interfaces antes do design. Prototipe!
Ler artigo10 erros básicos de web design
Evite armadilhas comuns em web design hoje. Conheça os 10 erros básicos mais frequentes e aprenda a criar sites visualmente eficientes e profissionais!
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 artigoFerramentas para criação de wireframes
Melhores ferramentas para criação de wireframes profissionais. Compare opções gratuitas e pagas para prototipagem e design de interfaces. Escolha a ideal!
Ler artigo7 ferramentas para web designs melhores
Analise e melhore seus web designs com ferramentas essenciais. Descubra heat maps, testes A/B, análise de usabilidade e otimização de conversão.
Ler artigo4 elementos de design para um bom call to action
Crie botões de chamada à ação que convertem. Domine tamanho, forma, cor e posicionamento para aumentar suas taxas de conversão drasticamente.
Ler artigoUser Interface em dicas rápidas
Dicas rápidas e práticas de User Interface (UI). Pequenas melhorias que fazem grande diferença na experiência visual e usabilidade. Aplique hoje!
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