Algumas coisas que você deve saber ao trabalhar com 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?

Curso “Flexbox: o guia completo”

Aprenda Flexbox e domine uma das melhores tecnologias CSS para criação de layouts modernos e elementos de UI responsivos!

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!

Minicurso grátis “Sass placeholders: o jeito certo”

Saiba mais sobre o minicurso grátis para aprender a usar placeholder selectors do jeito certo e construir uma biblioteca de utilitários CSS.

Curso “CSS Grid: o sistema definitivo de layouts”

Aprenda CSS Grid Layout e desenvolva layouts de maneira surpreendente!

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

Curso “CSS: um passo adiante”

Eleve seu CSS ao próximo nível com CSSOO, SMACSS, BEM, Pré-processadores CSS, Namespaces CSS e Task Runners!

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: 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 CSS3

Saiba como é possível usar os incríveis filtros CSS3 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

CSS float: considerações, dicas e macetes para bons layouts na web

Aprenda sobre CSS float e veja dicas e macetes para fazer bons layouts para a web usando tableless

E-book com 10 dicas para montar seu portfolio altamente eficiente e conseguir muito mais clientes e projetos!

Download GRÁTIS