Os melhores conteúdos de front-end design: HTML, CSS, UI, UX, Web Design, performance, Design System, a11y, semântica, artigos, tutoriais, boas práticas.https://dpw.dev/pt-BRhttps://dpw.dev/css/container-queries-nao-sao-media-queries/https://dpw.dev/css/container-queries-nao-sao-media-queries/Container queries não funcionam como media queries. Veja a diferença, quando usar cada uma e os efeitos colaterais que pegam quem começa a usá-las.Thu, 08 Oct 2026 12:00:00 GMTcsshttps://dpw.dev/css/grid-animado-anchor-positioning/https://dpw.dev/css/grid-animado-anchor-positioning/Como fazer as células de um grid animarem até a nova posição quando o espaço muda, sem JavaScript e sem View Transitions, com animações interrompíveis.Mon, 05 Oct 2026 14:00:00 GMTcsshttps://dpw.dev/ui-ux/debate-toggle-dark-mode/https://dpw.dev/ui-ux/debate-toggle-dark-mode/De uma issue no guia do Chrome à conclusão de que o melhor toggle de dark mode é nenhum: os argumentos de Lea Verou e Bramus, e o que sobra de prático.Thu, 01 Oct 2026 17:00:00 GMTui-uxhttps://dpw.dev/css/text-box-trim/https://dpw.dev/css/text-box-trim/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.Mon, 28 Sep 2026 12:00:00 GMTcsshttps://dpw.dev/ui-ux/formulario-precisa-dropdown/https://dpw.dev/ui-ux/formulario-precisa-dropdown/O dropdown esconde as opções atrás de um clique e cobra caro por isso. Quando trocar por radio buttons, campo de texto, combobox ou botões, e quando ele se justifica.Thu, 24 Sep 2026 16:00:00 GMTui-uxhttps://dpw.dev/design-system/design-system-legivel-para-llms/https://dpw.dev/design-system/design-system-legivel-para-llms/LLMs inventam tokens, mudam de valor entre sessões e começam do zero. Veja como estruturar o design system para que os agentes de IA parem de chutar.Mon, 21 Sep 2026 12:00:00 GMTdesign-systemhttps://dpw.dev/ui-ux/visualizacao-de-dados-ux-dashboards/https://dpw.dev/ui-ux/visualizacao-de-dados-ux-dashboards/Por que dashboards corretos não produzem decisão, e as três perguntas de UX (contexto, público e insight) que decidem 80% do resultado antes do primeiro gráfico.Thu, 17 Sep 2026 13:00:00 GMTui-uxhttps://dpw.dev/css/hover-proximidade-css/https://dpw.dev/css/hover-proximidade-css/Como afetar os elementos ao redor daquele sob o cursor em um grid responsivo, calculando coordenadas com sibling-index(), scroll-driven animations e if().Mon, 14 Sep 2026 15:00:00 GMTcsshttps://dpw.dev/html/html-faz-isso/https://dpw.dev/html/html-faz-isso/Popover, dialog, accordion exclusivo, invoker commands, lazy loading: recursos dinâmicos que o HTML resolve hoje sozinho, sem uma linha de JavaScript.Thu, 10 Sep 2026 12:00:00 GMThtmlhttps://dpw.dev/design/estrategia-marca-direcao-visual/https://dpw.dev/design/estrategia-marca-direcao-visual/A fase de pré-conceito em branding: pesquisar contexto de marca, expor premissas escondidas dos stakeholders e virar direção compartilhada em base visual.Mon, 07 Sep 2026 12:00:00 GMTdesignhttps://dpw.dev/css/pointer-events-css/https://dpw.dev/css/pointer-events-css/Como pointer-events decide qual elemento recebe cliques e hover, por que ela é herdada, e o que ela não faz: desabilitar elemento nem impedir seleção de texto.Thu, 03 Sep 2026 12:00:00 GMTcsshttps://dpw.dev/ui-ux/modalidade-ia-intencao-usuario/https://dpw.dev/ui-ux/modalidade-ia-intencao-usuario/Nem toda capacidade de IA cabe num chat. Como auditar carga física e cognitiva do usuário e escolher a modalidade de entrada e saída certa para cada contexto.Mon, 31 Aug 2026 12:00:00 GMTui-uxhttps://dpw.dev/html/elemento-geolocation-html/https://dpw.dev/html/elemento-geolocation-html/O elemento geolocation pede a localização do usuário via atributos HTML, com menos JavaScript e um tratamento de permissão e erro muito melhor que a API antiga.Thu, 27 Aug 2026 12:00:00 GMThtmlhttps://dpw.dev/css/animar-border-image-css/https://dpw.dev/css/animar-border-image-css/Como animar border-image com gradientes, custom properties registradas e border-image-slice para criar bordas que se desenham sozinhas no hover.Mon, 24 Aug 2026 12:00:00 GMTcsshttps://dpw.dev/css/scroll-driven-animations-direcoes-opostas/https://dpw.dev/css/scroll-driven-animations-direcoes-opostas/Como fazer colunas se moverem em direções opostas durante a rolagem com scroll-driven animations, animation-timeline e a função view() do CSS.Thu, 20 Aug 2026 12:00:00 GMTcsshttps://dpw.dev/css/sibling-index-sibling-count-css/https://dpw.dev/css/sibling-index-sibling-count-css/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.Mon, 17 Aug 2026 12:00:00 GMTcsshttps://dpw.dev/javascript/baseline-menos-javascript/https://dpw.dev/javascript/baseline-menos-javascript/Guia prático para auditar as dependências do package.json e descobrir o que a plataforma web já resolve nativamente, usando o Baseline como bússola.Sun, 09 Aug 2026 12:00:00 GMTjavascripthttps://dpw.dev/css/usar-estilizar-dialog-html-css/https://dpw.dev/css/usar-estilizar-dialog-html-css/Como usar e estilizar o elemento dialog: show() e showModal(), invoker commands, acessibilidade, inércia, estilização do ::backdrop, posicionamento e animações.Sat, 08 Aug 2026 12:00:00 GMTcsshttps://dpw.dev/css/css-highlight-progressive-enhancement/https://dpw.dev/css/css-highlight-progressive-enhancement/Como o pseudo-elemento ::highlight() e a CSS Custom Highlight API destacam trechos de texto, com fallback para quando o JavaScript não está disponível.Fri, 07 Aug 2026 12:00:00 GMTcsshttps://dpw.dev/css/css-gap-decorations/https://dpw.dev/css/css-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.Mon, 03 Aug 2026 12:00:00 GMTcsshttps://dpw.dev/design-system/problema-contraste-botoes-design-systems/https://dpw.dev/design-system/problema-contraste-botoes-design-systems/A maioria dos design systems define só o fundo dos botões, esquecendo do texto. Veja como tokens semânticos resolvem esse problema de contraste.Sun, 26 Jul 2026 00:00:00 GMTdesign-systemhttps://dpw.dev/css/a-linha-tenue-entre-estados-css-e-eventos-javascript/https://dpw.dev/css/a-linha-tenue-entre-estados-css-e-eventos-javascript/Pseudo-classes como :hover, :focus e :checked funcionam quase como listeners de eventos JS. Veja os paralelos com CSS e o futuro event-trigger.Mon, 20 Jul 2026 13:00:00 GMTcsshttps://dpw.dev/css/css-border-shape/https://dpw.dev/css/css-border-shape/Conheça a propriedade CSS border-shape para criar formas, bordas que seguem o contorno, decorações e animações que clip-path e mask não conseguem.Mon, 20 Jul 2026 12:00:00 GMTcsshttps://dpw.dev/acessibilidade/3-principios-estoicos-acessibilidade-web/https://dpw.dev/acessibilidade/3-principios-estoicos-acessibilidade-web/Três princípios do estoicismo aplicados ao dia a dia de quem trabalha com acessibilidade web — emoção sob controle, obstáculos como oportunidade e virtude.Fri, 15 May 2026 12:00:00 GMTacessibilidadehttps://dpw.dev/css/css-range-syntax-media-queries/https://dpw.dev/css/css-range-syntax-media-queries/A sintaxe de intervalos (Range Syntax) em media queries é mais legível, fácil de depurar e bem suportada. Saiba por que vale substituir min-width e max-width.Mon, 11 May 2026 12:00:00 GMTcss