CSS Logical Properties
Descubra como CSS Logical Properties, o módulo de CSS, pode ajudar a adaptar qualquer layout para diferentes línguas/idiomas.
CSS min-content, max-content e fit-content
Aprenda sobre os valores de CSS min-content, max-content e fit-content através de exemplos práticos e saiba como melhorar seus layouts Web.
As novas viewports: Large, Small e Dynamic
Estão chegando novas viewports: Large, Small e Dynamic. Com a evolução do web design responsivo, esta será uma adição ao CSS muito bem vinda.
Dark Mode com variáveis de luminosidade invertida
Conheça uma técnica incrível para fazer Dark Mode com variáveis de luminosidade invertidas usando o espaço de cores HLC.
Navegação âncora e smooth scroll com CSS puro
Fazer rolagem suave (smooth scroll) com CSS puro já é uma realidade. Veja nesse artigo como alcançar o efeito (com um bônus especial no fim).
Dark Mode é somente uma opção estética
Dark Mode não é uma solução mágica para problemas de acessibilidade; trata-se somente de uma opção estética.
Dark Mode com CSS: o jeito mais fácil
Das diferentes maneiras de fazer Dark Mode, a que você vai conhecer aqui certamente é a mais simples e fácil para dark mode com CSS.
Glider.js: slider JavaScript puro, responsivo e fácil de usar
Conheça Glider.js, slider JavaScript puro, responsivo, eficiente, leve e muito fácil de usar!
Barra de progresso circular com CSS
Das diferentes manerias de fazer barras de progresso circular, essa daqui, usando CSS puro, com certeza vai surpreender!
Como fazer menu dropdown com CSS puro
Das diversas técnicas CSS possíveis para menus dropdown, veja como fazer um menu dropdown muito fácil usando CSS puro!
Melhor forma para listas com caption?
Há algumas formas de fazer uma lista HTML com caption/label. A que vamos mostrar não é a mais comum, mas ganha pontos pela semântica e acessibilidade.
Bordas personalizadas responsivas com CSS background-repeat
Relembre background-repeat e saiba como atingir o inimaginável com essa propriedade: bordas personalizadas responsivas!
Como fazer menu off canvas da maneira mais fácil
Sabe como fazer um menu off-canvas? E um menu off canvas da maneira mais simples e eficiente possível? São coisas bem diferentes, hã? ;)
Animação de loading com CSS puro
Veja como fazer uma animação de loading com CSS puro em pouquíssimas linhas de código, economizando centenas de KB em seu projeto web!
Cores e variáveis CSS: box-shadow-color?!
A propriedade box-shadow-color de CSS já pode nos atender? Veja a resposta para esta pergunta regada a variáveis CSS.
Slanted shapes (formas diagonais) com CSS
Aprenda a fazer slanted shapes (formas diagonais ou Razor-Blade shape) com CSS através de uma variedade de técnicas possíveis.
Neumorfismo (neumorphism) em user interfaces
Está por dentro da nova tendência de UI, o Neumorfismo (Neumorphism)? Se ainda não, leia mais e conheça o hype de design que promete ser a sensação de 2020!
4 razões para fazer design sem cores primeiro
Existem boas razões para fazer seus designs primeiro sem cores, somente em grayscale. Saiba como essa técnica pode ajudar a criar designs mais eficientes.
dpw expo #40 – ApexCharts.js, Sal.js, Moveable, Cropper.js, FilePound
dpw expo 40 é especial, comemorando o fim da 1ª temporada, e apresenta 5 recursos para você explorar um mundo de interatividade e possibilidades!
Melhores práticas para input Telefone
Conheça algumas melhores práticas para input Telefone e saiba como aprimorar a experiência/eficiência de inputs de telefone em seus projetos Web.
dpw expo #39 – International Telephone Input, Focus Overlay, JustGage
International Telephone Input, para campos de tel internacionais; Focus Overlay, para ênfase ao foco em elementos; JustGage, que gera gráficos gauge.
dpw expo #37 – roughViz.js, free-for.dev, Swiper
roughViz.js, lib JS para gráficos “à mão”; free-for.dev, lista de recursos free tier e; Swiper, moderno touch slider para mobile.
CSS element()
Conheça element(), a função de CSS que renderiza qualquer parte de um site como uma imagem ao vivo!
dpw expo #36 – React Bolt, Butter Cake, Browserhacks
React Bolt, boilerplate para projetos React; Butter Cake, framework CSS moderno com Flexbox; Browserhacks, com listas de hacks CSS para diferentes browsers.
UX em botões Cancelar
Através de medidas simples, você pode aprimorar seus botões Cancelar e melhorar a qualidade de seu site/app. Saiba como fazer isso.
dpw expo #35 – react-spinners-css, SimpleBar, CopyPalette
react-spinners-css, spinner para React; SimpleBar, barras de rolagem personalizadas e; CopyPallete, para criar paletas de cores SVG para Sketch e Figma.
dpw expo #34 – Can I email, clipboard.js, Flawwwless ui
Can I email, para checar features em e-mails; clipboard.js, para copiar texto para a área de transferência e; Flawwwless ui, lib de componentes React.
dpw expo #33 – filesize.js, Radial Menu, UI Interactions
filesize.js, para humanos lerem tamanhos de arquivos; Radial Menu, um menu radial fácil de usar e; UI Interactions, interações de user interface diversas.
Botões-fantasma (Ghost Buttons)
Artigo completo sobre botões-fantasma (ou Ghost Buttons), mostrando o que são, como surgiram, exemplos reais e dicas de onde e quando usá-los.
dpw expo #27 – Gradient Magic, Text stripes, git-pending
Gradient Magic, galeria de gradientes CSS únicos; Text stripes, ferramenta para criar stripes e; git-pending, plugin para git para relembrar seus TODO.
hack flex-grow 9999: o hack de Flexbox que você precisa conhecer
Flexbox guarda muitas surpresas. Conheça o hack flex-grow 9999 e pergunte-se como você conseguiu trabalhar com Flexbox por tanto tempo sem saber disso!
19 princípios de User Interface Design
Conheça 19 princípios de User Interface Design e dê um passo além, qualificando-se e aprimorando suas interfaces para serem mais usáveis e eficientes.
Explorações de design visual
As explorações de design visual acontecem de diversas maneiras (Mood boards, Style tiles, Element collages). Conheça mais sobre cada uma dessas técnicas.
Variáveis CSS são melhores que loops de Sass?
Variáveis CSS são melhores que loops de Sass? Não necessariamente, mas veja este exemplo prático com as 2 tecnologias para atingir o mesmo objetivo em CSS.
Jumps: o novo steps() em Web Animation
Conheça “jumps”, os novos valores de CSS steps() para controle de animação web que vão facilitar animações e fazer cálculos mais complexos automaticamente.
10 dicas para menus responsivos
Lidar com menus responsivos pode ser uma tarefa árdua. Neste artigo, conheça 10 dicas para menus responsivos para fazer da experiência mobile algo melhor.
Responsive Components: uma solução para container queries
Conheça Responsive Components, uma solução para componentes responsivos que resolve o problema de Container Queries e pode ser usada imediatamente!
Retrospectiva 2017
Retrospectiva com os melhores artigos de 2017 do seu, do meu, do nosso desenvolvimento para web!
Mitos de interface mobile – Mito 3: simplicidade é bom, complexidade é ruim
Terceira parte da série sobre mitos de interface mobile, abordando o mito: simplicidade é bom, complexidade é ruim.
Mitos de interface mobile – Mito 2: sites móveis requerem menos features
Segunda parte da série sobre mitos de interface mobile, abordando o mito: sites móveis requerem menos features.
Mitos de interface mobile – Mito 1: usuários móveis estão sempre com pressa
Primeira parte da série sobre mitos de interface mobile, abordando o mito: usuários móveis estão sempre com pressa.
Imagem de largura total em layout com limite de largura
Conheça a solução mais simples e eficiente para ter imagem de largura total em layout com largura limitada.
CSS @supports (CSS Feature Queries): detecção nativa de suporte a propriedades CSS
Saiba mais sobre CSS @supports, diretiva CSS que permite detectar o suporte de navegador para propriedade de estilo. Ideal para progressive enhancement.
Redução Progressiva e Decaimento de Experiência
Redução Progressiva e Decaimento de Experiência: saiba mais sobre estas novas técnicas de UX para personalizar a UI de aplicações web.
Unidades de viewport: controle de tipografia em web design responsivo
Saiba como ter controle absoluto de tipografia em web design responsivo através de unidades de viewport.
Menu Cortina (Curtain Menu): novo menu mobile
Conheça o Menu Cortina (Curtain Menu), menu de navegação mobile com resultados surpreendentes garantidos pela Nielsen Norman Group!
Flexbox
Use Flexbox para levar a criação de layouts CSS ao próximo nível: saiba mais sobre Flexbox através de explicações detalhadas e exemplos de código.
Guia para os novos tipos de input HTML5
Conheça e saiba mais sobre os novos tipos de input HTML5 e como esses novos campos ajudam o desenvolvimento de formulários e a experiência do usuário (UX).
5 armadilhas de web design responsivo a evitar
Conheça 5 armadilhas de web design responsivo que você deve evitar e veja mais dicas sobre responsividade na web para desenvolver projetos responsivos melhores.
Alloy UI: componentes, informações e opiniões
Alloy UI, um UI framework feito com YUI3, é um projeto com bons componentes para desenvolvimento front-end e já é usado por grandes empresas pelo mundo.
As novas regras da web responsiva
Conheça as novas regras da web responsiva e saiba que é preciso acompanhar as mudanças para desenvolver uma web melhor.
Filtros CSS (CSS Filter Effects)
Saiba como é possível usar os incríveis filtros CSS para efeitos como blur, greyscale, brilho, matiz, saturação e mais. Conheça o poder dos novos filtros CSS3!
Textarea: dicas e truques que você sempre quis saber
Textarea: dicas e truques para melhorar as interações com áreas de texto em suas páginas
Componentes de um sistema de navegação
Conheça os componentes básicos de um sistema de navegação e saiba o que é essencial para seu site permitir a fácil interação de seus visitantes
Identificador de fontes
Quer usar um identificador de fontes para saber qual fonte foi usada em uma imagem ou texto de um site? Quer saber como identificar uma fonte? Leia mais!