# Tag: Interface

> Posts do dpw marcados com a tag Interface.

URL: https://dpw.dev/tag/interface/

## Posts

- [Guia da propriedade CSS pointer-events](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.
- [Como escolher a modalidade de IA certa para a intenção do usuário](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.
- [Como funciona o elemento HTML geolocation](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.
- [Como animar border-image em 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.
- [O problema de contraste dos botões que a maioria dos design systems ignora](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.
- [A nova propriedade 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.
- [Traga de volta o design idiomático](https://dpw.dev/ui-ux/traga-de-volta-o-design-idiomatico/): A era do software desktop oferecia interfaces consistentes por meio de idiomas de design. A web perdeu isso. E é hora de resgatar.
- [Guia para revisões eficientes de UX e UI](https://dpw.dev/ui-ux/guia-revisoes-eficientes-ux-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.
- [10 princípios de design que todo designer deve conhecer](https://dpw.dev/design/10-principios-design-essenciais/): 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.
- [58 regras para um UI Design bonito e eficiente](https://dpw.dev/ui-ux/58-regras-design-interface/): 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.
- [14 dicas de UI para interfaces mais eficientes](https://dpw.dev/acessibilidade/14-dicas-ui-interfaces-eficientes/): Transforme suas interfaces com 14 princípios práticos de UI Design. Aprenda espaçamento, contraste, acessibilidade e muito mais com exemplos reais.
- [CSS Logical Properties](https://dpw.dev/css/css-logical-properties/): Domine CSS Logical Properties para layouts inclusivos e multilíngues. Crie interfaces que se adaptam automaticamente a diferentes idiomas e preferências.
- [CSS min-content, max-content e fit-content](https://dpw.dev/css/css-min-content-max-content-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!
- [As novas viewports: Large, Small e Dynamic](https://dpw.dev/css/viewports-large-small-dynamic/): Descubra as novas viewports CSS: Large, Small e Dynamic. Unidades lvh/svh/dvh para resolver problemas com barras móveis flutuantes. Use agora!
- [Dark Mode com variáveis de luminosidade invertida](https://dpw.dev/css/dark-mode-lch/): 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.
- [Navegação âncora e smooth scroll com CSS puro](https://dpw.dev/css/navegacao-ancora-smooth-scroll-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!
- [Dark Mode é somente uma opção estética](https://dpw.dev/acessibilidade/dark-mode-opcao-estetica/): 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!
- [Dark Mode com CSS: o jeito mais fácil](https://dpw.dev/css/dark-mode-css-facil/): 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.
- [Glider.js: slider JavaScript puro, responsivo e fácil de usar](https://dpw.dev/javascript/gliderjs-slider-carousel/): Glider.js: slider/carousel ultra leve e responsivo. Alternativa moderna sem dependências jQuery para galerias e carrosséis mobile-first. Use agora!
- [Barra de progresso circular com CSS](https://dpw.dev/css/barra-progresso-circular-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!
- [Como fazer menu dropdown com CSS puro](https://dpw.dev/css/menu-dropdown-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!
- [Melhor forma para listas com caption?](https://dpw.dev/css/listas-com-caption-label/): Listas HTML com caption e label para melhor acessibilidade. Técnicas semânticas avançadas para descrições e legendas em listas. Melhore HTML!
- [Bordas personalizadas responsivas com CSS background-repeat](https://dpw.dev/css/bordas-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!
- [Como fazer menu off canvas da maneira mais fácil](https://dpw.dev/css/menu-off-canvas/): 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!
- [Animação de loading com CSS puro](https://dpw.dev/css/animacao-loading-css/): Crie animações de loading leves e performáticas com CSS puro facilmente. Elimine gifs pesados e melhore performance sem bibliotecas JavaScript. Otimize!
- [Cores e variáveis CSS: box-shadow-color?!](https://dpw.dev/css/variaveis-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!
- [Slanted shapes (formas diagonais) com CSS](https://dpw.dev/css/slanted-shapes-formas-diagonais/): Slanted Shapes: crie formas diagonais em CSS. Técnicas criativas para backgrounds, seções e layouts com ângulos inclinados impressionantes. Domine!
- [Neumorfismo (neumorphism) em user interfaces](https://dpw.dev/design/neumorfismo-neumorphism-ui/): Neumorfismo (Neumorphism): tendência moderna de UI design. Efeitos soft UI inspirados em skeuomorphism com sombras sutis e elegantes. Experimente!
- [4 razões para fazer design sem cores primeiro](https://dpw.dev/design/4-razoes-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.
- [dpw expo #40 - ApexCharts.js, Sal.js, Moveable, Cropper.js, FilePound](https://dpw.dev/indicacoes/dpw-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!
- [Melhores práticas para input Telefone](https://dpw.dev/ui-ux/melhores-praticas-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!
- [dpw expo #39 - International Telephone Input, Focus Overlay, JustGage](https://dpw.dev/acessibilidade/dpw-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!
- [dpw expo #37 - roughViz.js, free-for.dev, Swiper](https://dpw.dev/indicacoes/dpw-expo-37-roughvizjs-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!
- [CSS element()](https://dpw.dev/css/css-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.
- [dpw expo #36 - React Bolt, Butter Cake, Browserhacks](https://dpw.dev/css/dpw-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!
- [UX em botões Cancelar](https://dpw.dev/ui-ux/ux-em-botoes-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!
- [dpw expo #35 - react-spinners-css, SimpleBar, CopyPalette](https://dpw.dev/indicacoes/dpw-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!
- [dpw expo #34 - Can I email, clipboard.js, Flawwwless ui](https://dpw.dev/design/dpw-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!
- [dpw expo #33 - filesize.js, Radial Menu, UI Interactions](https://dpw.dev/indicacoes/dpw-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!
- [Botões-fantasma (Ghost Buttons)](https://dpw.dev/design/botoes-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.
- [dpw expo #27 - Gradient Magic, Text stripes, git-pending](https://dpw.dev/design/dpw-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!
- [hack flex-grow 9999: o hack de Flexbox que você precisa conhecer](https://dpw.dev/css/flexbox-hack-flex-grow-9999/): 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!
- [19 princípios de User Interface Design](https://dpw.dev/design/19-principios-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.
- [Explorações de design visual](https://dpw.dev/design/exploracoes-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!
- [Variáveis CSS são melhores que loops de Sass?](https://dpw.dev/css/variaveis-css-loops-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!
- [Jumps: o novo steps() em Web Animation](https://dpw.dev/css/jumps-steps-css-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!
- [10 dicas para menus responsivos](https://dpw.dev/ui-ux/10-dicas-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!
- [Curso "Flexbox: o guia completo"](https://dpw.dev/css/curso-flexbox/): 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!
- [Responsive Components: uma solução para container queries](https://dpw.dev/css/responsive-components-container-queries/): Responsive Components com Container Queries revolucionárias. Componentes que respondem ao próprio tamanho, não à viewport. Revolução no CSS moderno!
- [Retrospectiva 2017](https://dpw.dev/miscelanea/retrospectiva-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!
- [Mitos de interface mobile - Mito 3: simplicidade é bom, complexidade é ruim](https://dpw.dev/ui-ux/mitos-interface-mobile-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!
- [Mitos de interface mobile - Mito 2: sites móveis requerem menos features](https://dpw.dev/ui-ux/mitos-interface-mobile-sites-moveis-menos-features/): Mito desmistificado: sites mobile precisam ter menos features. Descubra por que funcionalidades completas também são importantes em mobile. Repense UX!
- [Curso "CSS Grid: o sistema definitivo de layouts"](https://dpw.dev/css/curso-css-grid/): Primeiro curso brasileiro de CSS Grid Layout. Aprenda o sistema definitivo de layouts web com exemplos práticos, técnicas modernas e abordagens reais.
- [Mitos de interface mobile - Mito 1: usuários móveis estão sempre com pressa](https://dpw.dev/ui-ux/mitos-interface-mobile-usuarios-estao-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!
- [Imagem de largura total em layout com limite de largura](https://dpw.dev/css/imagem-largura-total-layout-largura-limitada/): 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!
- [CSS @supports (CSS Feature Queries): detecção nativa de suporte a propriedades CSS](https://dpw.dev/css/css-supports-deteccao-nativa-suporte-css/): Domine CSS @supports (Feature Queries) para detectar suporte nativo. Melhore compatibilidade cross-browser sem JavaScript ou prefixos vendor. Use agora!
- [Redução Progressiva e Decaimento de Experiência](https://dpw.dev/ui-ux/reducao-progressiva-decaimento-experiencia/): Entenda redução progressiva e decaimento de experiência. Aplique graceful degradation para garantir funcionalidade em todos os navegadores. Essencial!
- [Unidades de viewport: controle de tipografia em web design responsivo](https://dpw.dev/css/unidades-de-viewport-controle-tipografia-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!
- [Menu Cortina (Curtain Menu): novo menu mobile](https://dpw.dev/design/menu-cortina-curtain-menu-novo-menu-de-navegacao-mobile/): Menu Cortina (Curtain Menu): navegação mobile inovadora e elegante. Alternativa criativa ao tradicional hamburger menu para interfaces modernas. Inove!
- [Flexbox](https://dpw.dev/css/flexbox/): Guia completo de Flexbox: sistema de layout unidimensional do CSS. Domine todas as propriedades, alinhamento e distribuição de elementos flexíveis. Aprenda!
- [5 armadilhas de web design responsivo a evitar](https://dpw.dev/design/5-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.
- [Alloy UI: componentes, informações e opiniões](https://dpw.dev/indicacoes/alloy-ui-componentes-informacoes-e-opinioes/): Conheça o framework Alloy UI baseado em YUI3 robusto. Explore componentes front-end profissionais usados por empresas como Cisco e Volkswagen. Descubra!
- [As novas regras da web responsiva](https://dpw.dev/design/novas-regras-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!
- [Twitter Bootstrap](https://dpw.dev/miscelanea/twitter-bootstrap/): Twitter Bootstrap: o framework front-end mais popular do mundo. Grid system flexível, componentes prontos e desenvolvimento rápido de interfaces responsivas!
- [Filtros CSS (CSS Filter Effects)](https://dpw.dev/css/filtros-css3-filter-effects-css/): Guia completo de filtros CSS3 (filter effects). Aprenda blur, brightness, contrast, saturate e outros efeitos visuais nativos impressionantes. Domine!
- [Textarea: dicas e truques que você sempre quis saber](https://dpw.dev/html/textarea-dicas-truques-textarea/): Dicas e truques essenciais para textarea HTML. Resize controlado, contagem de caracteres, auto-height e melhorias de UX em campos. Otimize agora!
- [Gradiente CSS cross browser: degradês em CSS sem usar imagens](https://dpw.dev/css/gradiente-css-cross-browser-degrades-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!
- [Componentes de um sistema de navegação](https://dpw.dev/ui-ux/componentes-de-um-sistema-de-navegacao/): Conheça os 6 componentes essenciais de um sistema de navegação web eficiente: áreas clicáveis, indicadores visuais, ferramentas e feedback. Navegue bem!
- [CSS float: considerações, dicas e macetes para bons layouts na web](https://dpw.dev/css/css-float-consideracoes-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!
- [Identificador de fontes](https://dpw.dev/design/identificador-de-fontes/): Ferramentas essenciais para identificar fontes de imagens e sites. Descubra tipografias desconhecidas facilmente com recursos online e extensões. Identifique!

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml