Tier List das últimas melhores features de CSS: o que realmente vale a pena usar
Veja a Tier List das melhores features de CSS em 2024, com exemplos práticos de :has(), container queries, scroll animations e outras novidades.
Layouts com CSS Grid e minmax()
Aprenda sobre layouts responsivos usando CSS Grid com minmax(), auto-fit ou auto-fill para fazer layouts responsivos e eficientes usando CSS moderno.
Estilização de formulários com CSS puro (avançado)
Conheça maneiras para estilizar formulários com CSS puro e aproveitar os recursos nativos de CSS.
10 dicas para melhores animações e transições CSS
Conheça 10 dicas para melhores animações e transições CSS para criar e tornar o motion em seus projetos Web mais profissionais.
CSS Condicional com :has e :nth-last-child
CSS Condicional é uma técnica de CSS moderno para alterar estilos conforme o número de elementos de um componente. Ela vai mudar sua maneira de ver CSS!
Como selecionar irmãos anteriores com CSS usando :has()
Saiba como selecionar irmãos anteriores com CSS usando :has() e tire ainda mais proveito dessa poderosa feature de CSS.
CSS Logical Properties
Descubra como CSS Logical Properties, o módulo de CSS, pode ajudar a adaptar qualquer layout para diferentes línguas/idiomas.
9 regras para web design responsivo
Conheça 9 regras básicas para um web design responsivo mais fácil de ser feito, que deixa o código mais rápido e facilita a manutenção.
CSS Style Queries
Depois de Container Queries, conheça as Style Queries! Veja o que são style queries, exemplos práticos e como elas mudam o web design responsivo.
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.
Guia de unidades CSS para espaçamento
Veja neste guia de unidades CSS para espaçamento quais unidades CSS (rem, em, ch, vh, vw) são mais apropriadas para cada caso de uso.
Como fazer code review de CSS
Já pensou em fazer code review de CSS e que este é um passo importante para garantir a qualidade do seu código? Veja como fazer code review de CSS.
CSS Shorthands: Dica de Ouro
É bastante comum usarmos CSS shorthands ao escrever estilos para a Web. Mas você sabia que elas podem guardar um grande perigo?
5 dicas para melhorar a performance CSS
Conheça 5 dicas para melhorar a performance de CSS através de técnicas variadas e melhorar o desempenho de seus projetos Web.
Acessibilidade e CSS
Conheça o que CSS moderno pode oferecer para aprimorar a acessibilidade de projetos Web e oferecer excelentes experiências de uso para todos os visitantes.
prefers-reduced-data: como funciona a nova media query
Conheça prefers-reduced-data, a nova media query para controle de dados. Veja casos de uso práticos em que ela será bastante útil.
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.
O novo web design responsivo
Uma nova era de web design responsivo começou. Quer saber mais a respeito? Leia para saber as novidades e como elas mudam tudo!
Tailwind CSS: adiciona complexidade; não faz nada
Tailwind CSS está em alta. De maneira injustificada. Veja neste artigo uma análise séria de Tailwind e como ele tenta resolver um problema que não existe.
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.
Como melhorar a legibilidade de textos na Web
Aprenda a como melhorar a legibilidade de textos na Web e aprimorar a usabilidade e qualidade geral de seus projetos.
CSS mask-image: mascaramento CSS nativo
Fazer mascaramento com CSS usando a propriedade mask-image já é possível. Veja como atingir efeitos visuais incríveis com mask-image CSS.
Como encontrar o elemento-pai relativo mais próximo
Tendo problemas de posicionamento CSS em função de elementos relative e absolute? Aprenda como encontrar o elemento-pai relativo mais próximo.
O que é possível colocar em uma variável CSS?
O poder que as Variáveis CSS trouxeram às folhas de estilo é surpreendente, mas você sabe o que é possível colocar em uma variável CSS?
Técnicas CSS para elementos de cobertura
Veja algumas técnicas possível para fazer elementos de cobertura (cobrir um elemento com outro) através de utilitários CSS.
10 dicas para manter a Especificidade CSS baixa
Manter a Especificidade CSS baixa em todos os seletores é uma meta válida. Conheça 10 dicas para manter a Especificidade CSS baixa.
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).
Tira-dúvidas sobre BEM
BEM pode trazer muitas vantagens e benefícios ao front end de qualquer projeto Web. Tira-dúvidas sobre BEM, a metodologia CSS mais popular do mundo!
O conceito mais importante de CSS
De todas técnicas, macetes e sacadas de CSS, se você não conhecer este, que é o conceito mais importante de CSS, você não aprendeu nada…
CSS acessível
Conhecer CSS é uma das primeiras obrigações de um dev front-end. Inclusive, conhecer CSS acessível, tão importante e vital para muitos.
16 dicas de Sass para facilitar sua vida (parte 2)
Continuando as dicas Sass, conheça mais 8 dicas do pré-processador CSS que poderão facilitar muito sua vida no front end.
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.
@property: variáveis CSS com superpoderes
Houdini Properties e Values API está chegando. Saiba como a diretiva @property dá superpoderes a Variáveis CSS.
CUBE CSS: uma nova metodologia CSS
CUBE CSS é uma nova metodologia CSS, chegando ao cenário frontend com bases sólidas e robustez. Saiba mais sobre CUBE CSS.
BEM: guia definitivo do padrão CSS mais famoso
Saiba tudo sobre BEM, metodologia CSS / convenção de nomenclatura para deixar seu código front end no padrão internacional.
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!
Textos responsivos com CSS clamp()
Textos responsivos com CSS é algo importante. Conheça a nova função clamp() e como deixar o texto responsivo com CSS.
Os benefícios de performance de animações CSS
Fazer animações Web usando JavaScript ou CSS? Veja conceitos, testes e gráficos que mostram os benefícios de performance de animações CSS.
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ã? ;)
O básico sobre Media Queries
Conheça o básico sobre Media Queries para usá-las com mais consciência (e saber a diferença entre media query e breakpoint).
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!
O básico de Sass para se virar nas webs
Confira as principais features de Sass para acompanhar nossos tutoriais de desenvolvimento web.
Introdução a Animações CSS
Animações CSS são amadas e odiadas por profissionais de Web no mundo todo. Veja nessa introdução a Animações CSS porque elas merecem só serem amadas. <3
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.
6 vantagens em usar BEM ao escrever CSS
BEM é uma convenção de nomenclatura de CSS bastante usada no front end. Conheça 6 vantagens de usar BEM ao escrever CSS.
Source Maps em produção?
Source Maps são muito bem vindos em ambientes de desenvolvimento para pré-processadores CSS. Mas você já tinha pensando em source maps em produção?
O macete para unidades de viewport em mobile
O macete para unidades de viewport em mobile para conseguir 100vh real na tela!
Você deve saber isso sobre unidades de viewport
Existe um problema em definir a altura de um elemento em 100vh em navegadores móveis ao posicionar algo no bottom. Veja algumas considerações sobre isso.
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.
Vulnerabilidades de segurança CSS
Já tinha parado para pensar que pode haver vulnerabilidades de segurança CSS? Veja neste artigo alguns exemplos possíveis.
4 Layouts mais comuns com CSS Grid
Veja como podem ser feitos com CSS Grid alguns dos layouts mais comuns de sites que é possível encontrar pela Web.
9 dicas básicas de web design responsivo
Web design responsivo já surgiu trazendo novas questões e desafios. Conheça 9 dicas básicas de web design responsivo para ajudar.
CSS Grid intrinsecamente responsiva com minmax() e min()
Já ouviu falar de intrinsic web design? Veja como é possível fazer CSS Grid intrinsecamente responsiva de maneira (relativamente) fácil!
dpw expo #31 – Page Transitions, Hopscotch, Agile CSS Framework
Page Transitions, uma coleção de transições de página; Hopscotch, para fazer tour pelo site e; Agile CSS, framework CSS levíssimo otimizado para SEO.
dpw expo #30 – collectorium, perfundo, npkill
collectorium, para fazer abas com CSS puro; perfundo, para criar lightboxes com CSS puro e; npkill, para deletar diretórios node_modules inúteis.
CSS e o Contexto de Formatação de Bloco (Block Formatting Context)
Conheça Block Formatting Context de CSS, como ele pode impactar em layouts e, se bem usado, até ajudar a alcançar determinados resultados.
dpw expo #28 – simplePARALLAX, Gitfolio, CSS Border Animations
simplePARALLAX, para efeitos parallax variados; Gitfolio, para gerar um portfolio a partir de seu GitHub e; CSS Border Animations, exemplos de animação CSS.
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!
CSS Grid: o jeito certo
Para se dar bem em CSS Grid, use nomes ao invés de números; use fr como unidade flexível; não use um grid system. Quer saber mais? Então vem com a gente!
dpw expo #24 – Animista, Static Site Boilerplate, Humanize Duration
Animista, para animações CSS; Static Site Boilerplate, workflow completo para sites estáticos e; Humanize Duration, JS que converte para milissegundos.
A mentalidade CSS
Veja dicas para auxiliar a formar sua mentalidade CSS e ajudar a chegada do seu momento “Aha!”, em que finalmente a ficha do CSS vai cair!
dpw expo #21 – freezeframe.js, Spotlight.js, Microjs
freezeframe.js, que controla gifs animados; Spotlight.js, um novo modal/galeria que está chegando nas webs e; Microjs, buscador de recursos JavaScript.
Como criar templates com CSS Grid
CSS Grid é o primeiro sistema de layout efetivo para a Web. Neste artigo, veja como criar templates com CSS Grid.
dpw expo #20 – Transfonter, Specificity Calculator, ms
Transfonter, conversor de fonte para @font-face; Specificity Calculator, para cálculo de especificidade CSS e; ms, que converte tempo para milissegundos.
font-display: controle de exibição de fontes para ajuste em performance
Conheça font-display, a nova propriedade CSS font face para ajuste fino de carregamento/exibição de fontes para aprimoramento da performance em sites!
Flexbox: como passar para a próxima linha fácil
Quebrar linha com Flexbox às vezes pode ser um desafio… Leia o artigo e conheça uma técnica simples para quebra de linha com Flexbox.
Como detectar touch com CSS puro
Como identificar touch com CSS puro é uma questão antiga no mundo webdev. Leia este artigo e saiba mais sobre como Interaction Media Features podem ajudar.
Planejamento com imagens responsivas
Aprenda a fazer um planejamento com imagens responsivas através de técnicas como CSS Grid, direção de arte e resolution switching.
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.
Combinação de seletores CSS
Saber fazer combinação de seletores CSS é importante para se formar uma regra CSS eficaz. Veja maneiras de se fazer combinações de seletores e não erre mais!
Variáveis CSS: um guia prático
Guia prático sobre variáveis CSS, mostrando suas principais vantagens, exemplos, formas de uso, macetes e interações com outras tecnologias.
Hifenização de CSS (CSS hyphenation) em 2019
Saiba como está o suporte à hifenização de CSS (CSS hyphenation) nos principais browsers em 2019 e como é possível ter controle sobre hifens em textos.
Como encontrar CSS morto e otimizar estilos
Conheça uma técnica simples e de baixíssimo custo para identificar CSS morto e otimizar o código e performance de projetos web. Você vai se surpreender!
Diquinhas marotas de CSS Grid (parte 2)
Último artigo da série com dicas e macetes (muitas vezes) não tão óbvios sobre CSS Grid para aprimorar as habilidades em layouts para web.
O poder de flex-grow em Flexbox
Conheça uma maneira de usar flex-grow, uma das propriedades de Flexbox, para a solução de um problema comum de front-end.
CSS Blocks: introdução à API
Veja neste artigo uma introdução à API de CSS Blocks e comece a entender porque este é um dos melhores compiladores CSS da atualidade.
LinkedIn anuncia CSS Blocks, o novo otimizador de CSS
Saiba mais sobre CSS Blocks, o novo projeto open source da LinkedIn de um otimizador CSS que promete contribuir muito para o desenvolvimento front-end.
Diquinhas marotas de CSS Grid (parte 1)
Conheça dicas e macetes (muitas vezes) não tão óbvios sobre CSS Grid e aprimore suas habilidades no melhor que o front-end tem a oferecer para layouts.
A maneira 100% correta de fazer breakpoints em CSS
Depois de anos usando breakpoints, será que a maioria dos desenvolvedores front-end realmente já pararam para pensar se estão fazendo do jeito certo?
Porque CSS Grid é melhor que Bootstrap para criar layouts
Com o advento de CSS Grid, o framework front-end Bootstrap pode não ser mais tão necessário… Saiba mais sobre os poderes de CSS Grid para layouts.
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!
16 dicas de Sass para facilitar sua vida (parte 1)
Conheça dicas Sass que podem mudar sua maneira de usar o melhor pré-processador CSS da atualidade
Motion UI: 4 formas de usar animação funcional
Interfaces animadas/Motion UI são ponto imprescindível para UX. Conheça 4 formas de usar animação funcional em projetos web.
Você não precisa de um framework CSS Grid
Com o advento de CSS Grid Layout, não demorou muito para surgirem frameworks de Grid. Mas há considerações importantes a serem feitas.
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.
Desmistificando o CSS crítico “acima da borda”
Usar CSS crítico inline “acima da borda” é uma técnica infalível? Leia mais para saber que a melhor resposta para dilemas web continua sendo “depende”.
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.
UX em validação de formulários com HTML e CSS
Conheça técnicas simples de HTML e CSS que podem incrementar (e muito!) a UX em validação de formulários.
Livro “CSS Eficiente”
O livro “CSS Eficiente” traz conceitos imprescindíveis ao dia-a-dia e apresenta técnicas para construir uma Arquitetura CSS profissional.
Imagens responsivas com srcset e sizes
Conheça mais sobre srcset e sizes, seus novos amigos na hora de implementar imagens responsivas
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.
Unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex, ch
Conheças as unidades de CSS moderno (rem, vh, vw, vmin, vmax, ex, ch) e saiba como e quando aplicá-las no CSS ao criar sites.
Pré-processadores CSS e Chrome DevTools
Aprenda como usar o potencial máximo da DevTools ao trabalhar com pré-processadores CSS.
UIkit: framework front-end modular responsivo
UIkit é um framework responsivo modular de front-end projetado para ser leve e simples de se usar. Veja mais informações e conheça seus componentes.
Webshims Lib: Polyfills de recursos de HTML5 e CSS3
Conheça a Webshims Lib e saiba como ter polyfills de recursos de HTML5 e CSS3 carregados sob demanda!
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!
Como melhorar a performance do site limpando HTML, CSS e imagens
Aprenda como melhorar a performance e tempo de carregamento do site limpando HTML, CSS e imagens e fazendo um bom planejamento de recursos.
Escrevendo CSS eficiente
Escrever CSS performático e de qualidade é algo que nem todos desenvolvedores front-end sabem fazer. Se você se encaixa neste grupo, leia o artigo!
Usando Modernizr para detectar features de HTML5 e CSS3
Conheça e aprenda a usar Modernizr, biblioteca JavaScript que permite detectar features de HTML5 e CSS3 do navegador e prover soluções, caso necessário.
Não use IDs como seletores CSS
À primeira vista, pode parecer estranho não usar IDs como seletores em CSS, mas, através argumentos bem embasados, entenda porque isso é verdade.
URLs longas apresentadas corretamente com CSS
Apresentar corretamente URLs e outros textos longos é essencial para um layout consistente e de qualidade. Saiba como fazer isso lendo este artigo!
Diferenças entre IDs e Classes
Aprenda a diferença entre IDs e classes, usados em XHTML, CSS e javascript. Saber a diferença entre classes e IDs evita erros básicos e permite desenvolver sites melhores