Interface
73 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 artigoHTML faz isso?!
Popover, dialog, accordion exclusivo, invoker commands, lazy loading: recursos dinâmicos que o HTML resolve hoje sozinho, sem uma linha de JavaScript.
Ler artigoGuia da propriedade CSS pointer-events
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.
Ler artigoComo escolher a modalidade de IA certa para a intenção do usuário
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.
Ler artigoComo funciona o elemento HTML geolocation
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.
Ler artigoComo animar border-image em CSS
Como animar border-image com gradientes, custom properties registradas e border-image-slice para criar bordas que se desenham sozinhas no hover.
Ler artigoO problema de contraste dos botões que a maioria dos design systems ignora
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.
Ler artigoA nova propriedade 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.
Ler artigoTraga de volta o design idiomático
A era do software desktop oferecia interfaces consistentes por meio de idiomas de design. A web perdeu isso. E é hora de resgatar.
Ler artigoGuia para revisões eficientes de UX e UI
Como conduzir revisões de UX e UI: processos, cenários práticos, testes A/B, acessibilidade e iteração contínua para produtos digitais melhores.
Ler artigo10 princípios de design que todo designer deve conhecer
Conheça 10 princípios essenciais de design com exemplos reais de produtos. Regras que guiam decisões adequadas para criar interfaces mais usáveis e eficazes.
Ler artigo58 regras para um UI Design bonito e eficiente
A interface certa pode elevar uma aplicação de funcional a inesquecível. 58 regras em oito categorias formando a "Fórmula da Elegância" do design de UI.
Ler artigo14 dicas de UI para interfaces mais eficientes
Transforme suas interfaces com 14 princípios práticos de UI Design. Aprenda espaçamento, contraste, acessibilidade e muito mais com exemplos reais.
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 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 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 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 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 artigoDark Mode é somente uma opção estética
A verdade sobre dark mode baseada em estudos científicos. Descubra por que modo escuro pode não ser tão benéfico para saúde quanto muitos alardeiam!
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 artigoGlider.js: slider JavaScript puro, responsivo e fácil de usar
Glider.js: slider/carousel ultra leve e responsivo. Alternativa moderna sem dependências jQuery para galerias e carrosséis mobile-first. Use agora!
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 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 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 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 artigoNeumorfismo (neumorphism) em user interfaces
Neumorfismo (Neumorphism): tendência moderna de UI design. Efeitos soft UI inspirados em skeuomorphism com sombras sutis e elegantes. Experimente!
Ler artigo4 razões para fazer design sem cores primeiro
Melhore seu processo de design com grayscale. Descubra por que começar em preto e branco resulta em layouts mais limpos e usabilidade superior.
Ler artigodpw expo #40 - ApexCharts.js, Sal.js, Moveable, Cropper.js, FilePound
Explore ApexCharts, Sal.js, Moveable, Cropper.js e FilePond no dpw expo. Gráficos modernos, scroll animations e upload/crop de imagens profissional. Teste!
Ler artigoMelhores práticas para input Telefone
Melhores práticas para input de telefone em formulários. UX aprimorada, validação, formatação automática e acessibilidade em campos telefônicos. Otimize!
Ler artigodpw expo #39 - International Telephone Input, Focus Overlay, JustGage
Explore International Telephone Input, Focus Overlay e JustGage no dpw expo. Input telefone internacional, overlays de foco e gauges animados. Confira!
Ler artigodpw expo #37 - roughViz.js, free-for.dev, Swiper
Explore Roughviz.js, Free-for.dev e Swiper no dpw expo. Gráficos estilo sketch artístico, recursos grátis para devs e slider mobile moderno. Teste!
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 artigoUX em botões Cancelar
UX em botões de cancelar: boas práticas essenciais. Aprenda posicionamento correto, hierarquia visual e comportamento ideal de ações secundárias. Melhore!
Ler artigodpw expo #35 - react-spinners-css, SimpleBar, CopyPalette
Explore React Spinners CSS, SimpleBar e CopyPalette no dpw expo. Loaders React elegantes, scrollbar customizada minimalista e paletas de cores. Teste!
Ler artigodpw expo #34 - Can I email, clipboard.js, Flawwwless ui
Explore Can I Email, Clipboard.js e Flawwwless UI no dpw expo. Compatibilidade HTML email, copiar para clipboard fácil e galeria de designs. Confira!
Ler artigodpw expo #33 - filesize.js, Radial Menu, UI Interactions
Explore Filesize.js, Radial Menu e UI Interactions no dpw expo. Formatação de tamanhos de arquivo, menus radiais e coleção de micro-interações. Veja!
Ler artigoBotões-fantasma (Ghost Buttons)
Entenda a evolução dos botões-fantasma no web design. Descubra quando usar, impacto na conversão e a transição do skeuomorfismo para flat design.
Ler artigodpw expo #27 - Gradient Magic, Text stripes, git-pending
Explore Gradient Magic, Text Stripes e Git Pending no dpw expo. Gradientes CSS prontos incríveis, efeitos de texto e gerenciamento de commits pendentes. 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 artigo19 princípios de User Interface Design
Fundamentos essenciais para criar interfaces intuitivas e eficazes. Descubra 19 princípios de UI Design para melhorar a experiência do usuário.
Ler artigoExplorações de design visual
Explorações criativas em design visual para web moderna. Tendências, técnicas avançadas e experimentos para criar interfaces impactantes. Inspire-se agora!
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 artigo10 dicas para menus responsivos
Descubra 10 dicas para criar menus de navegação responsivos eficientes. Aprenda a priorizar conteúdo e otimizar experiência mobile dos usuários. Navegue!
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 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 artigoRetrospectiva 2017
Relembre 2017 no dpw: JavaScript this, Motion UI, microinterações e o polêmico DOM. Veja os artigos que marcaram o ano e impactaram a web brasileira!
Ler artigoMitos de interface mobile - Mito 3: simplicidade é bom, complexidade é ruim
Mito mobile desmistificado: simplicidade vs complexidade em UI. Nem sempre simples é melhor - contexto e propósito definem boa UX mobile. Repense!
Ler artigoMitos de interface mobile - Mito 2: sites móveis requerem menos features
Mito desmistificado: sites mobile precisam ter menos features. Descubra por que funcionalidades completas também são importantes em mobile. Repense UX!
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 artigoMitos de interface mobile - Mito 1: usuários móveis estão sempre com pressa
Mito desmistificado: usuários mobile estão sempre com pressa. Compreenda diferentes contextos de uso e necessidades variadas em dispositivos móveis. Repense!
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 artigoRedução Progressiva e Decaimento de Experiência
Entenda redução progressiva e decaimento de experiência. Aplique graceful degradation para garantir funcionalidade em todos os navegadores. Essencial!
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 artigoMenu Cortina (Curtain Menu): novo menu mobile
Menu Cortina (Curtain Menu): navegação mobile inovadora e elegante. Alternativa criativa ao tradicional hamburger menu para interfaces modernas. Inove!
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 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 artigoAlloy UI: componentes, informações e opiniões
Conheça o framework Alloy UI baseado em YUI3 robusto. Explore componentes front-end profissionais usados por empresas como Cisco e Volkswagen. Descubra!
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 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 artigoTextarea: dicas e truques que você sempre quis saber
Dicas e truques essenciais para textarea HTML. Resize controlado, contagem de caracteres, auto-height e melhorias de UX em campos. Otimize agora!
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 artigoComponentes de um sistema de navegação
Conheça os 6 componentes essenciais de um sistema de navegação web eficiente: áreas clicáveis, indicadores visuais, ferramentas e feedback. Navegue bem!
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 artigoIdentificador de fontes
Ferramentas essenciais para identificar fontes de imagens e sites. Descubra tipografias desconhecidas facilmente com recursos online e extensões. Identifique!
Ler artigo