Escrito por: David Gilbertson

Pelos próximos minutos, quero que você esqueça o CSS, esqueça o desenvolvimento para a web e esqueça as interfaces digitais de usuário.

À medida que você esquece essas coisas, quero que permita sua mente vagar. Voltar no tempo. De volta à sua juventude. De volta ao seu primeiro dia de escola.

Era um tempo mais simples, quando tudo com o que você precisava se preocupar era com desenhar formas e manter sua incontinência sob controle.

Dê uma olhada nos pontos acima. Percebe como alguns deles estão agrupados e outros estão espalhados? O que eu quero que você faça é dividi-los em cinco grupos para mim, da maneira que achar melhor.

Vá em frente. Após verificar que ninguém está olhando, desenhe um círculo ao redor de cada um dos cinco grupos com seu dedinho infantil.

Você, provavelmente, chegou a algo semelhante ao que está abaixo, certo? Seja o que for que você fizer, não me diga que rolou a página sem fazer o exercício. 😒

Claro, aqueles dois pontos à direita poderiam ir para qualquer um dos lados. Se você os agrupou juntos, tudo bem, eu acho. Dizem que não há resposta errada, mas eu nunca estive errado, então nunca estive do lado receptor desse ditado específico.

Antes de continuar, você desenhou algo assim?

Provavelmente, não, certo?

É basicamente isso que você estaria fazendo se definisse seus breakpoints em posições correspondentes à largura exata dos dispositivos populares (320px, 768px, 1024px).

Já ouviu ou disse algo do tipo?

"O breakpoint médio vai até 768px, ou inclui 768? Entendi... e isso é o modo paisagem do iPad, ou 'grande'? Ah, grande é de 768px e acima. Entendi. E pequeno é 320px? O que é essa faixa de 0 a 319px? Um breakpoint para formigas?"

Eu poderia seguir em frente e mostrar os breakpoints corretos e deixar por isso mesmo, mas acho muito curioso que o método acima ("agrupamento bobo") seja tão disseminado.

Por que isso acontece?

Acho que a resposta para esse problema, como tantos outros problemas, se resume a terminologia desalinhada.

Acho que confundimos "limites" e "faixas" em nossas discussões e implementações de breakpoints.

Me diga, se você faz breakpoints no Sass, você tem uma variável chamada $large que é, digamos, 768px?

É o limite inferior da faixa que você chama de grande, ou o limite superior? Se for o inferior, então você não deve ter $small porque o valor deste deveria ser 0, certo?

Se for o limite superior, então como você definiria um breakpoint $extra-large? Deve ser uma consulta de mídia com um min-width de $medium, certo?

Se você estiver se referindo apenas a um limite quando diz grande, então teremos confusão mais tarde porque uma consulta de mídia é sempre uma faixa.

Essa situação é uma bagunça e estamos perdendo tempo pensando nisso. Então, tenho três sugestões:

1. Obtenha seus breakpoints corretamente
2. Nomeie suas faixas de maneira sensata
3. Seja declarativo

Dica nº 1: obtenha seus breakpoints corretamente

Então, quais são os breakpoints corretos?

Seu "eu" de jardim de infância já desenhou os círculos. Eu apenas os transformarei em retângulos para você.

Aqueles pontos com os quais seu "eu" jovem se divertiu representam na verdade os 14 tamanhos de tela mais comuns:

Então, podemos fazer uma imagem bonita que permita o fácil fluxo de palavras entre as pessoas vestidas como empresários, designers, desenvolvedores e testadores.

Dica nº 2: nomeie suas faixas de maneira sensata

Claro, você poderia nomear seus breakpoints de papai urso e bebê urso, se quiser. Se eu for me sentar com um designer, porém, e discutir como o site deve parecer em dispositivos diferentes, quero que seja o mais rápido possível. Se nomear um tamanho de tablet em retrato facilita isso, então ótimo. Aliás, até perdoaria você por chamar de "iPad em retrato".

O CSS do seu site, porém, tem uma vida útil de cerca de três anos (a menos que seja o Gmail). O iPad está conosco há o dobro desse tempo e ainda não foi destronado. Sabemos que a Apple não faz mais novos produtos, eles apenas removem coisas dos existentes (botões, buracos etc).

Então, o 1024 x 768 veio para ficar, pessoal. Vamos não enterrar nossas cabeças na areia. Fato curioso: avestruzes não vivem em cidades porque não há areia e, portanto, nenhum lugar para se esconder dos predadores.

Conclusão: a comunicação é importante. Não se desligue propositalmente de vocabulário útil.

Dica nº 3: seja declarativo

Eu sei, eu sei, essa palavra "declarativo" de novo. Vou colocar de outra maneira: seu CSS deve definir o que ele quer que aconteça, não como deve acontecer. O "como" deve ficar escondido em algum tipo de mixin.

Como discutido anteriormente, parte da confusão em torno dos breakpoints é que as variáveis que definem um limite de um intervalo são usadas como o nome do intervalo. $large: 600px simplesmente não faz sentido se large é um intervalo. É o mesmo que dizer var coordenadas = 4;.

Podemos esconder esses detalhes dentro de um mixin em vez de expô-los para serem usados no código. Podemos fazer melhor e não usar variáveis de todo.

No início, eu fiz o trecho abaixo como um exemplo simplificado. Eu realmente acho que cobre todos os aspectos. Para vê-lo em ação, veja este pen. Estou usando Sass porque não consigo imaginar construir um site sem ele. A lógica se aplica ao CSS ou Less da mesma maneira.

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}

// uso
.my-box {
  padding: 10px;

  @include for-desktop-up {
    padding: 20px;
  }
}

A ambiguidade gera confusão.

Uma crítica óbvia pode ser que isso não lida com media queries personalizadas. Bem, boas notícias, pessoal. Se você quiser uma media query personalizada, escreva uma media query personalizada. Na prática, se eu precisasse de mais complexidade do que o acima, cortaria minhas perdas e correria para o abraço amoroso do kit de ferramentas Susy.

Outra crítica pode ser que eu tenho oito mixins aqui. Com certeza um único mixin seria a decisão mais sensata, para então passar o tamanho necessário, assim:

@mixin for-size($size) {
  @if $size == phone-only {
    @media (max-width: 599px) { @content; }
  } @else if $size == tablet-portrait-up {
    @media (min-width: 600px) { @content; }
  } @else if $size == tablet-landscape-up {
    @media (min-width: 900px) { @content; }
  } @else if $size == desktop-up {
    @media (min-width: 1200px) { @content; }
  } @else if $size == big-desktop-up {
    @media (min-width: 1800px) { @content; }
  }
}

// uso
.my-box {
  padding: 10px;

  @include for-size(desktop-up) {
    padding: 20px;
  }
}

Claro, funciona. Porém, você não terá erros em tempo de compilação se passar um nome não suportado. Passar uma variável sass significa expor 8 variáveis só para passar para um switch em um mixin.

Sem mencionar que a sintaxe @include for-desktop-up {...} é muito mais bonita do que @include for-size(desktop-up) {...}.

Uma crítica de ambos esses trechos de código pode ser que estou digitando 900px duas vezes, e também 899px. Certamente eu deveria apenas usar variáveis e subtrair 1 quando necessário.

Se você quiser fazer isso, sinta-se à vontade, mas há duas razões pelas quais eu não o faria:

1. Estas não são coisas que mudam frequentemente. Também não são números que são usados em outro lugar na base de código. Nenhum problema é causado pelo fato de que eles não são variáveis — a menos que você queira expor seus pontos de interrupção Sass para um script que injeta um objeto JS com essas variáveis na sua página.
2. A sintaxe é horrível quando você quer transformar números em strings com Sass. Abaixo está o preço que você paga por acreditar que repetir um número duas vezes é o pior de todos os males:

@mixin for-size($range) {
  $phone-upper-boundary: 600px;
  $tablet-portrait-upper-boundary: 900px;
  $tablet-landscape-upper-boundary: 1200px;
  $desktop-upper-boundary: 1800px;

  @if $range == phone-only {
    @media (max-width: #{$phone-upper-boundary - 1}) { @content; }
  } @else if $range == tablet-portrait-up {
    @media (min-width: $phone-upper-boundary) { @content; }
  } @else if $range == tablet-landscape-up {
    @media (min-width: $tablet-portrait-upper-boundary) { @content; }
  } @else if $range == desktop-up {
    @media (min-width: $tablet-landscape-upper-boundary) { @content; }
  } @else if $range == big-desktop-up {
    @media (min-width: $desktop-upper-boundary) { @content; }
  }
}

// uso
.my-box {
  padding: 10px;

  @include for-size(desktop-up) {
    padding: 20px;
  }
}

Ah, e já que adotei um tom de desabafo nos últimos parágrafos... eu sinto pena do tolo que faz algo mágico como armazenar breakpoints em uma lista do Sass e iterar sobre eles para gerar consultas de mídia, ou algo igualmente ridículo que futuros desenvolvedores terão dificuldade em decifrar.

Finalmente, você pode estar pensando "eu não deveria estar baseando meus pontos de interrupção no conteúdo, e não nos dispositivos?". Bem, estou maravilhado que você tenha chegado até aqui e a resposta é sim... para sites com um layout único. Ou se você tiver múltiplos layouts e estiver feliz em ter um conjunto diferente de breakpoints para cada layout. Ah, e também se o design do seu site não mudar com frequência, ou se você estiver feliz em atualizar seus breakpoints quando seus designs forem atualizados, já que você vai querer mantê-los baseados no conteúdo, certo?

Para sites complexos, a vida é muito mais fácil se você escolher alguns pontos de interrupção para usar em todo o site.

Terminamos! Este artigo não foi tão cheio de bichinhos quanto eu gostaria que fosse – deixe-me ver se consigo pensar em uma desculpa para incluir alguns...

Ah, já sei!

Dicas bônus para o desenvolvimento de breakpoints

1. Se você precisar experimentar com breakpoints de CSS para tamanhos de tela maiores do que o monitor que você está usando, utilize o modo 'responsivo' nas ferramentas de desenvolvedor do Chrome e digite qualquer tamanho gigante que você quiser.
2. A barra azul mostra media queries com "largura máxima" (max-width), a barra laranja mostra media queries com "largura mínima" (min-width), e a barra verde mostra media queries com tanto uma largura mínima quanto uma máxima.
3. Clicar em uma media query ajusta a largura da tela para aquela largura. Se você clicar em uma media query verde mais de uma vez, ela alterna entre as larguras máxima e mínima.
4. Clique com o botão direito em uma media query na barra de media queries para ir à definição dessa regra no CSS.

Ei, agradeço a leitura! Compartilhe o artigo, se acha que eu mereço, ou deixe ele no esquecimento, como ficará minha autoestima se você não o compartilhar. 😳

Em HTML, a fonte que você escolhe desempenhará um papel importante na aparência de suas páginas da web.

Você pode escolher a cor, o peso, o tamanho da fonte e assim por diante. Todas essas características fazem com que seus sites e aplicações para a web fiquem melhores e mais apresentáveis para o usuário.

Com a propriedade font-size no CSS, você pode mudar o tamanho do texto que está na página da web. Você pode usar essa propriedade em qualquer tipo de CSS que estiver escrevendo – externo, interno ou em linha.

Neste artigo, eu vou mostrar como mudar o tamanho do texto com a propriedade font-size no CSS em linha.

O que é CSS em linha?

CSS em linha (em inglês, inline) é uma das três maneiras diferentes que você pode usar para estilizar qualquer elemento do HTML.

Em vez de direcionar o elemento com um atributo de classe ou id, ou o próprio elemento como o seletor e estilizá-lo dessa maneira, você coloca todos os estilos do CSS na tag de abertura do elemento.

Além disso, você precisa garantir que todas as propriedades e valores dos estilos estejam dentro do atributo style. Esse atributo style é um dos inúmeros atributos aceitos por todas as tags do HTML.

No exemplo abaixo, eu mudo a cor do fundo do texto para crimson, a cor do texto para #f1f1f1 (cinza-claro) e o peso da fonte para bold com CSS em linha.

<p style="background-color: crimson; color: #f1f1f1; font-weight: bold">
      Hello Campers...
</p>

A propósito, meu navegador está com zoom de 400%, por isso tudo aparece tão grande. Eu não apliquei nenhum estilo adicional para conseguir isso. 🙂

Como mudar o tamanho do texto usando CSS em linha

Para mudar o tamanho do seu texto com CSS em linha, você precisa fazer isso com o atributo style. Você digita a propriedade font-size e, então, atribui a ela um valor.

Existem valores embutidos como large, larger, medium, small, x-large e assim por diante:

No trecho de código abaixo, eu mudo o tamanho do texto "Hello Campers…" para x-large, um dos valores embutidos da propriedade font-size.

<p style="font-size: x-large">Hello Campers...</p>

Você também pode definir o valor da propriedade font-size usando um número com qualquer unidade, como pixels (px), rem ou em.

É melhor usar valores numerados porque eles dão mais liberdade para escolher qualquer tamanho de fonte que você quiser.

No trecho de código abaixo, eu mudei o tamanho do texto para 30px com CSS em linha:

<p style="font-size: 30px">Hello Campers...</p>

Conclusão

Neste artigo, você aprendeu como mudar o tamanho do texto com CSS em linha e a propriedade font-size. Você também viu como pode atribuir valores à propriedade font-size.

Apenas um aviso: o CSS em linha é ótimo para estilizar, mas você não deve depender muito dele, pois dificulta a leitura do seu HTML, especialmente se você estiver trabalhando em equipe. Você não quer ser o único capaz de ler seu próprio código.

Esteja ciente de que o CSS em linha também sobrescreve qualquer estilização definida com estilo interno ou externo. Você deve usar estilo externo ou estilo interno, pois eles separam seus códigos HTML e CSS, o que é melhor para a legibilidade.

Ao atribuir valores à propriedade font-size, é melhor atribuir os valores em unidades rem ou em em vez de px, por exemplo. Isso porque, quando você usa rem, o navegador será capaz de fazer ajustes no tamanho da fonte conforme o usuário aproxima ou afasta o texto usando o zoom, o que não acontece quando você usa px.

Agradecemos pela leitura! Siga programando! 😀

Esta ficha informativa abrangente do flexbox para o CSS tratará de tudo o que você precisa saber para começar a usar o flexbox em seus projetos para a web.

O layout do flexbox permite que você faça a formatação do HTML facilmente. O flexbox simplifica o alinhamento de itens, tanto na vertical como na horizontal, usando linhas (em inglês, rows) e colunas. Os itens se ajustarão a tamanhos diferentes com flexibilidade para preencher o espaço. Isso torna mais fácil criar um design responsivo.

O flexbox é ótimo para o uso  em um layout mais geral em seu site ou aplicação para a web. Ele é fácil de aprender, tem o suporte de todos os navegadores mais modernos e não leva muito tempo para que você aprenda o básico. Ao final deste guia, você estará pronto para começar a usar o flexbox em seus projetos para a web.

O artigo inclui gifs animados feitos por Scott Domes, que ajudarão você a entender e visualizar o flexbox com maior facilidade.

Todas as propriedades do flexbox

Aqui temos uma lista de todas as propriedades do flexbox que podem ser usadas para posicionar elementos no CSS. Em seguida, veremos como elas funcionam.

O CSS que pode ser aplicado ao contêiner

display: flexbox | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <'flex-direction'> || <'flex-wrap'>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

O CSS que pode ser aplicado aos itens/elementos no contâiner

order: <número inteiro>;
flex-grow: <número>; /* padrão 0 */
flex-shrink: <número>; /* padrão 1 */
flex-basis: <comprimento> | auto; /* padrão auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;

Terminologia

Antes de aprender o que fazem as propriedades do flexbox, é importante entender a terminologia associada a ele. Aqui temos as definições de termos-chave do flexbox, vindas diretamente da especificação oficial do W3C (em inglês) para o flexbox.

• main-axis: esse é o eixo principal do contêiner flex. É o eixo primário, ao longo do qual os itens flex são dispostos. A direção tem como base a propriedade flex-direction.
• main-start | main-end: os itens flex são colocados no contêiner começando do lado de main-start (início principal) e indo até o lado de main-end (final principal).
• main size: o comprimento ou altura de um contêiner flex ou de um item flex, o que estiver na dimensão principal (a do eixo principal), é o comprimento principal (main size) de uma caixa. Sua propriedade main-size é, portanto, sua propriedade de largura (width) ou de altura (height), o que estiver na dimensão principal.
• cross axis: o eixo perpendicular ao eixo principal é chamado de cross axis. Sua direção depende da direção do eixo principal.
• cross-start | cross-end: as linhas do flex são preenchidas com itens e colocadas no contêiner começando do lado do cross-start do contêiner flex e indo na direção do lado do cross-end.
• cross size: a largura ou altura de um item flex, o que estiver na dimensão do eixo perpendicular, é o cross size de um item. A propriedade cross-size é a largura (width) ou a altura (height) do item, o que estiver na dimensão perpendicular.

Display flex no CSS

display: flex informa ao navegador que você "deseja usar o flexbox com aquele contêiner".

Um elemento div tem como padrão display:block. Um elemento com essa configuração para a propriedade display toma a largura total de uma linha onde se encontra. Aqui temos um exemplo de quatro divs coloridas dentro de uma div 'pai' com a configuração padrão de display:

Para usar o flexbox em uma seção de sua página, primeiramente, converta o contêiner 'pai' em um contêiner flex, adicionando display: flex; ao CSS do contêiner 'pai'.

Isso inicializará esse contêiner como um contêiner flex e aplicará algumas propriedades flex padrão.

flex-direction

flex-direction (a direção do flex) permite que você controle como os itens são exibidos no contêiner. Você deseja que eles sejam exibidos da esquerda para a direita, da direita para esquerda, de cima para baixo ou de baixo para cima? Você pode configurar isso facilmente definindo flex-direction no contêiner.

O arranjo padrão após a aplicação de display: flex é a de os itens ficarem dispostos ao longo do eixo principal e da esquerda para a direita. A animação abaixo mostra o que acontece quando flex-direction: column é adicionado ao elemento do contêiner.

Você também pode definir flex-direction como row-reverse ou column-reverse.

justify-content

justify-content é uma propriedade para alinhar os itens ao longo do eixo principal (confira o diagrama de terminologia acima). Isso pode mudar, dependendo de como o conteúdo é exibido. Essa propriedade permite que preenchamos qualquer espaço vazio nas linhas e que possamos definir como queremos 'justificá-la'.

Aqui estão as opções mais comuns usadas para justificar o conteúdo: flex-start | flex-end | center | space-between | space-around.

Essas são algumas das diferentes opções:

space-between distribui os itens de modo que o primeiro item fica 'grudado' ao início e o último fica 'grudado' ao final. space-around é semelhante, mas os itens têm um espaço equivalente a metade do tamanho de ambos os lados.

align-items

align-items nos permite alinhar os itens ao longo do eixo perpendicular (veja o diagrama de terminologia acima). Isso permite que o conteúdo seja posicionado de vários modos diferentes, combinando justify-content e align-items.

Estas são as opções de uso mais comuns de align-items: flex-start | flex-end | center | baseline | stretch

Para stretch funcionar da maneira esperada, a altura dos elementos deve ser definida como auto em vez de se especificar uma altura qualquer.

A animação a seguir mostra a aparência de cada uma das opções:

Agora, usaremos justify-content e align-items. Abaixo, veremos a diferença entre os eixos principal e perpendicular (main axis e cross axis, respectivamente).

align-self

align-self permite que você ajuste o alinhamento de um único item.

Essa propriedade recebe os mesmos valores de align-items.

Na animação a seguir, a div 'pai' tem como CSS align-items: center e flex-direction: row. As primeiras duas caixas percorrem diferentes valores de align-self.

flex-wrap

O flexbox, por padrão, tentará ajustar todos os elementos em uma única linha. No entanto, você pode mudar isso com a propriedade flex-wrap. Existem três valores que você pode usar para determinar quando os elementos passam para outra linha.

O valor padrão é flex-wrap: nowrap. Ele fará com que tudo fique em uma única linha, da esquerda para a direita.

flex-wrap: wrap  permitirá que os itens saltem para a próxima linha se não houver espaço suficiente na linha anterior. Os itens ainda serão exibidos da esquerda para a direita.

flex-wrap: wrap-reverse também permitirá que os itens saltem para a próxima linha, mas, desta vez, os itens serão exibidos da direita para a esquerda.

flex-flow

flex-flow combina o uso de flex-wrap e flex-direction em uma única propriedade. Ele é usado, primeiramente, configurando a direção e, depois, o a passagem ou não para a outra linha. Exemplo: flex-flow: column wrap;

align-content

align-content é usado para alinhar itens com diversas linhas. Essa propriedade server para alinhar no eixo perpendicular e não terá efeito se o conteúdo estiver em uma única linha.

Estas são as opções de valores: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Centralizar na vertical com o flexbox

Se você quiser centralizar itens na vertical para todo o conteúdo que estiver dentro de um elemento 'pai', use align-items. Este é o código a ser usado:

.elemento-pai {
    display: flex;
    align-items: center;
}

Games e aplicações

Se você quiser praticar o uso de flexbox, experimente estes jogos e aplicações abaixo. Eles ajudarão você a dominar o flexbox.

• Flexbox Defense é um jogo da web onde você aprende flexbox ao tentar evitar que inimigos atravessem suas defesas.
• Flexbox Froggy é um jogo onde você ajuda um sapinho e seus amigos a escreverem CSS.
• Flexyboxes é uma aplicação que permite que você veja exemplos de código e altere parâmetros para ver como o flexbox funciona visualmente.
• Flexbox Patterns é um site da web que mostra exemplos de uso do flexbox.

Conclusão

Tratamos da maioria das propriedades mais comuns do flexbox para o CSS. Seu próximo passo é: praticar! Tente criar alguns projetos com o flexbox para se acostumar com o funcionamento dele.

Boa programação para você! 😉

Escrito por: Veronika Ivhed

Eu sempre tive dificuldade com a propriedade z-index do CSS (texto em inglês). Parecia muito fácil inicialmente. Elementos com um valor de z-index maior são exibidos na frente daqueles com um valor de z-index menor. Ainda assim, diversas vezes, acabei em situações onde parecia que o valor de z-index não tinha efeito algum.

Decidi que estava na hora de acabar com a tentativa e erro com o z-index e que eu queria entendê-lo melhor. Espero que este artigo ajude você para que nunca mais você precise se perguntar o motivo pelo qual o z-index não estava fazendo aquilo que você esperava que fizesse.

Ordem de sobreposição padrão

Vamos, primeiro, mencionar a ordem padrão que o navegador utiliza para sobrepor elementos quando a propriedade z-index não está aplicada:

1. Elemento raiz (o elemento <html>)
2. Elementos não posicionados na ordem em que são definidos
3. Elementos posicionados na ordem em que são definidos

Um elemento não posicionado é um elemento com o valor padrão da propriedade position, o valor static. Um elemento posicionado é um elemento com qualquer outro valor de position. Exemplos de outros valores são: absolute, relative, sticky e fixed.

HTML:

<div class="pink">
  <div class="orange"></div>
</div>
<div class="blue"></div>
<div class="green"></div>

CSS:

/* Este é o único CSS relevante para o exemplo. Para ver o CSS completo, confira os links abaixo das imagens. */

.blue, .pink, .orange {
  position: absolute;
}

Definimos a caixa verde por último no documento. Ainda assim, ela aparece atrás dos outros porque ele não está posicionado.

Sobreposição com z-index

Se quisermos alterar a ordem de sobreposição desses elementos, podemos usar a propriedade z-index. Um elemento com um valor mais alto de z-index será exibido na frente de um elemento com um valor de z-index mais baixo. Algo que é importante observar é o fato de que z-index funciona apenas com elementos posicionados.

.blue, .pink, .orange {
  position: absolute;
}

.blue {
  z-index: 2;
}

.orange {
  z-index: 3;
}

.green {
  z-index: 100; // não tem efeito, já que a caixa verde não está posicionada
}

A caixa laranja com um valor maior de z-index é exibida na frente da caixa azul.

Contexto de sobreposição

Digamos que queremos adicionar outra caixa posicionada no layout que queremos posicionar atrás da caixa rosa. Atualizamos nosso código assim:

HTML:

<div class=”pink”>
  <div class=”orange”></div>
</div>
<div class=”blue”></div>
<div class=”purple”></div>
<div class=”green”></div>

CSS:

.blue, .pink, .orange, .purple {
  position: absolute;
}

.purple {
  z-index: 0;
}

.pink {
  z-index: 1;
}

.blue {
  z-index: 2;
}

.orange {
  z-index: 3;
}

.green {
  z-index: 100;
}

Nossa caixa rosa é exibida na frente da caixa roxa como era esperado, mas o que houve com a caixa laranja? Por que ela se encontra, de repente, atrás da caixa azul, embora tenha um valor de z-index maior? Isso ocorre porque adicionar um valor de z-index a um elemento gera o que chamamos de contexto de sobreposição (texto em inglês).

A caixa rosa tem um valor de z-index diferente de auto, o que gera um novo contexto de sobreposição. O fato de que ele forma um contexto de sobreposição afeta o modo como seus elementos filhos são exibidos.

É possível alterar a ordem de sobreposição dos elementos filhos da caixa rosa. Porém, o z-index deles somente tem um significado dentro daquele contexto de sobreposição. Isso significa que não conseguiremos mover a caixa laranja para frente da caixa azul, pois eles já não estão dentro do mesmo contexto de sobreposição.

Se quisermos que a caixa azul e a caixa laranja sejam parte do mesmo contexto de sobreposição, podemos definir a caixa azul como um elemento filho da caixa rosa. Isso fará com que a caixa azul apareça atrás da caixa laranja.

<div class="pink">
  <div class="orange"></div>
  <div class="blue"></div>
</div>
<div class="purple"></div>
<div class="green"></div>

Os contextos de sobreposição não são formados apenas quando aplicamos z-index a um elemento. Há várias outras propriedades (texto em inglês) que fazem com que elementos criem contextos de sobreposição. Alguns exemplos disso são filter, opacity e transform.

Vamos voltar ao nosso exemplo anterior. A caixa azul está novamente no mesmo nível que a caixa rosa. Desta vez, em vez de adicionar um z-index à caixa rosa, vamos aplicar um filter (texto em inglês) a ela.

HTML:

<div class="pink">
  <div class="orange"></div>
</div>
<div class="blue"></div>
<div class="green"></div>

CSS:

.blue, .pink, .orange {
  position: absolute;
}

.pink {
  filter: hue-rotate(20deg);
}

.blue {
  z-index: 2;
}

.orange {
  z-index: 3;
}

.green {
  z-index: 100;
}

A caixa laranja ainda tem um valor de z-index maior do que a caixa azul, mas é exibida por trás dela. Isso ocorre porque o valor de filter fez com que a caixa rosa formasse um novo contexto de sobreposição.

Resumo

Ao usar z-index em elementos posicionados, podemos alterar o valor padrão da ordem de sobreposição.

Ao aplicar determinadas propriedades do CSS, um elemento pode formar um contexto de sobreposição. Os valores de z-index somente terão algum significado dentro desse mesmo contexto de sobreposição.

Para mais informações sobre o z-index, recomendo a leitura deste artigo. Ele me deu muita inspiração para escrever este artigo.

Obrigado pela leitura! 🙂

A propriedade content no CSS define o conteúdo de um elemento. Você já deve ter ouvido falar que essa propriedade se aplica somente aos pseudoelementos ::before e ::after. Neste artigo, exploraremos os diversos casos de uso para a propriedade content, incluindo casos para além dos pseudoelementos.

Pré-requisito

Como a maioria dos casos de uso da propriedade content envolve pseudoelementos, sugiro que você esteja familiarizado com o funcionamento dos pseudoelementos ::before e ::after. Abaixo, vemos um ótimo artigo para esclarecer algumas dúvidas:

• Pseudoelementos em CSS – seletores before e after explicados

Valores aceitos

Primeiro, vamos examinar todos os valores aceitos pela propriedade content.

• normal: é o valor padrão. Ele registra como none quando usado com os pseudoelementos.
• none: um pseudoelemento não será gerado.
• <string>: define o conteúdo com a string especificada. A string pode conter sequências de escape do Unicode. Por exemplo, o símbolo para copyright: \\000A9.
• <imagem>: define o conteúdo como sendo uma imagem ou gradiente usando url() ou linear-gradient().
• open-quote | close-quote: define que o conteúdo receba o caractere adequado de aspa referido na propriedade quotes.
• no-open-quote | no-close-quote: remove as aspas do elemento selecionado, mas ainda adiciona ou reduz o nível de aninhamento referido na propriedade quotes.
• attr(*atributo*): define o conteúdo como o valor em string do atributo selecionado dos elementos selecionados.
• counter(): define o conteúdo como o valor de um counter (em português, contador) – geralmente, um número.

String

Um dos exemplos mais básicos seria a adição de conteúdo em strings antes ou depois de um elemento. Neste exemplo, adicionaremos um símbolo de link antes de um link e adicionaremos o URL do link depois dele.

a::before {
	content: "\\1F517 ";
}
a::after {
	content: " (" attr(href) ")";
}

Observe o espaço após o caractere Unicode no pseudoelemento ::before e antes do primeiro parêntese no pseudoelemento ::after. Isso criará um espaço entre eles e o elemento pai.

Como alternativa, é possível adicionar um padding ou uma margin aos pseudoelementos para adicionar uma separação.

Aspas básicas

Com a propriedade content, é possível adicionar aspas antes e/ou após os elementos. Agora, no HTML, temos a tag <q>. Ela também adicionará aspas ao redor do conteúdo. Porém, com a propriedade content, temos mais controle sobre a implementação.

Vejamos um exemplo básico da adição de aspas:

Também é possível fazer isso usando a tag <q>. Talvez, no entanto, queiramos estilizar as aspas de um modo diferente. Vamos, então, adicionar apenas uma aspa de abertura, mas não uma aspa de fechamento. Vamos também estilizar a aspa de abertura.

p {
  position: relative;
  font-size: 3rem;
  margin: 4rem;
}
p::before {
  content: open-quote;
  position: absolute;
  left: -3.5rem;
  top: -2rem;
  font-size: 8rem;
  color: rgba(0, 0, 0, 0.5)
}

O resultado será este:

Aspas avançadas

Também podemos especificar onde não queremos aspas. Por exemplo, você pode estar citando alguém que está citando outra pessoa. Assim, você teria aspas dentro de aspas, o que pode ficar confuso para o leitor.

No CodePen abaixo, estamos usando tags <q> do HTML e, em seguida, especificando quais tags não devem exibir as aspas.

À primeira vista, você pode pensar que devemos apenas remover a tag <q> quando necessário. Porém, especificar onde uma aspa não deve estar ainda aumenta ou diminui o nível de aninhamento referenciado a partir da propriedade quotes.

Para explicar isso, precisamos entender a propriedade quotes. Aqui temos um "array" de caracteres que pode ser usado ao colocar aspas. Veja um exemplo:

q {
  quotes: '“' '”' '‘' '’' '“' '”';
}

Estes são conjuntos de aspas. O primeiro conjunto será usado para o nível superior de aspas. O segundo conjunto será usado para a primeira aspa aninhada. O terceiro conjunto será usado para a segunda aspa aninhada e assim por diante, se houver mais conjuntos incluídos.

Agora que entendemos a propriedade quotes, posso explicar como funcionam as propriedades no-open-quote e no-close-quote.

Para cada nível de aspas, podemos atribuir diferentes conjuntos de caracteres para usar para como aspas.

Veja o exemplo abaixo. Você verá que o segundo nível de aspas é ignorado.

Atributos

Atributos podem ser usados para passar conteúdo do HTML para a propriedade content do CSS. De fato, já usamos isso no exemplo do link, onde usamos o atributo href para incluir a string do URL como parte de nosso conteúdo.

Um caso de uso perfeito para isso é uma dica (tooltip). Você pode adicionar um atributo title a um elemento em HTML para ter uma dica interna simples ao passar o mouse. Para personalizar isso, no entanto, podemos usar um atributo de dados em nossa tag do HTML e, em seguida, usar a propriedade content para adicionar a dica.

Neste exemplo, usamos o atributo data-tooltip do nosso elemento do HTML para passar o valor para a nossa dica. Para o ponteiro da dica, definimos o content como "", já que content é necessário para renderizar um pseudoelemento ::before ou ::after.

Contadores

A função counter() do CSS retorna uma string que representa o valor atual do contador nomeado. No exemplo a seguir, temos uma lista ordenada que adicionaremos conteúdo usando um counter.

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

ol {
  counter-reset: exampleCounter;
}
li {
  counter-increment: exampleCounter;
}
li::after {
  content: "[" counter(exampleCounter) "] == ["
               counter(exampleCounter, upper-roman) "]";
}

Sem entrar em mais detalhes com relação à função counter, primeiro, precisamos iniciar o contador no elemento ol. Podemos nomeá-lo como quisermos. Em seguida, informamos ao contador que aumente em 1 para cada elemento li. Por fim, definimos o content de li::after.

Este é o resultado:

Você pode usar isso para personalizar o conteúdo dentro de cada item de lista que precise de um número correspondente. Também é possível personalizar o próprio item de lista. Por exemplo, você pode remover a numeração padrão e implementar um sistema de numeração personalizado.

Imagens

Imagens e gradientes podem ser usados com a propriedade content. Isso é bastante direto. Aqui temos um exemplo que usa os dois:

Para fins de acessibilidade, há uma opção para adicionar texto alternativo para imagens. Esse recurso, porém, ainda não tem suporte total.

content: url(//unsplash.it/200/200) / "Texto alternativo aqui";

Observação: até o momento em que o texto foi escrito, essa funcionalidade não tinha suporte no Firefox, IE e no Safari. Além disso, gradientes não funcionavam no Firefox.

Além dos pseudoelementos

Sim! Você pode usar a propriedade content fora dos pseudoelementos ::before e ::after. Porém, seu uso é limitado e não totalmente compatível com os navegadores.

O caso de uso mais compatível seria a substituição de um elemento.

<div id='replace'>
  codeSTACKr
</div>

#replace {
  content: url("<https://www.codestackr.com/logo_twoline_light.svg>");
  width: 100%;
}

Observação: substituir elementos não tem suporte do IE.

Conclusão

Na maioria das vezes, você verá content: "" junto dos pseudoelementos ::before e ::after. A propriedade content, no entanto, tem várias aplicações úteis.

O melhor uso, na minha opinião, é para a atualização em massa de elementos. Se quiser adicionar um ícone antes de cada link em seu site, será muito mais fácil adicioná-lo por meio da propriedade content do que adicioná-lo em cada elemento de um documento do HTML.

Obrigado pela leitura!

Obrigado por ler este artigo. Espero que ele tenha ajudado você a entender melhor como a propriedade content funciona no CSS.

Sou o Jesse, e venho do Texas. Confira mais conteúdo meu e me informe se ajudei você de algum modo em sua jornada para se tornar um desenvolvedor para a web.

• Inscreva-se no meu canal no YouTube
• Mande um oi pelo Instagram ou pelo Twitter
• Assine minha newsletter

Seletor before

O seletor ::before do CSS pode ser usado para inserir conteúdo antes do conteúdo dos elementos selecionados. Ele é usado anexando ::before ao seletor do elemento no qual ele agirá.

Aqui temos alguns exemplos:

p::before { 
  content: "* ";
}

span.comentario::before {
  content: "Comentário: ";
  color: blue;
}

<p> Ao infinito e além!</p>
<p> Sou o Buzz Lightyear. Eu venho em paz.</p>

<span class="comentario">Que a Força esteja com você.</span>
<br/>
<span> Faça. Ou não faça. Tentativa não há.</span>

No exemplo acima, anexamos um asterisco e um espaço antes de cada elemento de parágrafo da página. Além disso, anexamos "Comentário: " em azul antes de casa elemento span que tenha a classe comentario.

Seletor after

O seletor ::after do CSS pode ser usado para inserir conteúdo após do conteúdo dos elementos selecionados.  Ele é usado anexando ::after ao seletor do elemento no qual ele agirá.

Alguns exemplos:

.buzz::after { 
  content: " - Buzz Lightyear";
  color: blue;
}

.yoda::after { 
  content: " - Yoda";
  color: green;
}

<p class="buzz"> Ao infinito e além!</p>
<p class="yoda"> Faça. Ou não faça. Tentativa não há.</p>

No exemplo acima " - Buzz Lightyear" em azul é anexado ao elemento com a classe buzz. Também anexamos " - Yoda" em verde ao elemento com a classe yoda.

O uso de dois pontos uma ou duas vezes

Existe alguma discussão com relação ao modo certo de se usar os pseudoelementos – no estilo antigo, com dois pontos (:before), usado nas especificações do CSS 1 e 2, em contraste com a recomendação do CSS3, com dois pontos usados duas vezes (::before), especialmente para "estabelecer uma diferenciação entre as pseudoclasses e os pseudoelementos".

Por motivos de compatibilidade, o método com dois pontos apenas uma vez ainda é aceito. Lembre-se de que o IE8 dá suporte apenas a essa notação.

Para mais informações:

• Manual do CSS: um guia prático de CSS para desenvolvedores
• Os melhores exemplos de CSS e CSS3

Uma media query (em português, consulta de mídia) é um recurso do CSS. Ela permite que você crie e implemente layouts que se adaptam às propriedades do dispositivo que você está usando. Algumas dessas propriedades incluem a altura e a largura de uma página.

Neste guia, você verá como definir várias propriedades de largura em uma regra de media query. Por enquanto, vamos, primeiramente, dar uma olhada nos fundamentos.

Como funcionam as media queries no CSS

Agora que você tem uma ideia básica do que é uma media query, vamos dar uma olhada em como esse recurso específico do CSS realmente funciona.

Uma media query básica tem a seguinte aparência:

@media only screen and (max-width: 576px) {
    // realiza uma ação
}

@media only screen and (min-width: 576px) {
    // realiza outra ação
}

Isso significa que os estilos que seriam escritos dentro das regras de mídia acima só funcionarão ou serão efetivos nas propriedades de largura especificadas acima.

Literalmente, você está dizendo que, nessa largura específica (ou seja, a propriedade max-width – largura máxima – de 576px), o CSS deve aplicar os estilos selecionados para dentro dessa largura, a partir de uma largura inicial de 0px.

As propriedades max-width e min-width

Há duas coisas que você precisa conhecer ao criar media queries para tamanhos de tela diferentes: as propriedades max-width e min-width.

Quando uma propriedade max-width é passada para uma media query, o CSS a interpreta como uma largura começando em zero – ou seja, se nenhuma propriedade de largura mínima tiver sido definida ainda. Chegaremos a isso em breve.

Quando a propriedade max-width recebe um valor, todos os estilos dentro dessa media query específica serão aplicados a qualquer dispositivo com tamanho de tela que se estenda de 0px até a largura máxima especificada.

A propriedade min-width, por outro lado, usa o valor inicial que você atribuiu a ela e aplica os estilos dentro da regra de mídia até que a próxima largura máxima seja fornecida. Veja, por exemplo, o seguinte:

@media only screen and (min-width: 576px) {
    // aplique os estilos aqui a partir dessa largura mínima de 
    // 576px (telas de dispositivos médias)
}

Os estilos que seriam escritos na media query acima só seriam aplicáveis a dispositivos que se enquadram na largura mínima especificada e acima.

Como definir o intervalo de largura de uma media query

O método que acabamos de discutir cria media queries aplicando apenas uma propriedade width, o que resolve apenas um problema.

Ao definir um "intervalo de largura", você tem uma certa flexibilidade ao criar layouts que oferecem capacidade de resposta em todas as larguras de dispositivo.

A definição de um "intervalo de largura" específico não é diferente da maneira como as media queries são criadas. A única diferença é a adição de mais expressões de recursos de mídia (ou seja, os tamanhos de largura da tela).

Observe:

@media only screen and (min-width: 360px) and (max-width: 768px) {
	// faça algo nesse intervalo de largura.
}

A media query acima funcionará apenas para a expressão do recurso (o tamanho de tela de um dispositivo móvel para o qual você está escrevendo o estilo) fornecida acima.

Ela usa a primeira expressão de largura fornecida como o valor inicial e a segunda como o valor final.

Você se lembra de quando vimos a diferença entre as propriedades max-width e min-width? Simplesmente informamos ao navegador que aplicasse os estilos do CSS que incluímos dentro da regra para dispositivos móveis com telas de 360px a 768px.

De modo simples, estamos criando layouts responsivos para dispositivos de larguras pequenas e médias, como tablets ou celulares.

Você pode ver alguns dos "pontos de corte" (em inglês, breakpoints) disponíveis na documentação do Bootstrap (texto em inglês). Experimente com alguns desses pontos definindo os intervalos de tamanho de tela que você preferir.

Experimente usar media queries com o Flexbox

Você viu como criar uma media query básica que usa várias expressões de tamanho de tela. Você também viu a diferença entre as propriedades max-width e min-width e como aplicá-las.

Nesta seção, examinaremos a criação de um layout simples, no qual a aparência muda de acordo com os diferentes "pontos de corte" (tamanhos de tela). Começaremos criando a marcação que estruturará o layout.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Exemplo de media query</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="conteiner">
      <div class="caixas caixa1">
        <h1>Primeira caixa</h1>
        <p>
		  Informação da primeira caixa
        </p>
      </div>
      <div class="caixas caixa2">
        <h1>Segunda caixa</h1>
        <p>
          Informação da segunda caixa
        </p>
      </div>
  </body>
</html>

O trecho acima exibirá duas caixas com suas respectivas informações quando os estilos são aplicados.

.conteiner {
  display: flex;
  flex-wrap: wrap;
  width: 980px;
  margin: 0 auto;
  margin-top: 40px;
}

@media only screen and (min-width: 320px) and (max-width: 576px) {
  .conteiner {
    width: 100%;
    padding-left: 23px;
    flex-direction: column-reverse;
  }
  .caixas {
    width: 100%;
  }
}

Observando o arquivo CSS, você perceberá que a media query tem uma largura mínima de 320px e uma largura máxima de 576px. Isso quer dizer, simplesmente, que todos os estilos que entrarem nessa regra se aplicarão apenas aos dispositivos com larguras muito pequenas ou pequenas.

O layout das caixas também muda nesse intervalo de largura específico. Isso se dá em função de o seletor .conteiner ter sua propriedade flex-direction alterada de row para column-reverse.

Você pode decidir se quer experimentar com outros valores atribuíveis à propriedade flex-direction. Saiba mais sobre esses valores aqui.

Conclusão

Sem definir um intervalo de largura, os estilos do CSS do trecho de código acima serão aplicados a todos os dispositivos com um tamanho mínimo de tela de 576px ou acima.

Ao definir um intervalo de largura, você obtém melhor controle como desenvolvedor. Você poderá especificar quais estilos devem ser aplicados a um dispositivo com um tamanho de tela específico, o que dá à aplicação uma responsividade melhor.

Obrigado por ler este artigo. Se ele o ajudou a entender por que você deve definir intervalos de largura ao criar media queries, compartilhe-o.

A propriedade z-index do CSS pode ser bastante complicada. Ela não funciona facilmente e por conta própria se você não souber como usá-la adequadamente.

Neste artigo, explicarei o que é a propriedade z-index, o que é a ordem de empilhamento e como usá-las da maneira certa.

Darei alguns exemplos comuns do funcionamento inadequado da propriedade z-index e mostrarei as soluções para eles.

O que é o z-index?

Em primeiro lugar, a letra Z vem da representação das três dimensões: x, y e z. x e y são a largura e a altura. A 3ª dimensão, z, é a profundidade:

O CSS fornece uma propriedade chamada z-index para que possamos usá-la para determinar a profundidade de um elemento. À medida que o valor de z-index de um elemento aumenta, mais à frente dos outros elementos ele estará posicionado com relação à 3ª dimensão.

Vejamos alguns exemplos e como usar a propriedade z-index corretamente.

A propriedade z-index não funciona sem uma posição definida nem com position: static

A primeira coisa importante a se saber é que todo elemento de uma página da web tem uma posição padrão – em outras palavras, uma posição definida estaticamente (por padrão). Digamos que temos uma caixa vermelha e outra azul em nossa página:

<div class="caixa caixa-vermelha"></div>
<div class="caixa caixa-azul"></div>

Se aplicarmos z-index às caixas diretamente, você verá que isso não dará resultado. Isso ocorre por não termos ainda uma posição (a propriedade position) definida:

.caixa {
  height: 150px;
  width: 150px;
}

.caixa-vermelha {
  background: red;
  z-index: 1;
}

.caixa-azul {
  background: #00d5f1;
  bottom: 80px;
  left: 55px;
  z-index: 2;
}

Esse é um dos exemplos mais comuns da propriedade z-index, onde ela não funciona corretamente. Para resolvê-lo, podemos aplicar uma propriedade position (texto em inglês) à classe caixa. Isto resolverá a questão:

.caixa {
  height: 150px;
  width: 150px;
  position: relative;
}

Você também pode assistir a este tutorial em vídeo para ver um exemplo de uso de z-index:

O que é a ordem de empilhamento?

Se removermos as propriedades z-index das duas caixas, a caixa azul seguira à frente da caixa vermelha, mesmo sem um valor para a propriedade z-index:

.caixa {
  height: 150px;
  width: 150px;
  position: relative;
}

.caixa-vermelha {
  background: red;
}

.caixa-azul {
  background: #00d5f1;
  bottom: 80px;
  left: 55px;
}

A renderização será a seguinte:

Desse modo, quando todos os elementos estão no mesmo nível, um elemento ainda ficará à frente do outro, pois eles também têm uma ordem padrão em termos do eixo z. Essa ordem é chamada de ordem de empilhamento.

Como no exemplo acima, quando não há uma propriedade z-index aplicada a um elemento, os navegadores usam uma ordem de empilhamento padrão para empilhar os elementos na página:

1. O segundo plano e as bordas do elemento root
2. Blocos descendentes não posicionados, em ordem de aparecimento no HTML
3. Blocos descendentes posicionados, em ordem de aparecimento no HTML

Fonte: Stacking without the z-index property (texto em inglês)

Observe que o elemento root é o elemento <html>. Os elementos não posicionados são aqueles que têm a propriedade position com seu valor padrão, position: static, e os elementos posicionados são aqueles que têm elementos com position definida como outro valor.

Se adicionarmos outra caixa, mas se definirmos sua propriedade position com o valor padrão static, ela aparecerá atrás das caixas vermelha e azul:

<div class="caixa caixa-vermelha"><p>Positioned</p></div>
<div class="caixa caixa-azul"><p>Positioned</p></div>
<div class="caixa caixa-amarela"><p>Non-positioned</p></div>

.caixa {
  height: 150px;
  width: 150px;
  position: absolute;
}

p {
  color: #0a0a23;
  margin: 0;
  padding-left: 5px;
}

.caixa-vermelha {
  background: red;
  top: 40px;
  left: 27px;
}

.caixa-azul {
  background: #00d5f1;
  top: 80px;
  left: 55px;
}

.caixa-amarela {
  background: rgb(251, 239, 0);
  position: static;
}

Este é o resultado:

Embora tenhamos modificado as caixas azul e vermelha para que usassem position: absolute em vez de relative e tenhamos ajustado um pouco seu posicionamento, a ideia era auxiliar a perceber a ordem padrão de empilhamento no navegador – elementos posicionados no mesmo nível sempre aparecerão sobre os elementos não posicionados (ou com a propriedade definida como position: static).

Você pode estar se perguntando o que acontece quando os elementos não estiverem no mesmo nível. Veremos isso agora.

Contexto de empilhamento: Como o z-index do elemento pai se aplica também ao elemento filho

Vamos colocar a caixa amarela entre a caixa vermelha e a azul:

<div class="caixa caixa-vermelha">
  <div class="caixa caixa-amarela"></div>
</div>
<div class="caixa caixa-azul"></div>

.caixa-vermelha {
  background: red;
  z-index: 1;
}

.caixa-azul {
  background: #00d5f1;
  bottom: 80px;
  left: 55px;
  z-index: 2;
}

.caixa-amarela {
  background: rgb(251, 239, 0);
  left: 25px;
  top: 25px;
  z-index: 3;
}

Teremos renderizado o seguinte:

Como é possível ver no código, mesmo que a caixa amarela tenha um valor dez-index maior em comparação ao elemento azul, ela está posicionada atrás da caixa azul.

Isso ocorre porque a caixa amarela agora é "filha" da caixa vermelha. O z-index do elemento "pai" sempre se aplica aos seus filhos também. Como o elemento pai tem um z-index menor que o da caixa azul, seus elementos filhos herdarão o mesmo valor de z-index e ficarão abaixo da caixa com o valor de z-index maior no mesmo nível que o elemento pai.

Isso ocorre por causa de algo chamado contexto de empilhamento. Colocado de maneira simples, um contexto de empilhamento é como uma nova instância da lista da ordem de empilhamento mencionada anteriormente, ou seja:

1. Um elemento root (<html>)
2. Elementos não posicionados (com position: static) na ordem em que aparecem
3. Elementos posicionados (com position definida com outro valor que não static) na ordem em que aparecem

O que devemos lembrar é que o elemento posicionado com um valor de z-index diferente do padrão auto (que o deixará com posicionamento estático) criará sempre um outro contexto de empilhamento.

Se olharmos para o HTML acima, como a caixa vermelha tem um z-index de 1, ela cria outro contexto de empilhamento para seus filhos – no caso, para a caixa amarela. Nesse contexto de empilhamento, a caixa vermelha funciona como se fosse o elemento root do HTML. A caixa amarela estaria posicionada dentro desse elemento root.

Assim, como a caixa azul é parte do mesmo contexto de empilhamento que a caixa vermelha (onde o elemento <html> é o que serve como elemento root), ela sempre aparecerá acima da caixa amarela.

Caso veja esse tipo de problema, você pode resolvê-lo removendo o elemento filho de dentro do elemento pai ou removendo a propriedade position do elemento pai, de modo que o z-index do pai não afete seus filhos:

<div class="caixa caixa-vermelha"></div>
<div class="caixa caixa-amarela"></div>
<div class="caixa caixa-azul"></div>

.caixa {
  height: 150px;
  width: 150px;
  position: relative;
}

.caixa-vermelha {
  background: red;
  z-index: 1;
}

.caixa-azul {
  background: #00d5f1;
  bottom: 240px;
  left: 55px;
  z-index: 2;
}

.caixa-amarela {
  background: rgb(251, 239, 0);
  bottom: 120px;
  left: 25px;
  z-index: 3;
}

Agora, o que temos é:

Saiba que existem diversas outras propriedades que podem afetar o contexto de empilhamento de um elemento. Leia mais sobre isso aqui (texto em inglês).

Isso é um pouco contraintuitivo, mas é uma das razões para o não funcionamento da propriedade z-index.

Não atribua números grandes ao z-index

Outro motivo comum para o z-index não funcionar corretamente é a atribuição de números muito altos à propriedade z-index:

.caixa-azul {
  z-index: 9999;
}

Em alguns projetos nos quais já trabalhei, vi pessoas atribuírem esses valores muito grandes, como 9999, ao z-index de um elemento.

Funciona, mas é como usar um martelo quando o que você precisa é de uma chave de fenda.

Imagine o seguinte – você chega em um projeto grande e trabalha com o HTML, mas, não importa o que você tente, não consegue colocar os elementos na ordem correta. Assim, após pesquisar um pouco on-line, você descobre que alguém, em algum momento, definiu uma propriedade z-index global como 9999, que segue sobrescrevendo seu z-index.

Agora que você sabe como usar a propriedade z-index adequadamente e que entende o contexto de empilhamento, não precisará mais usar valores enormes como aquele. 🙂

Espero que este artigo tenha ajudado você a entender melhor como usar a propriedade z-index, assim como a ordem de empilhamento e o contexto do empilhamento. Se quiser aprender mais sobre desenvolvimento para a web, não deixe de se inscrever no canal do YouTube do autor.

Agradecemos pela leitura!

Em programação, geralmente, há várias soluções diferentes para um determinado problema. Isso é evidenciado quando tratamos da estilização de um elemento do HTML.

Uma das mudanças mais fáceis é a da cor de um texto. No entanto, às vezes, nada do que você tenta parece funcionar:

<style>
  h2 .texto-vermelho {
    color: red;
  }
</style>

<h2 class="texto-vermelho" color=red;>CatPhotoApp</h2>

Como podemos mudar a cor do elemento H2 para vermelho?

Opção nº 1: usar o CSS em linha

Uma maneira seria utilizar o CSS em linha para estilizar o elemento diretamente.

Assim como ocorre com outros métodos, a formatação é importante. Observe novamente a marcação do HTML:

<h2 class="texto-vermelho" color=red;>CatPhotoApp</h2>

Para usar a estilização em linha, não se esqueça de usar o atributo style e de envolver as propriedades e valores em aspas duplas ("):

<h2 class="texto-vermelho" style="color: red;">CatPhotoApp</h2>

Opção nº 2: usar os seletores do CSS

Em vez de usar a estilização em linha, é possível separar o HTML (a estrutura e o conteúdo de sua página) do CSS (a estilização).

Primeiro, vamos remover o CSS em linha:

<style>
  h2 .texto-vermelho {
    color: red;
  }
</style>

<h2 class="texto-vermelho">CatPhotoApp</h2>

É necessário ter cuidado, no entanto, com o seletor de CSS que você usará. Observe o elemento <style>:

h2 .texto-vermelho {
  color: red;
}

Quando houver um espaço, o seletor h2 .texto-vermelho dirá ao navegador para selecionar o elemento com a classe texto-vermelho que seja filho de h2. O elemento H2, porém, não tem um elemento filho – você quer estilizar o próprio elemento H2.

Para consertar isso, basta remover o espaço:

h2.texto-vermelho {
  color: red;
}

Também é possível selecionar o elemento com a classe texto-vermelho diretamente:

.texto-vermelho {
  color: red;
}

Esperamos que este artigo tenha sido útil. Agradecemos pela leitura! 😀

Antes de poder ser muito bom em CSS, você precisa entender o básico. É preciso entender as propriedades do CSS e seus valores.

Neste artigo, nos concentraremos na propriedade position do CSS. Aprenderemos sobre os vários valores dessa propriedade e sobre como eles funcionam. Vamos lá!

O que é a propriedade position do CSS?

A propriedade position do CSS define a posição de um elemento em um documento. Essa propriedade funciona em conjunto com as propriedades left, right, top, bottom e z-index para determinar a posição final de um elemento em uma página.

Existem cinco valores que a propriedade position pode receber. Elas são:

1. static
2. relative
3. absolute
4. fixed
5. sticky

Vamos discutir cada uma delas.

Static

Esse é o valor padrão para os elementos. O elemento é posicionado de acordo com o fluxo normal do documento. As propriedades left, right, top, bottom e z-index não afetam um elemento com position: static.

Vamos usar um exemplo para mostrar que position: static não afeta a posição de um elemento. Colocamos três elementos div em um contêiner (elemento pai). Usaremos esse mesmo exemplo pelo resto do artigo.

<html>
	<body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
            
            <div class="main-element">
                All eyes on me. I am the main element.
            </div>
            
            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

Vamos adicionar position: static à div com a classe main-element e valores para left e top para ela. Também adicionaremos alguns estilos às outras divs para diferenciá-las do elemento importante.

.main-element {
    position: static;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.sibling-element {
    padding: 10px;
    background-color: #f2f2f2;
}

Este é o resultado.

Percebeu que não há mudança? Isso confirma o fato de que as propriedades left e bottom não afetam um elemento com a position: static.

Vamos passar para o próximo valor.

Relative

Elementos com a position: relative permanecem no fluxo normal do documento. Porém, diferente dos elementos com a posição estática, left, right, top, bottom e z-index afetam a posição do elemento. Um deslocamento, com base nos valores das propriedades left, right, top e bottom, é aplicado ao elemento relativo a si mesmo.

Vamos substituir position: static por position: relative em nosso exemplo.

.main-element {
    position: relative;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

Perceba que as propriedades left e bottom agora afetam a posição do elemento. Veja, também, que o elemento permanece no fluxo normal do documento e que o deslocamento é aplicado com relação a si mesmo. Preste atenção a isso ao passarmos para os outros valores.

Absolute

Elementos com position: absolute são posicionados em relação aos seus elementos pai. Nesse caso, o elemento é removido do fluxo normal do documento. Os outros elementos se comportarão como se aquele elemento não estivesse no documento. Não é criado um espaço para o elemento no layout da página. Os valores de left, top, bottom e right determinam a posição final do elemento.

Outra coisa que merece ser observada é que um elemento com position: absolute é posicionado com relação ao seu ancestral posicionado mais próximo. Isso quer dizer que o elemento pai precisa ter um valor de position diferente de position: static.

Se o elemento pai mais próximo não estiver posicionado, ficará posicionado com relação ao elemento pai mais próximo que estiver posicionado. Se não houver elemento ancestral posicionado, sua posição será relativa ao elemento <html>.

Vamos voltar ao nosso exemplo. Nesse caso, mudamos a posição do elemento principal para position: absolute. Daremos ao seu elemento pai o valor position: relative para que main não fique posicionado com relação ao elemento <html>.

.main-element {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 100px;
    padding: 10px;
    background-color: #81adc8;
}

.sibling-element {
	background: #f2f2f2;
	padding: 10px;
    border: 1px solid #81adc8;
} 

Este é o resultado.

Observe que não é criado um espaço no documento para o elemento. Ele agora está posicionado relativo ao elemento pai. Preste atenção enquanto passamos para o próximo valor.

Fixed

Elementos com position: fixed são semelhantes aos elementos com position: absolute. Eles também são removidos do fluxo normal do documento. Porém, diferente daqueles com position: absolute, eles ficam sempre posicionados em relação ao elemento <html>.

Algo importante de se observar é que elementos com position: fixed não são afetados pela rolagem. Eles sempre permanecem na mesma posição na tela.

.main-element {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: yellow;
    padding: 10px;
}

html {
    height: 800px;
}

Nesse caso, o elemento é posicionado com relação ao elemento <html>. Experimente usar a barra de rolagem para ver que o elemento permanece fixo na tela.

Vamos passar agora para o valor final.

Sticky

position: sticky é uma mistura de position: relative e position: fixed. Ele age posicionado relativamente até determinado ponto de rolagem. Então, ele age como um elemento com position: fixed. Não se preocupe se você não entende o que isso significa. O exemplo ajudará você a entender melhor.

.main-element {
    position: sticky;
    top: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 800px;
    padding: 50px 10px;
    background-color: #81adc8;
}

Faça a rolagem na guia Result para ver o resultado. Você perceberá que ele age como um elemento relativo até que chegamos a determinado ponto da tela, top: 10px. Então, ele passa a se comportar como um elemento fixo.

Resumo

Opa! Essa foi uma viagem e tanto. Espero realmente que este artigo tenha ajudado você a entender a propriedade position do CSS e como ela funciona.

Fique à vontade para brincar com os exemplos caso não tenha entendido completamente algum deles. Você pode mudar os valores e perceber as diferenças ou, melhor ainda, tentar usar a propriedade position para trabalhar em um projeto pessoal.

Lembre-se de que melhorar no CSS requer prática constante. Por isso, mantenha-se na prática e você melhorará. Agradecemos pela leitura! 😀

Escrito por: Marina Ferreira

Pare de perder seus elementos na tela entendendo como um objeto se encontra onde ele deve estar

Posicionar um elemento de modo absoluto tem mais a ver com a posição do contêiner do elemento do que com a própria posição. Para se posicionar, é preciso saber com relação a qual div pai o elemento se posicionará.

O código abaixo mostra quatro divs aninhadas. De .box-1 a .box-3, todas estão centralizadas usando apenas display: flex e margin: auto. .box-4 não tem margin definida, e está em sua posição padrão no fluxo do documento.

<body>
  <div class="box-1">
    <div class="box-2">
      <div class="box-3">
        <div class="box-4">
        </div>
      </div>
    </div>
  </div>
</body>

A propriedade position não está definida nos elementos.

body {
  display: flex;
}

.box-1,.box-2,.box-3 {
  display: flex;
  margin: auto;
}

Para poder ser posicionado, um elemento precisa conhecer duas coisas:

• as coordenadas para sua posição em x e em y position definidas por top, right, bottom e/ou left
• em relação a qual elemento pai ele se posicionará

Ao aplicar position: absolute a .box-4, o elemento é removido do fluxo normal do documento. Como suas coordenadas não estão definidas, ele simplesmente fica na posição padrão, que é o canto superior esquerdo do seu elemento pai.

Ao definirmos top: 0 e left: 0, o elemento precisa saber qual o elemento pai que ele deve considerar como elemento de referência. Para ser uma referência, o elemento pai precisa ser posicionado na tela usando position: relative. .box-4, então, começa a procurar por algum elemento div pai que esteja posicionado. Primeiro, ele pergunta a .box-3, que dá a ele uma resposta negativa. A mesma coisa ocorre com .box-2 e depois com .box-1, pois, em todos eles, não há uma propriedade position definida.

Como .box-4 não conseguiu encontrar um elemento pai posicionado, ele se posiciona com relação a body. Esse elemento está sempre posicionado na tela:

Se colocarmos position: relative em .box-1, quando .box-4 começar a perguntar se há algum elemento pai posicionado, receberá de .box-1 uma resposta afirmativa. Então, .box-4 será posicionado em relação a .box-1 :

A mesma coisa valeria para .box-2 e .box-3 .

O elemento posicionado com position: absolute se posicionará relativo ao seu ancestral posicionado (com position: relative) mais próximo.

Ao encontrar  um ancestral posicionado, a posição dos elementos acima dele deixa de ser relevante. As imagens abaixo mostram o layout ao definir position: relative em .box-2 e em .box-3, respectivamente:

Você também poderá encontrar uma explicação em vídeo no canal Code Sketch, no YouTube.

Obrigado pela leitura! ✌️

Publicação original em marina-ferreira.github.io.

O que um usuário vê em um site da web influenciará sua experiência de usuário. Também afetará a facilidade ou a dificuldade em ver o site como um todo.

Adicionar imagens ao fundo de determinadas partes de um site da web, em geral, é mais agradável e interessante visualmente do que meramente trocar uma cor de fundo.

Navegadores modernos dão suporte a vários tipos de arquivos de imagem, como .jpg, .png, .gif e .svg.

Este artigo explica como adicionar imagens ao código HTML e como ajustá-las para terem uma aparência melhor.

Sintaxe para as imagens de fundo ( background-image)

O primeiro passo é criar um diretório (pasta) onde inserir seus itens para manter as imagens que você quer usar em seu projeto.

Por exemplo, podemos criar uma pasta images no projeto em que estamos trabalhando e adicionar uma imagem chamada sunset.png, a qual queremos usar.

A propriedade do CSS background-image permite que você coloque uma imagem por trás de qualquer elemento do HTML.

Esse elemento pode ser a página inteira (usando o seletor body no CSS, que estiliza o elemento <body> no HTML) ou uma parte específica da página, como o elemento section do exemplo a seguir.

Para adicionar uma background-image à tag section em seu arquivo .css, escreva o seguinte código:

section {
     background-image: url("images/sunset.png");
}

Vamos discutir em detalhes o que ocorre aqui:

• section especifica a tag na qual você deseja adicionar a imagem.
• url() é usado para informar ao CSS a localização da imagem a ser usada.
• Dentro dos parênteses, "images/sunset.png" é o caminho para a imagem. Isso permite que o navegador saiba qual o URL deve acessar.
• O caminho neste exemplo é chamado de caminho relativo. Isso quer dizer que ele é um arquivo local, relativo ao nosso projeto e ao nosso diretório de trabalho atual, não um endereço da web. Para adicionar imagens, também podemos usar um caminho absoluto, que é um endereço da web completo e que inicia com um URL de domínio (http://www.).
• O uso das aspas é uma boa prática, mas é possível omiti-las. Assim, background-image: url(images/sunset.png) também funcionaria.
• Não se esqueça do ponto e vírgula!

Como evitar a repetição da imagem de fundo

Ao aplicar uma imagem de fundo a um elemento, por padrão, ela se repetirá.

Se a imagem for menor do que o elemento do qual ela será a imagem de fundo, ela se repetirá para preencher o elemento.

Como evitamos que isso aconteça?

A propriedade background-repeat recebe quatro valores. Podemos alterar a direção na qual a imagem se repete ou evitar que ela se repita por completo.

section {
    background-repeat: repeat;
}

Acima, vemos o valor padrão para a propriedade background-repeat se não dermos a ela um valor. Nesse caso, a imagem é repetida tanto na horizontal quanto na vertical. Assim, ela se repetirá tanto na direção do eixo x quanto na do eixo y, respectivamente, até preencher o espaço.

section {
    background-repeat: no-repeat;
}

O valor no-repeat evita que a imagem se repita em qualquer direção. A imagem é mostrada apenas uma vez.

section {
    background-repeat: repeat-x;
}

Esse valor repete a imagem apenas na horizontal. A imagem é repetida ao longo da página se usamos repeat-x. O eixo x, na matemática, é o eixo horizontal.

section {
    background-repeat: repeat-y;
}

Esse valor repete a imagem apenas na vertical. A imagem é repetida de cima para baixo na página usando repeat-y. O eixo y, na matemática, é o eixo vertical.

Como definir a posição do segundo plano

Após adicionar uma imagem de fundo e evitar que ela se repita, podemos controlar sua colocação no segundo plano do elemento, melhorando seu posicionamento.

Usaremos a propriedade background-position para fazer isso.

O seletor recebe dois valores. O primeiro valor é a posição na horizontal, ou no eixo x. O segundo é a posição na vertical, ou no eixo y.

Esses valores podem ser expressos em unidades, como em pixels:

section {
    background-position: 20px 30px;
}

Isso moverá a imagem 20px na horizontal e 30px na vertical com relação ao elemento que a contém.

Em vez de pixels, podemos usar um conjunto de palavras-chave, como right, left, top, down e center para colocar a imagem à direita, esquerda, acima, abaixo ou ao centro do element, respectivamente.

section {
    background-position: right center;
}

Isso coloca a imagem à direita do elemento e ao centro.

Se quisermos centralizar a imagem na horizontal e na vertical, fazemos o seguinte:

section {
    background-position: center center;
}

Para detalhar ainda mais o posicionamento da imagem, vale a pena mencionar que podemos usar porcentagens.

section {
    background-position: 20% 40%;
}

Isso posiciona a imagem a 20% do eixo horizontal e a 40% do eixo vertical do elemento.

Até agora, vimos valores usados em combinação, mas também podemos especificar apenas um valor. Como exemplo disso, temos background-position: 20px;, background-position: center; ou background-position: 20%;. Usando apenas um valor, aplicamos esse valor a ambas as direções.

Como redimensionar uma imagem de fundo

Para controlar o tamanho de uma imagem de fundo, podemos usar a propriedade background-size.

Assim como nas propriedades anteriores mencionadas, ela recebe dois valores, um para a horizontal (eixo x) e o outro para a vertical (eixo y).

Podemos usar pixels, assim:

section {
    background-size: 20px 40px;
    /* dimensiona a imagem image 20px na horizontal e 40px na vertical */
}

Se não soubermos a largura exata do contêiner em que a imagem é usada de fundo, há um conjunto de valores específicos que podemos dar à propriedade.

• background-size: cover; redimensiona a imagem de fundo para que cubra todo o espaço do fundo do elemento, não importando sua largura. Se a imagem for muito grande e tiver uma proporção maior que a do elemento, isso significa que a imagem será esticada e, portanto, cortada em suas arestas.
• background-size: contain; contém a imagem, como o nome sugere. Ela garantirá que a imagem inteira seja mostrada no fundo sem cortar parte alguma dela. Se a imagem for muito menor do que o elemento, haverá espaço sobrando, o que a fará repetir para preencher o fundo. Assim, podemos usar a regra background-repeat: no-repeat;, conforme mencionamos anteriormente.

A regra background-size:cover;, no caso abaixo, cortará partes da imagem:

Ao mudarmos para background-size:contain;, veremos que a imagem se encolhe para se ajustar ao elemento section.

Como usar a propriedade background-attachment

Com a propriedade background-attachment, podemos controlar onde a imagem de fundo está colocada, o que significa saber se a imagem estará fixa ou não com relação ao navegador.

O valor padrão background-attachment: scroll;, onde a imagem de fundo permanece com seu elemento e segue o fluxo natural da página, rolando para cima e para baixo quando fazemos isso com a página.

O segundo valor que a propriedade pode ter é background-attachement: fixed;.
Isso faz com que a imagem de fundo permaneça na mesma posição, fixada à página e à viewport do navegador. Isso cria um efeito parallax. Você pode ver um exemplo disso aqui:

Gradientes de fundo

Um caso de uso diferente para a propriedade background-image é informar ao navegador para criar um gradiente.

background-image, nesse caso, não tem um URL, mas um "gradiente linear".

A maneira mais simples de se fazer isso é especificar um ângulo. Isso controla a direção do gradiente e o modo como as cores serão misturadas. Por fim, adicione as duas cores que você quer misturadas em um gradiente para o fundo do elemento.

Um gradiente que vá de cima para baixo e do preto ao branco pode ser definido assim:

section {
    background-image: linear-gradient(black,white);
}

Os ângulos mais usados para os gradientes são:

• 0deg, de cima para baixo
• 90deg, da esquerda para a direita
• 180deg, de baixo para cima
• 270deg, da direita para a esquerda

Os ângulos acima correspondem a to top, to right, to bottom e to left, respectivamente.

section{
  background-image: linear-gradient(to left,pink,orange);
}

Em vez de usar as palavras-chave das cores, podemos usar cores em hexadecimal para sermos mais específicos e ter um intervalo maior de opções:

section{
  background-image: linear-gradient(to left,#42275a, #734b6d)
}

Também podemos incluir mais de duas cores em um gradiente, criando efeitos e esquemas de cores diversos.

Conclusão

Isso marca o final de nossa introdução à sintaxe básica da propriedade background-image.

A partir daqui, as possibilidades são ilimitadas e deixa espaço para usarmos toda nossa expressão criativa. Esses efeitos ajudam o usuário a ter uma experiência agradável ao visitar seu site na web.

Espero que o artigo tenha sido útil. Obrigado pela leitura.

Divirta-se com suas criações em design e uma ótima programação para você!

Escrito por: Charlie Waite

Durante um projeto recente, minha equipe teve que remover todos os vestígios do Bootstrap. Isso significou que a barra de navegação responsiva, extremamente útil, teve que ser criada do zero. Eu sou relativamente novo em CSS, tendo sempre confiado nas navbars do Bootstrap pela sua simplicidade. Então, me ofereci para assumir essa tarefa. Aqui está o que aprendi e fiz ao longo do processo.

Neste artigo, vou assumir que você tem conhecimento básico de HTML, CSS e JavaScript — sabe como vincular uma folha de estilo ao HTML ou aplicar os estilos em uma tag <style> — e que sabe como importar um arquivo de JavaScript para sua página.

Já vi elitistas se defendendo por meio de críticas ao meu jeito de fazer as coisas, em especial pelo fato de usar position: absolute para o menu de sanduíche — se tiver maneiras melhores de fazer isso, fique à vontade para publicar sua solução. Juntos, podemos ajudar milhares de pessoas que leem estes artigos!

Introdução

Primeiro, comecei com o HTML básico para fazer o layout:

<div class="Navbar">
  <div class="Navbar__Link Navbar__Link-brand">
    Website title
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
</div>

Você pode usar a convenção de nomes que quiser para as classes.

Bem, não estamos vendo muita coisa aqui ainda. Essa é apenas uma lista de itens simples. Porém, com apenas uma linha de CSS, vemos o poder do Flexbox.

.Navbar {
  display: flex;
}

Uma linha de código e já temos nossos itens de navegação alinhados horizontalmente na parte superior da página.

Agora, vamos adicionar dois elementos nav ao nosso HTML para termos alguns itens à esquerda e à direita da navbar:

<div class="Navbar">
  <nav class="Navbar__Items">
    <div class="Navbar__Link Navbar__Link-brand">
      Website title
    </div>
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
  <nav class="Navbar__Items Navbar__Items--right">
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
</div>

Vamos fazer também a estilização básica de nossa classe Navbar, que envolve todos os outros elementos:

.Navbar {
  background-color: #46ACC2;
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
}

Você, logicamente, pode escolher seu próprio esquema de cores, fontes e preenchimento (do inglês, padding).

Nossa navbar, de momento, terá esta aparência:

É... já parece um pouco melhor, mas não podemos deixar nossos itens de navegação serem exibidos na vertical. Antes de seguir lendo, tente adivinhar o que faremos a seguir…

Agora, a propriedade display:flex da classe .Navbar já não está mais responsável por esses itens. Eles são responsabilidade dos contêineres <nav>. Queremos que os dois estejam alinhados na horizontal.

Desse modo, alteramos a classe .Navbar__Items também:

.Navbar__Items {
  display:flex;
}

Em seguida, vamos adicionar preenchimento aos nossos links para deixar tudo um pouco mais bonito:

.Navbar__Link {
  padding-right: 8px;
}

A aparência da navbar, agora, é esta:

Estamos chegando lá. No entanto, também queremos que o segundo elemento <nav> esteja alinhado à direita. Como você deve ter percebido, adicionei uma classe a mais ao segundo elemento <nav>, .Navbar__Items--right.

Vamos apenas adicionar um atributo margin-left:auto a essa classe:

.Navbar__Items--right {
  margin-left:auto;
}

Como você pode ver, parece bem melhor. Já temos uma navbar totalmente responsiva. O que aconteceria, contudo, se cada item de navegação tivesse um texto maior? O que aconteceria se tivéssemos mais itens?

Como podem ver, não é isso que queremos. Queremos deixar todos os itens de navegação em uma única linha, para manter a consistência, ou que eles fossem escondidos em um menu que o usuário pudesse abrir e fechar.

Vamos usar a segunda opção, pois é um estilo muito mais limpo – e não teremos que nos preocupar com o usuário lutando para ler o texto em cada item de navegação.

flex-direction

Com um item que tenha display:flex;, também há uma regra para a direção na qual queremos que os itens estejam orientados. Como padrão, é ao longo de uma linha (em inglês, row), o que alinha todos os itens ao longo do eixo x.

Em nosso caso, queremos um menu vertical pequeno na parte superior da página. Vamos tentar alterar isso usando flex-direction nos dois elementos .Navbar e dando a .Navbar__Items o valor de column — isso alinhará todos os itens de menu ao longo do eixo y — sempre que a largura da tela for 768px ou menos.

Vamos, também, remover aquele margin-left do segundo elemento <nav>:

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items--right {
    margin-left: 0;
  }
}

Agora, contudo, os itens de navegação estão sempre visíveis, o que toma uma quantidade significativa de espaço em tela.

Em nossa media query, vamos adicionar uma segunda regra para .Navbar__Items, de maneira que não fiquem visíveis:

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items {
    display:none;
  }
  .Navbar__Items--right {
    margin-left:0;
  }
}

O botão para abrir/fechar o menu

Para o botão de abrir/fechar o menu, usarei um ícone fornecido pelo Font Awesome. Se decidir fazer o mesmo, basta seguir as instruções no site deles para integrar os ícones ao seu projeto. Você pode usar qualquer conjunto de ícones que quiser, ou até texto simples, se isso for o que você quer.

Vamos adicionar esse ícone ao HTML:

<div class="Navbar">
   <div class="Navbar__Link Navbar__Link-brand">
      Website title
    </div>
    <div class="Navbar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
  <nav class="Navbar__Items">
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
  <nav class="Navbar__Items Navbar__Items--right">
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
</div>

A inclusão é a linha que diz <i class="fas fa-bars"></i>. Você perceberá que o ícone não vai dentro de nenhuma das tags nav, ficando fora, juntamente com o título do site. Isso é algo que faz sentido.

Claro que não é o local onde queremos que ele esteja. Pior ainda, ele está visível em resoluções para desktop.

Vamos consertar isso. Vamos fazer o que fizemos com os .Navbar__Items nas resoluções para dispositivos móveis. Desta vez, faremos isso com o ícone de menu nas resoluções para desktop:

.Navbar__Link-toggle {
  display: none;
}

Em seguida, vamos adicionar algumas regras para a mesma classe dentro de nossa media query:

.Navbar__Link-toggle {
  align-self: flex-end;
  display: initial;
  position: absolute;
  cursor: pointer;
}

Estamos praticamente prontos. Já temos a aparência desejada. Precisamos apenas adicionar a funcionalidade de abrir e fechar o menu ao ícone.

No JavaScript, adicione o seguinte:

function classToggle() {
  const navs = document.querySelectorAll('.Navbar__Items')
  
  navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}

document.querySelector('.Navbar__Link-toggle')
  .addEventListener('click', classToggle);

Por fim, adicione Navbar__ToggleShow com a regra display:flex à media query.

Pronto! Temos uma navbar totalmente responsiva com um menu que abre e fecha. Usando o Flexbox, fica muito simples!

Versão final

HTML:

<div class="Navbar">
   <div class="Navbar__Link Navbar__Link-brand">
      Website title
    </div>
    <div class="Navbar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
  <nav class="Navbar__Items">
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
  <nav class="Navbar__Items Navbar__Items--right">
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
</div>

CSS:

.Navbar {
  background-color: #46ACC2;
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
}

.Navbar__Link {
  padding-right: 8px;
}

.Navbar__Items {
  display: flex;
}

.Navbar__Items--right {
  margin-left:auto;
}

.Navbar__Link-toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
    
.Navbar__Items {
    display:none;
  }
    
.Navbar__Items--right {
    margin-left:0;
  }
    
.Navbar__ToggleShow {
    display: flex;
  }
    
.Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
   } 
}

JavaScript:

function classToggle() {
  const navs = document.querySelectorAll('.Navbar__Items')
  
  navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}

document.querySelector('.Navbar__Link-toggle')
  .addEventListener('click', classToggle);

Você pode ler mais sobre o Flexbox na MDN:

Conceitos básicos de flexbox

Você também pode consultar o local onde eu mesmo aprendi sobre o básico do Flexbox (texto em inglês):

Learn CSS Flexbox in this FREE and interactive tutorial

Siga o autor no GitHub.

Escrito por: David Piepgrass

Desde que me lembro, sempre existiram dois tipos de seletores.

Existia o tipo onde o texto no topo podia ser editado e o tipo onde isso não era possível. O HTML inclui o segundo tipo, sem problemas:

<select>
    <option>Apple</option>  
    <option>Banana</option>  
    <option>Cherry</option>  
    <option>Dewberry</option>
</select>

Fiquei, no entanto, chocado ao perceber que o primeiro tipo não existe em HTML. Bem, existe algo chamado datalist, mas não funciona bem — os utilizadores não podem clicar em algo para ver a lista completa. Além disso, à medida que começas a escrever, os itens começam imediatamente a desaparecer caso não comecem pela mesma string que o utilizador escreveu.

O CSS, contudo, é uma ferramenta de estilização com um poder impressionante: já foram criados jogos de vídeo completos com CSS, HTML e alguns ficheiros de imagens – que bom, acabei de perder metade da minha audiência.

Isto não quer dizer que o CSS pode fazer tudo, mas que existem pelo menos "atalhos" para alcançar uma grande variedade de truques. Aqueles de vocês que estão cansados de jogar estão provavelmente interessados em aprender sobre os truques do ofício. Acho que existe muito a aprender ao compreender como fazer uma caixa de combo.

Neste artigo, vais aprender como isto funciona:

No Windows, chamamos isso de "caixas de combo" (em inglês, combo boxes), visto que elas combinam a parte superior (geralmente, um campo de texto) com uma parte de popup (geralmente, uma lista drop-down).

Como utilizar

A caixa de combo pode ser construída com divs e/ou spans. Lembra-te apenas que um analisador de HTML tem algumas regras de hierarquia. Por exemplo, não permite que um p seja um antecessor de div ou ul. Um span também não pode ser um antecessor de p ou div. Estas regras não se aplicam ao código JavaScript/React que edita o DOM.

O CSS estará à espera de três filhos: primeiro, a parte superior (conteúdo a ser sempre exibido), depois o <span class="downarrow" tabindex="-1"></span>, para a seta para baixo, e, por fim, o conteúdo a ser apresentado dentro da caixa drop-down:

<div class="combobox">
  <div>Caixa de combo simples</div>
  <div tabindex="-1" class="downarrow"></div>
  <div>
    O conteúdo do popup do drop-down vai aqui
  </div>
</div>

O drop-down, inicialmente, abrirá apenas quando a seta para baixo (▾) for clicada. Para fazer com que a caixa abra quando o conteúdo do topo for clicado, é necessário adicionares a classe dropdown a combobox e adicionar um atributo tabindex="0" ao primeiro filho:

<div class="combobox dropdown">
  <div tabindex="0">Caixa de combo simples</div>
  <div tabindex="-1" class="downarrow"></div>
  <div>
    O conteúdo do popup do drop-down vai aqui
  </div>
</div>

Observação: tabindex="-1" significa "podes clicar para lhe dar destaque, mas não podes destacá-lo utilizando a tecla Tab do teclado". tabindex="0" significa "podes dar-lhe destaque ao clicar ou com a tecla Tab, e o browser escolherá a ordem pela qual são destacados os diferentes elementos com a tecla Tab." Ao contrário de um elemento <select>, a caixa de popup não será capaz de sair da janela do browser (isto pode ser uma limitação intencional de todo o conteúdo definido pelo utilizador — caso o conteúdo definido pelo utilizador passe para lá dos limites da área da página, pode ser um risco de segurança para sites que tentam confundir ou enganar os utilizadores).

Como bónus, serás capaz de criar uma lista drop-down que não é uma caixa de combo apenas com a classe dropdown:

<div class="dropdown">
   *** <span tabindex="0">Menu drop-down</span> *** 
   <div>
     O conteúdo do popup do drop-down vai aqui
   </div>
</div>

Isto é um menu drop-down que se clica para abrir (caso queiras um menu drop-down que abre ao passar o rato por cima em vez de clicar, já existem muitos outros tutoriais sobre isso.)

Neste caso, o último elemento contém o conteúdo do drop-down e todos os outros filhos estão sempre visíveis, mas apenas os elementos com um atributo tabindex podem ser clicados para abrir a área de popup.

Podes editar de modo seguro a margem e o contorno de uma caixa de combo, assim como os seus filhos, sem comprometer o seu comportamento, com exceção para uma coisa: não deixes que o padding-right fique muito pequeno porque a seta para baixo ▾ é apresentada no padding — o seu tamanho deve ser de, pelo menos, 1em.

Resumo

• A classe combobox é para a caixa de combo
• A classe dropdown é para menus e caixas de combo que aparecem quando o conteúdo de cima for clicado (lembra-te de que tabindex="0")
• A classe downarrow adiciona o ícone da seta para baixo (tabindex="-1" é obrigatório, porque não pode ser adicionado via CSS.)
• O último filho de combobox ou dropdown é o conteúdo do drop-down.

Podes pré-visualizar a demonstração com código-fonte.

Funcionalidades do CSS de que vamos precisar

Vamos precisar de muitas coisas para isto. Aqui está uma lista (fica à vontade para saltar esta parte e ler mais tarde.)

Seletores

Seletores básicos:
.a significa "corresponde a elementos com class='a'".
A, B significa "corresponde ao seletor A ou seletor B".
A B significa "corresponde a um elemento B que tem um elemento A como antecessor".
A > B significa "corresponde a um elemento B cujo elemento pai é um elemento A".

Pseudosseletor :first-child:
*:first-child significa "corresponde a qualquer elemento desde que seja o primeiro descendente de algum elemento pai".

Pseudosseletor :last-child:
*:last-child significa "corresponde a qualquer elemento desde que seja o último descendente de outro elemento". Por exemplo, .combobox > *:last-child encontra o último descendente de qualquer elemento com class="combobox".

Pseudosseletor :empty:
.downarrow:empty significa "corresponde a um elemento com class="downarrow" caso não tenha nada dentro (nem mesmo texto simples)".

Pseudosseletor :only-child:
*:only-child significa "corresponde a qualquer elemento caso este seja o único descendente de algum elemento".

Pseudosseletor :not:
.dropdown:not(.sticky) significa "corresponde a um elemento com a classe dropdown caso este não tenha a classe sticky".

Pseudosseletor :focus:
.downarrow:focus significa "corresponde a um elemento com a classe downarrow caso este esteja destacado, porque este tem um tabindex e foi clicado com o rato ou selecionado com a tecla Tab".

Pseudosseletor :hover:
.foo:hover significa "corresponde a um elemento com a classe foo quando o ponteiro do rato está por cima dele".

A ~ B significa "corresponde a B caso um elemento irmão anterior tenha correspondido a A".

Estilos

Estilos básicos:
Certifica-te de que compreendes o modelo de caixas (texto em inglês) e os seus vários estilos associados (incluindo width, height, min-width e max-height) antes de continuares. Também deves ter conhecimentos sobre estilos básicos, tais como font-size, font-family, color e background-color.

Além disso, deves ter conhecimentos sobre unidades, especialmente as unidades mais comuns (texto em inglês):
px, em, rem, e %.

Estilo box-sizing: border-box
Isto significa que a largura e altura de um elemento incluem o padding e o contorno (texto em inglês).

Estilo display:
Vamos utilizar display: block, que apresenta um elemento como um "bloco", que é como um parágrafo em que dois blocos adjacentes têm quebras de linha entre eles.

Também vamos utilizar display: inline-block, que apresenta um elemento em linha, como um ícone dentro de um parágrafo, mas permite ter margens, contornos e padding.

Não vamos utilizar explicitamente o display: inline, que é utilizado para elementos que não têm margens, contornos ou padding, e não precisam de quebras de linha entre eles (<b>like this</b>).

Fica a saber mais sobre o display (texto em inglês).

Estilo position:
Na caixa de combo, vamos ver como é utilizado este estilo para remover elementos do fluxo normal do documento.

Os elementos normalmente têm o estilo position: static, que significa apenas "posiciona-o normalmente na página".

position: relative é como o static, excepto para duas coisas: primeiro, o elemento pode ser movido para a esquerda, direita, cima ou baixo, sem afetar qualquer um dos outros elementos.
No entanto, a caixa de combo não precisa desta funcionalidade. O segundo efeito de relative é marcar o elemento como "posicionado".

Isto é importante, pois outro tipo de posicionamento, absolute, posiciona um elemento em relação ao antecessor que estiver "posicionado" mais próximo. Especificamente, o popup do drop-down utilizará position: absolute de modo a posicionar-se em relação à parte superior da caixa de combo — portanto, a própria caixa de combo é marcada como relative.

Além disso, um elemento absolute não afeta o posicionamento dos outros itens na página, nem mesmo o seu elemento pai. Isto é exatamente o que queremos para uma caixa de popup.

Estilos left, top, right e bottom
Estes estilos são utilizados com position: relative e position: absolute, e funcionam de maneira um pouco diferente para cada um deles. Mais informação sobre isto depois.

Aprende mais sobre posicionamento (texto em inglês).

Estilo outline:
O Outline é um contorno extra desenhado por fora do contorno normal de um elemento. é normalmente utilizado para destacar um elemento, como por exemplo indicar que este foi "selecionado" por um utilizador. Como é esperado que os outlines sejam temporários, estes não ocupam espaço na página — por isso, adicionar um outline não vai empurrar os outros elementos.

Estilo box-shadow:
Desenha uma sombra "por baixo" do elemento (bem, na verdade a sombra é desenhada fora do elemento, que fica muito estranho no caso de o elemento não ter cor de fundo). Isto vai dar muito jeito para o popup do drop-down!

Estilo z-index:
Este estilo altera a ordem pela qual um elemento é desenhado pelo browser. Um z-index mais alto faz com que um elemento seja desenhado mais tarde, de modo a que apareça por cima das outras coisas na página.

Vamos precisar de um z-index grande para o nosso popup do drop-down para que apareça por cima de tudo. O filho do popup receberá um novo "contexto de sobreposição", que basicamente significa que vão ser desenhados por cima do popup, que é uma coisa boa.

Atenção (texto em inglês): z-index apenas funciona em elementos "posicionados".

Estilo cursor:
Controla a aparência (texto em inglês) do ponteiro do rato.

Estilo text-align:
Justificação horizontal (left, right ou center) – texto em inglês.

Estilo pointer-events:
A configuração none deste estilo torna um elemento "invisível" a cliques do rato (texto em inglês).

Estilo transform:
Permite-te rodar, aumentar ou diminuir a escala, inclinar, ou mover um elemento de bloco (ou bloco em linha). Estas transformações (texto em inglês) são inteligentes e também afetam o input do rato.

Por exemplo, poderias rodar o texto em 30 graus e mesmo assim selecioná-lo com o rato.

Estilo transition:
Permite animações (texto em inglês) quando o estilo muda.

Estilo opacity:
Um número que varia entre 0 e 1 e controla a visibilidade de um elemento:
1 é o valor normal que torna o elemento totalmente visível
0 torna o elemento totalmente invisível. Ao contrário de visibility: hidden e display: none, as outras formas de tornar um elemento invisível, opacity: 0 não impede que o rato interaja com o elemento.

Neste artigo, vamos utilizar a transparência para animações — ao animar a transição entre opacity: 0 e opacity: 1, podemos fazer com que o elemento apareça ou desapareça gradualmente.

Pseudoelemento

::before ou ::after:
Refere-se a um elemento virtual dentro de um elemento selecionado previamente, antes ou depois do seu conteúdo normal.

Por exemplo, se escreveres p::before { content: "!" }, então ! aparecerá no início de cada parágrafo.

Podemos utilizar o content com ::before ou ::after para desenhar a seta a apontar para baixo (▾).

Preparar a aparência inicial

.combobox e .dropdown precisam de ter um posicionamento relative para que o popup do drop-down possa ser posicionado relativo a eles. O display: inline-block permite que a caixa de combo tenha margens, padding e contorno. Ao contrário de display: block, este permite que apareçam outras coisas na mesma linha (tais como labels ou outras caixas de combo.)

.combobox, .dropdown { 
  /* "relative" e "inline-block" (ou apenas "block") são necessários aqui
     para que "absolute" funcione corretamente nos descendentes */
  position: relative;
  display: inline-block;
}

As caixas de combo terão um contorno embutido, mas as listas drop-down não:

.combobox {
  border: 1px solid #999;
  padding-right: 1.25em; /* deixa espaço para ▾ */
}

A cor #999 é ligeiramente mais escura do que o contorno do elemento <select> do Chrome e ligeiramente mais clara do que o contorno do elemento <select> do FireFox. Por isso, não fica muito diferente do que qualquer um deles.

Como desenhamos a pequena seta para baixo (▾)?

Aqui, a dificuldade é controlar a altura. A caixa de combo pode ter conteúdo com uma dimensão imprevisível: letra pequena, letra grande, uma linha ou duas linhas. O "botão" de seta tem de ter a mesma altura para que funcione independentemente de onde o utilizador clica — qualquer sítio dentro do contorno deve funcionar.

Então, como podemos fazer com que a seta se adapte à altura do seu irmão à esquerda?
O CSS Grid (texto em inglês) consegue fazer isto muito rapidamente, mas não é suportado por todos os browsers. O Flexbox também pode conseguir fazer o trabalho, mas optei por utilizar um truque antigo para compatibilidade com browsers mais antigos: o posicionamento absoluto.

Com o posicionamento absoluto, posso obrigar a seta a ter a mesma altura do seu recipiente.

A desvantagem desta abordagem é que a seta existirá fora do fluxo normal do documento, então o browser não reservará nenhum espaço para ela. Em vez disso, vamos atribuir à caixa de combo algum padding do lado direito (acima de 1.25em), e a seta existirá dentro do padding.

No modo de posicionamento absoluto, o top alinha o limite superior do elemento em relação ao limite superior do seu recipiente: top: 0 significa que os dois limites superiores vão estar no mesmo local. De maneira semelhante, left: 0 alinha o lado esquerdo do elemento ao lado esquerdo do recipiente e por aí a fora.

Coordenadas positivas empurram o elemento "para dentro" em relação ao recipiente. Então, top: 10px quer dizer "coloca o topo do elemento 10px abaixo do topo do elemento pai", enquanto que bottom: 10px quer dizer "coloca o fundo do elemento 10px acima do fundo do elemento pai."

Neste caso, precisamos de top: 0; bottom: 0; right: 0; width: 1.25em para colocar a seta do lado direito, de cima para baixo.

.combobox > .downarrow, .dropdown > .downarrow {
  display: block;     /* Permite margin/border/padding/size */
  position: absolute; /* Coloca fora do fluxo normal */
  top: 0;    /* Alinha o topo da downarrow com a borda superior da combobox */
  bottom: 0; /* Alinha o fundo da downarrow com o fundo da combobox */
  right: 0; /* Alinha o limite direito da downarrow com o limite direito da combobox*/
  width: 1.25em;
  
  cursor: default; /* Utiliza o ponteiro em forma de seta em vez de I-beam */
  nav-index: -1; /* Define tabindex, não-funcional na maioria dos browsers */
  border-width: 0;        /* Desativado de início */
  border-color: inherit;  /* Copia a cor da borda do elemento pai */
  border-left: inherit;   /* Copia a borda do elemento pai */
}

Aqui, display: block e display: inline-block têm o mesmo efeito. Por isso, utilizei o mais curto. Também desativei o ponteiro do rato que normalmente aparece ao passar por cima de texto (visto que a seta para baixo conta como texto).

Na verdade, existe um modo de definir tabindex em CSS, chamado nav-index. Mas a maior parte dos browsers não a suporta. Por isso, se descobrires que a tua caixa de combo funciona apenas no Opera, já sabes a razão.

Deves, então, adicionar tabindex="-1" ao lado de class="downarrow".

Este código desabilita os contornos, com a ressalva de que a cor/estilo do contorno deve ser herdada do elemento pai (a caixa de combo), caso outro CSS aumente border-left-width. Já agora, podes utilizar a opção inherit em qualquer atributo que não herde atributos do elemento pai desde o início.

Decidi que deve existir um contorno à esquerda no caso do popup não abrir quando o lado esquerdo é clicado. Desse modo, a seta para baixo parece-se com um botão, sugerindo subtilmente que pode ser clicado. Lembra-te do plano: apenas dropdown, e não a combobox por si só, abrirá quando o lado esquerdo é destacado.

Portanto, vou adicionar um contorno quando combobox é utilizado por si só:

.combobox:not(.dropdown) > .downarrow {
  border-left-width: 1px;
}

De seguida, caso o utilizador nos tenha fornecido um <span class="downarrow"></span> vazio, precisamos de adicionar magicamente o caractere de seta em falta através de ::before (ou ::after) e content:

.downarrow:empty::before {
  content: '▾';
}

A seta para baixo também precisa de estar centrada no elemento .downarrow. text-align: center irá centrar o texto horizontalmente, mas centrar verticalmente é mais complicado. vertical-align: middle não funciona porque é desenhado para alinhar elementos inline com o texto à volta. O que nós queremos é alinhar o nosso pseudoelemento de seta para baixo com o recipiente pai .downarrow.

Aqui está um truque para isto:

.downarrow::before, .downarrow > *:only-child {
  text-align: center; /* Centra horizontalmente */
  /* Truque para centralizar verticalmente */
  position: relative; /* Permite que o elemento se mova */
  top: 50%;           /* Move para baixo 50% da dimensão do recipiente */
  transform: translateY(-50%); /* Move para cima 50% do tamanho do elemento */
  display: block;     /* `transform` exige block/inline-block */
}

Lembra-te que apenas adicionamos o conteúdo ::before se .downarrow estiver vazio. Se o utilizador forneceu o seu próprio elemento de seta personalizado, vamos querer centrá-lo na mesma, daí o seletor .downarrow > *:only-child.

Se a caixa de combo tiver um elemento <input>, esta não deve ter contorno:

.combobox > input {
  border: 0 /* Caixa de combo já tem um contorno */
}

A próxima parte é opcional, mas geralmente o primeiro descendente de uma caixa de combo deve ter 100% da largura da sua .combobox pai, para o caso da caixa de combo ser mais larga do que o primeiro descendente, o primeiro descendente estica para corresponder ao tamanho do elemento. Para o caso do utilizador ter construído a caixa de combo com spans em vez de divs (talvez para que possa ser colocada dentro de um <p>), pode fazer sentido definir o primeiro descendente como inline-block de modo a que possa ter padding e margens.

.combobox > *:first-child {
  width: 100%;
  box-sizing: border-box; /* para que 100% inclua contorno e padding */
  display: inline-block;
}

Preparar a lista drop-down

Inicialmente, só a queremos oculta, por isso podemos utilizar display: none.

Em preparação para quando estiver visível, no entanto, vamos definir mais algumas propriedades. Começa por position: absolute, para que fique fora do fluxo normal do documento (lembra-te de que um elemento absolute é posicionado relativo ao seu antecessor relative mais próximo, que é .combobox ou .dropdown). Quando estiver visível, é claro que deve ter um contorno e cor de fundo, além de uma sombra por baixo.

Aqui, podes ver box-shadow: 1px 2px 4px 1px #4448, que significa "apresenta uma sombra de 1px à direita do elemento, 2px para baixo, desfocada em 4px, e torna a sombra 1px mais larga do que o próprio elemento, com a cor #4448". Também precisamos de um grande z-index para que o popup apareça por cima de tudo:

.dropdown > *:last-child,
.combobox > *:last-child {
  display: none;          /* Oculto de início */
  position: absolute;     /* Fora do fluxo do documento */
  left: 0;          /* Lado esquerdo do popup = lado esquerdo do elemento pai */
  top: 100%;        /* Topo do popup = 100% abaixo do topo do elemento pai */
  border: 1px solid #999; /* Contorno cinzento */
  background-color: #fff; /* Fundo branco */
  box-shadow: 1px 2px 4px 1px #4448; /* Sombra */
  z-index: 9999;          /* Desenha por cima de tudo */
  min-width: 100%;        /* >= 100% tão largo como o recipiente */
  box-sizing: border-box; /* A largura inclui contorno e padding */
}

Aqui, utilizei left: 0 e top: 100% para posicionar corretamente o popup, mas, neste caso, acontece que o posicionamento predefinido do popup é praticamente o mesmo. Por isso, esses estilos não são realmente necessários.

Para tornar a caixa drop-down visível, tudo o que precisamos é display: block.

Que seletores vamos precisar para alcançar isto?

??? {
  display: block;
}

O mais óbvio, o drop-down deve ser apresentado nos três casos abaixo:

1. O utilizador clicou na .downarrow
2. O utilizador clicou ou utilizou a tecla tab até .dropdown
3. O utilizador clicou ou utilizou a tecla tab até um descendente de .dropdown

A caixa drop-down é o último descendente. Por isso, vamos ter de combinar o seletor *:last-child com o :focus para detetar quando uma das coisas acima for clicada ou destacada com a tecla tab:

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus              > *:last-child,
.dropdown > *:focus          ~ *:last-child {
  display: block;
}

Porém, ainda não terminamos. O que fazer se o utilizador clicar numa caixa de texto ou num link dentro da caixa drop-down? O clique vai fazer com que a .downarrow ou o .dropdown perca o destaque, o que faz com que a caixa drop-down desapareça instantaneamente.

No caso de um link, o browser destaca o link quando o botão do rato é pressionado, mas não segue o link até que o botão seja largado. Por isso, se o drop-down desaparecer instantaneamente, qualquer link no drop-down deixará de poder ser seguido!

Para corrigir isto, devemos manter a caixa aberta sempre que algo dentro do :last-child tenha o destaque:

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > *:last-child:focus-within,
.dropdown > *:last-child:focus-within {
  display: block;
}

Atenção: Isto não funciona no Edge/IE (abaixo é descrita uma alternativa).

Se a seta para baixo for clicada uma segunda vez, devemos ocultar a caixa drop-down. Isto pode ser alcançado deste modo:

.downarrow:focus {
  pointer-events: none; /* Faz com que o segundo clique feche */
}

Isto faz com que .downarrow seja invisível para eventos do rato quando tem destaque. Por isso, quando clicas nela, estás na realidade a clicar atrás dela (na .combobox). Isto faz com que perca o destaque, o que, por sua vez, faz com que a caixa drop-down desapareça.

Podemos fazer a mesma coisa para .dropdown, para que clicar novamente na área superior de um .dropdown faça com que desapareça:

.dropdown > *:not(:last-child):focus,
.downarrow:focus,
.dropdown:focus {
  pointer-events: none; /* Faz com que o segundo clique feche */
}

Isto funciona em grande parte. No entanto, caso a tua área superior contenha uma caixa de texto, existe um efeito secundário, visto que a caixa de texto não vai processar o input do rato normalmente. Descobri, contudo, que a caixa de texto ainda pode ser utilizada.

No Firefox, podes clicar e arrastar para selecionar texto se começares quando o popup está fechado, mas não funciona quando o popup está aberto. No Edge, é o oposto: podes clicar e arrastar para selecionar texto apenas quando o popup está aberto. De qualquer modo, é basicamente utilizável, visto que é provável que o utilizador tente novamente uma vez no caso do seu input não funcionar à primeira.

O comportamento do Chrome é… inconsistente. De qualquer modo, para obter um comportamento perfeito — onde um clique fecha a caixa sem causar que a caixa de texto perca o destaque — penso que é necessário utilizar JavaScript.

Toques finais

A caixa de combo normalmente deve ter uma margem. Isso, porém, parece ser opcional, visto que os controlos do <input> não têm uma em princípio:

.combobox {
  margin: 5px;
}

Vamos tornar isso mais bonito ao abrir a caixa com uma animação.

A propriedade transition é o modo mais fácil de fazer animações. Na realidade, para o nosso objetivo, um simples comando como transition: 0.4s; habilita animações para todos os estilos suportados. No entanto, até agora, o único estilo que vamos alterar é o display e as alterações ao display não podem ser animadas.

Então, vamos tentar animar uma transição de opacity: 0 para opacity: 1 ao modificar os nossos estilos existentes…

.dropdown > *:last-child,
.combobox > *:last-child {
  display: none;
  /* 
     ... outros estilos como estavam antes ...
  */
  opacity: 0;
  transition: 0.4s;
}

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > *:last-child:focus-within,
.dropdown > *:last-child:focus-within {
  display: block;
  opacity: 1;
  transition: 0.15s;
}

O tempo da transição controla quanto tempo leva a entrar no estado atual. Ou seja, este código quer dizer "demora 0.15 segundos para mostrar e 0.4 segundos para ocultar."

Acontece que a animação não funciona. O problema está no facto de que display: hidden bloqueia animações (texto em inglês). Em vez disso, precisamos de utilizar uma das outras formas de ocultar coisas. Outra forma de ocultar coisas é o visibility: hidden. Infelizmente, ele também bloqueia parcialmente animações — a animação para mostrar o popup funciona, mas a animação para ocultar, não.

Não podemos depender de opacity: 0 por si só para ocultar um elemento, porque o rato pode interagir na mesma com um elemento que tenha opacity: 0. No entanto, podemos corrigir isso com pointer-events: none.

Então, o fade-in e o fade-out em funcionamento têm este aspeto:

.dropdown > *:last-child,
.combobox > *:last-child {
  display: block;
  /* 
     ... outros estilos como estavam antes ...
  */
  transition: 0.4s;
  opacity: 0;
  pointer-events: none;
}

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > *:last-child:focus-within,
.dropdown > *:last-child:focus-within {
  display: block;
  transition: 0.15s;
  opacity: 1;
  pointer-events: auto;
}

Outra forma de embelezar que podemos adicionar é mover o popup para a posição, tal como animar o top:

.dropdown > *:last-child,
.combobox > *:last-child {
  display: block;
  /* 
     ... outros estilos como estavam antes ...
  */
  top: 0;
  opacity: 0;
  transition: 0.4s;
  pointer-events: none;
}

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > *:last-child:focus-within,
.dropdown > *:last-child:focus-within {
  display: block;
  top: 100%;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
}

Decidi que isto é um pouco "excessivo" e não incluí esta parte na versão final.

Por fim, devemos ter um retângulo — um contorno a mostrar quando a caixa de combo está "ativa".

Primeiro, vamos adicionar o retângulo de destaque para essa seta para baixo:

.downarrow:focus {
  outline: 2px solid #48F8;
}

Idealmente, teríamos um retângulo de destaque para a própria caixa de combo, como isto:

.combobox:focus-within {
  outline: 2px solid #48F;
}

Isto funciona bem no Chrome. No Firefox, porém, o outline é expandido para além do contorno para englobar toda a caixa de popup, que fica com um aspeto um pouco estranho, especialmente se a caixa de popup não tiver a mesma largura da parte do topo. No Edge, o contorno nem sequer aparece porque o Edge não suporta :focus-within (ver abaixo). Então, o que podemos fazer em vez disso?

Decidi utilizar isto:

.combobox > *:not(:last-child):focus {
  outline: 2px solid #48F8;
}

Isso desenha um contorno à volta do elemento filho destacado em vez da própria caixa de combo. Por vezes, no entanto, também fica estranho se o filho não tiver o mesmo tamanho da caixa de combo que o engloba. Por isso, adicionei transparência (#48F8 em vez de #48F) para o tornar menos visível, e consequentemente, com um aspeto menos estranho no pior dos casos.

Manter aberto

Os estilos que temos para já mantêm a caixa aberta apenas quando algo tem destaque. Por isso, se clicares em texto na área popup, o popup fecha. Para a última versão, expandi a lista de razões para manter o popup aberto para incluir um estilo sticky, que manterá o drop-down aberto ao passar o rato por cima, de modo a que, ao clicar, não feche a caixa.

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > *:last-child:focus-within,
.dropdown > *:last-child:focus-within,
.combobox > .sticky:last-child:hover,
.dropdown > .sticky:last-child:hover {
  display: block;
  top: 100%;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
}

Tal como abordei anteriormente, ocorrem erros quando a área do topo de uma caixa de combo tem uma caixa de texto. Para te permitir evitar facilmente este problema, ajustei o CSS existente para que o estilo pointer-events: none não seja aplicado quando o elemento .dropdown também tem a classe sticky:

.dropdown:not(.sticky) > *:not(:last-child):focus,
.downarrow:focus,
.dropdown:focus {
  pointer-events: none; /* Faz com que o segundo clique feche */
}

Por fim, se uma lista .dropdown contém links, existe uma pequena inconveniência. Após clicar num link, a lista não fechará automaticamente porque o link tem o destaque e programamos o drop-down para não fechar quando um descendente tem o destaque.

Para evitar isso, adicionei suporte para uma nova classe less-sticky. Tal como sticky, less-sticky mantém o popup aberto quando o rato passa por cima. Ao contrário de sticky, less-sticky não mantém o popup aberto quando um descendente tem o destaque.

Então, a nossa nova lista de seletores está a ficar bastante longa:

.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > .sticky:last-child:hover,
.dropdown > .sticky:last-child:hover,
.combobox > .less-sticky:last-child:hover,
.dropdown > .less-sticky:last-child:hover,
.combobox > *:last-child:focus-within:not(.less-sticky),
.dropdown > *:last-child:focus-within:not(.less-sticky) {
  display: block;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
  top: 100%;
}

Ainda nem sequer terminamos, porque isto ainda não é compatível com o Edge e com o Internet Explorer.

Casos do Edge

Assim que coloquei a minha caixa de combo a trabalhar perfeitamente no Firefox e no Chrome, fiquei transtornado ao ver que ficava feia e completamente inutilizável no Edge. O que correu mal?

Em primeiro lugar, os contornos desapareceram porque o Edge e o IE não suportam transparência nos contornos, como em rgb(200,150,100,50) ou #8888. Utilizei #8888 para o contorno. Para fazer com que funcione no Edge, alterei-o para #999.

Outra alternativa é fornecer um contorno não opaco só para o Edge:

border: 1px solid #888;  /* Edge/IE não têm suporte para transparência do contorno */
border: 1px solid #8888; /* Restantes browsers */

Em segundo lugar, não importa quantas vezes clicas — as div do drop-down simplesmente não abrem!

Ao resolver este problema, aprendi algo novo — se um browser não compreender um seletor utilizado numa declaração CSS, este irá ignorar todo o bloco.

Por exemplo, se escreveres .x, .y, .z:unknown { margin:1em }, então x e y não vão ter margens simplesmente porque o browser não compreende o unknown.

Acontece que o Edge não compreende o :focus-within, que é o responsável por permitir que a área do drop-down permaneça aberta quando um elemento input dentro da área drop-down é clicado. O problema foi ter misturado seletores suportados e não suportados.

De maneira a fazer com que funcione no Edge, precisava de repetir todo o bloco de estilos "como-abrir-a-lista-de-drop-down" separadamente para os seletores que utilizam :focus-within, de modo que esses seletores não impeçam que outros seletores funcionem.

Depois, como alternativa para a falta de :focus-within, decidi tentar detetar o Edge (texto em inglês) e manter automaticamente qualquer lista .dropdown aberta quando o rato está a passar por cima, no estado :hover, neste caso. Assim, ainda é possível utilizar um elemento destacado (tal como um a href ou input) dentro da área drop-down, embora desapareça precocemente caso o rato saia de cima.

O código para tudo isso é o seguinte:

/* Lista de situações para as quais apresentar a lista dropdown. */
.combobox > .downarrow:focus ~ *:last-child,
.dropdown:focus > *:last-child,
.dropdown > *:focus ~ *:last-child,
.combobox > .sticky:last-child:hover,
.dropdown > .sticky:last-child:hover,
.combobox > .less-sticky:last-child:hover,
.dropdown > .less-sticky:last-child:hover,
.combobox > *:last-child:focus:not(.less-sticky),
.dropdown > *:last-child:focus:not(.less-sticky) {
  display: block;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
}

/* focus-within não é suportado pelo Edge/IE. Seletores não suportados fazem com que todo o bloco seja ignorado, por isso temos de repetir todos os estilos de modo separado para o focus-within. */
.combobox > *:last-child:focus-within:not(.less-sticky),
.dropdown > *:last-child:focus-within:not(.less-sticky) {
  display: block;
  opacity: 1;
  transition: 0.15s;
  pointer-events: auto;
}

/* Deteta o Edge/IE e comporta-se como se less-sticky estivesse ativo para todos os dropdowns (caso contrário não é possível clicar nos links) */
@supports (-ms-ime-align:auto) {
  .dropdown > *:last-child:hover {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Deteta o IE e faz a mesma coisa. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .dropdown > *:last-child:hover {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
}

Em terceiro, o estilo outline não estava a funcionar no Edge. O problema era novamente que o Edge não tem suporte para contornos não opacos.

A solução é um estilo especial de transparência para o Edge:

outline: 2px solid #8AF; /* Edge/IE não consegue lidar com a transparência do contorno */  
outline: 2px solid #48F8;

Em quarto, eu tinha colocado duas caixas de combo dentro de um elemento <label>. Tentar abrir a segunda abre sempre a primeira, em vez disso. Acontece que, no Edge, se estiveres a utilizar um rato, podes selecionar apenas o primeiro elemento input dentro de uma label.

Em quinto, as caixas de drop-down não tinham sombras. Mais uma vez, isto era por ter utilizado uma sombra não opaca. Mais uma vez, o Edge precisava do seu próprio CSS especial:

box-shadow: 1px 2px 4px 1px #666; /* O Edge não consegue lidar com a transparência da sombra */
box-shadow: 1px 2px 4px 1px #4448;

O Internet Explorer 11 tem praticamente as mesmas limitações. Por isso, corrigir o Edge consertou praticamente o IE, com a exceção de que era necessária uma deteção de browser diferente para o IE em comparação com o Edge.

Sincronizar o popup com a área superior

Infelizmente, o CSS não pode fazer isso por nós. Por isso, na demonstração final, é utilizado JavaScript para atualizar a parte superior da caixa de combo quando a parte do popup é alterada. Por exemplo, utilizei este código com base em jQuery para atualizar a parte superior do selecionador de cor:

function parentComboBox(el) {
  for (el = el.parentNode; el && 
    Array.prototype.indexOf.call(el.classList, "combobox") <= -1;)
    el = el.parentNode;
  return el;
}
$(".combobox .color").mousedown(function() {
  var c = this.style.backgroundColor;
  $(parentComboBox(this)).find(".color")[0].
    style.backgroundColor = c;
});

Versão final

Clica aqui para veres uma demonstração com código-fonte no CodePen.

Traduzido em português europeu

O CSS fornece a estilização de um site.

A propriedade background permite-te utilizar imagens e cores para criar o fundo das tuas páginas web.

Exemplo de background-color

A propriedade background-color permite-te escolher a cor do teu elemento. Isto pode ser o fundo de toda a página ou de uma secção da tua página.

• Um elemento é uma parte do HTML como um cabeçalho ou um parágrafo numa página web.

Aqui está um exemplo de uma definição da cor de fundo de uma página web para verde.

  body {
    background-color: green;
  }

Aqui está um exemplo da definição das cores de dois elementos. Isto definirá o fundo do cabeçalho para roxo e do resto da página para azul.

  body {
    background-color: blue;
  }
  h1 {
    background–color: purple;
  }

Em CSS, a cor pode ser definida de três maneiras:

• Um nome de cor válido como blue
• Um valor HEX como #FFFFF (Este é o valor hexadecimal para branco.)
• Um valor RGB como rgb(76,175,80) (Este é o valor RGB para verde claro.)

Imagens de fundo

Podes utilizar a propriedade background-image para definir uma imagem como fundo de um elemento. A imagem é repetida quando algum valor não é explicitamente definido para a propriedade repeat, de modo a que ocupe todo o elemento.

body {
  background-image: url("barn.jpg");
}

Também podes fazer a ligação com imagens ou gifs que encontres on-line, ao utilizar o seu link (por exemplo, de uma pesquisa das imagens do Google).

body {
  background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif");
}

Background-image – a propriedade repeat

A imagem de fundo é repetida tanto na vertical (cima e baixo) como na horizontal (ao longo da página) quando a propriedade não é explicitamente definida. Podes utilizar a propriedade background-repeat para repetir a imagem verticalmente ou horizontalmente.

Aqui está um exemplo que repete a imagem verticalmente:

body {
  background-image: url("barn.jpg");
  background-repeat: repeat-y;
}

Podes repetir a imagem horizontalmente ao definir a propriedade background-repeat para "repeat-x".

body {
  background-image: url("barn.jpg");
  background-repeat: repeat-x;
}

Também podes utilizar a propriedade background-repeat para definir uma imagem para não repetir.

body {
  background-image: url("barn.jpg");
  background-repeat: no-repeat;
}

Background-image – a propriedade position

Podes utilizar a propriedade background-position para especificar onde será localizada a tua imagem numa página web.

body {
  background-image: url("barn.jpg");
  background-repeat: no-repeat;
  background-position: right top;
}

Background-image – a posição fixed

Podes utilizar a propriedade background-attachment para definir uma imagem para uma posição fixa. Uma posição fixa faz com que uma imagem não desça com o resto da página.

body {
  background-image: url("barn.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Gradientes de fundo

Um gradiente é uma transição entre duas ou mais cores e pode ser utilizado via CSS, de modo semelhante a uma imagem de fundo.

A sintaxe de um gradiente pode ser um pouco complexa e ainda é geralmente utilizada com prefixos de fornecedor, devido a inconsistências entre navegadores suportados.

O Colorzilla Gradient Editor é uma ótima ferramenta on-line para gerar gradientes personalizados e o respetivo código CSS associado.

Background – a versão reduzida da propriedade

Podes escrever as propriedades do fundo numa só linha. A isto, chama-se a versão reduzida da propriedade (em inglês, shorthand).

body {
  background: url("barn.jpg") no-repeat right top;
}

Podes omitir as propriedades que não precisas quando utilizares a versão reduzida da propriedade, mas as propriedades devem ser utilizadas numa determinada ordem. A ordem é:

• color
• image
• repeat
• attachment
• position

Várias imagens de fundo

Podes especificar várias imagens de fundo numa só propriedade background.

body {
  background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
}

A primeira imagem (ou gradiente) especificada é a que fica mais acima, a segunda vem a seguir e assim adiante. Se um dos elementos não estiver correto por causa do seu URL ou sintaxe, toda a linha será ignorada pelo navegador.

Algumas propriedades básicas de fundo em CSS

As propriedades de fundo do CSS são utilizadas para definir os efeitos do fundo para os elementos.

Propriedades de fundo do CSS: background-color, background-image, background-repeat, background-attachment, background-position

Exemplo de um breakpoint em CSS

Um breakpoint em CSS é um ponto específico onde o aspeto do site altera, com base na ativação de uma media query (texto em inglês).

Geralmente, especificas um breakpoint quando queres adaptar o aspeto do teu site ao tamanho da janela do navegador; maioritariamente, à largura da janela.

Por exemplo, se o conteúdo do teu site ficar muito bem numa janela mais estreita (como num navegador de um smartphone), mas começa a ter mau aspeto em ecrãs de maior dimensão (por exemplo, talvez o tamanho de letra seja muito pequeno ou difícil de ler), então podes introduzir um novo breakpoint para ecrãs maiores que torna o tamanho de letra maior:

Os breakpoints do CSS podem ser considerados como o coração do design responsivo para a web, pois definem como se comporta ou organiza o conteúdo em diferentes larguras/escalas de dispositivos. Isto permite-te apresentar o melhor aspeto possível ao utilizador.

Definição de breakpoints

Os breakpoints são geralmente definidos com base em qualquer um dos seguintes:

• Breakpoints com base na largura do dispositivo
• Breakpoints com base no conteúdo

Breakpoints com base na largura do dispositivo

É bastante evidente que os nossos dispositivos não têm todos as mesmas larguras/dimensões. É agora uma decisão de design incluir um conjunto de dispositivos em particular e programar as regras do CSS adequadamente.

Já temos dispositivos que chegue para nos causar preocupação. Quando é lançado um novo com uma largura diferente, voltar atrás para o nosso CSS e adicionar um novo breakpoint outra vez consome muito tempo.

Aqui está um exemplo:

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: portrait) {

}

/* Landscape */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2)

and (orientation: landscape) {

}

/* ----------- Google Pixel ----------- */

/* Portrait */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: portrait) {

}

/* Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3)

and (orientation: landscape) {

}

Com esta abordagem, acabarás por ter uma lista enorme de media queries.

Breakpoints com base no conteúdo

Esta é a escolha preferencial para quando são criadas ou escritas as regras do breakpoint. Como é mais fácil ajustar o teu conteúdo de acordo com um layout em particular apenas quando este precisa de uma alteração.

@media only screen (min-width: 768px){
...
}

Este breakpoint faz com que o CSS seja aplicado quando a largura do dispositivo é de 768px ou acima.

Também podes definir um intervalo com os breakpoints, para que o CSS seja aplicado apenas dentro desses limites.

@media only screen and (min-width: 768px) and (max-width: 959px){

...

}

Nota: tenta sempre criar breakpoints com base no teu próprio conteúdo, e não nos dispositivos. Divide-os em larguras lógicas em vez de uma largura aleatória e mantém o valor como um número fácil de gerir, de modo a que fazer modificações continue simples e claro.

Os breakpoints do CSS são úteis quando queres atualizar os estilos com base no tamanho do ecrã. Por exemplo, para um dispositivo a medir 1200px de largura ou acima, utiliza o font-size: 20px;. Caso contrário, utiliza o font-size: 16px;.

Começamos com dispositivos com dimensões maiores do que 1200px, a largura de um portátil comum. Também podes ter reparado que mencionamos 'maior do que', o que significa que, de certo modo, estamos a utilizar uma espécie de instrução 'if-then'.

Vamos transformar isto em código CSS:

.text1 {
    font-size: 16px;
}
@media (min-width: 1200px) {
    .text1 {
        font-size: 20px;
    }
}

Por conveniência, escrevemos primeiro os estilos básicos para .text1… e depois vamos especificar as regras de @media.

Dica: podes verificar numa framework de CSS comum chamada 'Bootstrap', que adotaram o 'min-width' para cima na sua versão Bootstrap v4.0, em comparação com a antiga versão Bootstrap v3.0, que utilizava ‘max-width’ para baixo. Isto é apenas uma preferência, e não há problema nenhum em dizer 'deste tamanho para baixo' versus 'deste tamanho para cima'.

É completamente correto utilizar @media (max-width) {}. Aqui está um exemplo:

.text1 {
    font-size: 20px;
}
@media (max-width: 1199px) {
    font-size: 16px;
}

// Normal, estilos básicos
// que ficam com bom aspeto em monitores mais pequenos
// mas não em monitores maiores
body {
  font-size: 16px;
}

// Define um novo breakpoint, com uma media query.
// Neste caso, para quando a largura do viewport
// tenha pelo menos 512px de largura.
@media (min-width: 512px) {
	body {
		font-size: 20px;
	}
}

Os breakpoints que são baseados no conteúdo e não no dispositivo são menos complicados. Aqui está uma pequena amostra que é ativada quando a largura do dispositivo é superior a code 700px, aproximadamente o tamanho de um smartphone

@media only screen and (min-width: 700px) {
  algo {
    algo: algo;
  }
}

Também é possível definires uma largura mínima e máxima, o que te permite experimentar intervalos diferentes. Este é ativado aproximadamente entre o tamanho de um smartphone e tamanhos maiores de monitores:

@media only screen and (min-width: 700px) and (max-width: 1500px) {
  algo {
    algo: algo;
  }
}

Exemplo de cores no CSS

Cores

CSS Colors é um módulo do CSS que lida com cores, tipos de cores, mistura de cores e transparência. Nem todas as propriedades do CSS que recebem (a) como valor fazem parte deste módulo, mas dependem dele.

Em CSS, podes alterar a cor de praticamente todos os elementos na tua página HTML. Propriedades como background-color, color e border-color definem a cor desses elementos.

O CSS suporta nomes de cor, valores hexadecimais e cores RGB. Para além da introdução da declaração opacity, as cores em CSS3 podem agora ser especificadas através do nome da cor, ou com valores RGB, HEX, HSL, RGBA e HSLA.

O HTML suporta 140 nomes de cor predefinidos.

RGB(A)

RGB significa "Red, Green, Blue" (vermelho, verde e azul, em português). Um valor RGB é uma combinação da intensidade dos valores de vermelho, verde e azul. Cada um deles está entre 0 (preto) e 255 (intensidade máxima). Os valores de cor RGBA são uma extensão dos valores de cor RGB com um canal alfa – que especifica a transparência da cor. O parâmetro alfa é um número entre 0.0 (totalmente transparente) e 1.0 (totalmente opaco).

Um valor de cor RGB é especificado com: rgb(vermelho, verde, azul). Um valor de cor RGBA é semelhante, com o valor de alfa na última posição: rgba(vermelho, verde, azul, alfa).

HSL(A)

HSL significa "Hue, Saturation and Lightness" (tom, saturação e brilho, em português). O tom é o grau na roda das cores (de 0 a 360): 0 (ou 360) é vermelho, 120 é verde, 240 é azul. A saturação é um valor em percentagem: 100% é a cor total. O brilho também é uma percentagem; 0% é escuro (preto) e 100% é branco.

Os valores de cor HSLA são uma extensão dos valores de cor HSL com um canal alfa – que especifica a transparência de uma cor.

Um valor de cor HSL é especificado com: hsl(tom, saturação, brilho). Um valor de cor HSLA é semelhante, com o valor de alfa na última posição: hsla(tom, saturação, brilho, alfa).

CMYK

As cores CMYK são uma combinação de CYAN, MAGENTA, YELLOW e BLACK (ciano, magenta, amarelo e preto, em português). Os monitores de computador exibem as cores utilizando valores de cor RGB. As impressoras geralmente apresentam as cores utilizando valores de cor CMYK. Os valores CMYK não são suportados em HTML, mas estão sugeridos como uma nova predefinição no CSS4.

Cores de exemplo: vermelho CMYK: cmyk(0%, 100%, 100%, 0%), verde CMYK: cmyk(100%, 0%, 100%, 0%), ou azul CMYK: cmyk(100%, 100%, 0%, 0%).

Hexcodes

Hexcode, abreviatura para código hexadecimal (hexadecimal code, em inglês), é um modo de expressar um valor de cor no teu computador. Tem este nome porque podem ser utilizados 16 símbolos únicos como valores. Neste caso, são utilizados os números de 0 a 9 e as letras de a até f.

Os códigos hexadecimais são expressados neste formato: #000000, que, neste caso, seria a cor preto. São utilizados seis caracteres em cada hexcode, utilizando qualquer um dos 16 caracteres mencionados anteriormente. Estes seis caracteres são divididos em três pares de dois.

Cada um destes três pares expressa um valor para a quantidade de vermelho, verde e azul numa cor em particular. Se pegarmos no hexcode da cor #AA11BB, AA é a quantidade de vermelho, 11 é a quantidade de verde e BB é a quantidade de azul. 0 é o valor mais baixo de uma cor, enquanto que f é o valor mais elevado.

Os códigos hexadecimais são insensíveis a maiúsculas e minúsculas, o que significa que #FFFFFF e #ffffff seriam a mesma cor: branco.

Adicionalmente, existem 16,777,216 combinações de cores possíveis através da utilização do hexcode.

Transparência

A propriedade opacity do CSS3 define a transparência para todo o elemento (tanto a cor de fundo como o texto serão opacos/transparentes). Ao contrários dos valores de alfa com rgba e hsla, a transparência é herdada pelos elementos descendentes.

O valor da propriedade opacity deve ser um número entre 0.0 (totalmente transparente) e 1.0 (totalmente opaco).

Exemplos

<html>
  <body>
    <p>Hello World</p>
  </body>
</html>

body {
  background-color: green;
  color: white;
}

No exemplo acima, o background-color: green torna o elemento <body> verde. Isto torna toda a página web verde. Os elementos <p> também ficam todos brancos depois de color: white. Podes utilizar nomes de cores, como green, blue, yellow, red, purple e muitas outras. Para cores personalizadas, contudo, podes utilizar códigos hexadecimais (#147ACC), valores RGB  (rgb(20, 122, 204)) e até mesmo valores HSL (hsl(145, 59%, 30%)).

p {
  color: rgba(244, 145, 14, 0.80); // laranja vivo
}

h2 {
 color: #FA8072; //salmão 
}

Também podes adicionar um valor alfa ou transparência às cores. A transparência permite que seja sobreposto texto sobre uma imagem e que se mantenha a imagem parcialmente visível através do texto, ou pode ser utilizada para alterar a tonalidade da cor, caso não existam outros elementos à frente ou atrás do texto. Utiliza rgba() ou hsla() e preenche os teus valores de cor. O valor alfa fica em último e é uma percentagem convertida em número decimal (por exemplo, 20% é 0.2, 75% é 0.75, etc.).

body {
  background-color: hsl(184, 87%, 94%); // azul vivo
}

O exemplo acima apresenta parágrafos estilizados a laranja vivo e com 20% de transparência, elementos h2 com cor-de-rosa salmão e a cor de fundo do body a azul vivo.

Para fazer com que as cores personalizadas funcionem em CSS, podes achar útil encontrar um selecionador de cores. Alguns editores de texto têm selecionadores de cor incorporados, como, por exemplo, o Visual Studio Code. Se pesquisares "color picker" no Google ou no DuckDuckGo, encontrarás um selecionador de cor que possas utilizar. O Google Chrome e o Firefox também têm add-ons de seleção de cores que podes instalar. O Adobe Color CC não só ajuda a escolher uma cor, como também ajudará a escolher um esquema de cores para a tua página!

É uma boa ideia verificares se tens contraste suficiente entre o texto e as cores de fundo ao utilizar uma ferramenta como o Verificador de Contraste de Cor do WebAIM.

Cores num exemplo de CSS

As cores em CSS são utilizadas para dar cor aos elementos nas tuas páginas web. Existem muitas formas de atribuir cores aos elementos. Podes utilizar o nome das próprias cores, os seus valores RGB ou os valores hexadecimais. Em CSS3, o hsl (tom-saturação-brilho) foi adicionado à especificação.

Nomes de cores

Atualmente, existem 140 nomes de cor suportados em HTML, que podem ser atribuídos em regras CSS simplesmente ao escrever o nome da cor. Por exemplo:

Sintaxe

p {
  color: green;
}

Esta regra altera a cor de letra de todos os elementos <p> para verde.
Podes ver a lista completa das 140 cores aqui: https://www.w3schools.com/colors/colors_names.asp

Valores RGB

RGB significa “Red”, “Green” e “Blue” (vermelho, verde e azul, em Português) e também podemos atribuir cores ao escrever o seu valor RGB nas nossas regras. Um valor RGB teria este aspeto: rgb(255,0,0), onde cada número define a quantidade de cada cor que estará na mistura final.

Os valores variam entre 0 e 255. No nosso exemplo, podemos observar que apenas o primeiro valor é 255, enquanto que os outros dois estão definidos para 0. Isto quer dizer que existe apenas vermelho no nosso valor e o respetivo elemento será pintado de vermelho. Um valor RGB de (0, 0, 0) resulta em preto e um valor de (255, 255, 255) resulta em branco.

É impossível tentar memorizar todos os códigos de cor. Por essa razão, existem inúmeras ferramentas on-line para escolheres as cores que desejas para os teus projetos. Por exemplo: https://www.w3schools.com/colors/colors_picker.asp ou http://htmlcolorcodes.com/color-picker/.

p {
  color: rgb(0, 255, 0);
}

Esta regra altera a cor do texto de todos os elementos p para verde, tal como acima.

Valores hexadecimais

Valores hexadecimais são mais uma forma de definir cores em CSS e funciona de modo bastante semelhante aos valores RGB.

Um código hexadecimal aleatório teria este aspeto: #29432b, onde os dois primeiros caracteres após o cardinal (#) correspondem à quantidade de vermelho na mistura, os segundos dois correspondem à quantidade de verde e os últimos dois correspondem à quantidade de azul.

Os valores #000000 e #ffffff correspondem a preto e a branco, respetivamente.
Podes encontrar os códigos de cor hexadecimais específicos ao utilizar as mesmas ferramentas mencionadas para os valores RGB.

Sintaxe

p {
  color: #00fe00;
}

Esta regra também altera a cor do texto de todos os elementos p para verde.

HSL

O HSL tem três valores. O primeiro é Hue (tom), que é medido em graus. Então, 0 (ou 360) representa a cor vermelho, aos 120 é verde e aos 240 é azul.

O segundo valor é Saturation (saturação), que tem um valor em percentagem com um intervalo de 0 a 100%.

E o terceiro valor é Lightness (brilho), que também tem um valor em percentagem com um intervalo de 0 a 100%. 0% é preto escuro, 50% é meio termo, 100% é branco.

Sintaxe

p {
  color: hsl(0, 100%, 50%);
}

Resultado

JSfiddle

Por que utilizar valores RGB ou HEX?

Os nomes de cores só abrangem 140 valores, enquanto que os valores RGB e HEX têm 16,777,216 de combinações possíveis. Por isso, se quiseres que os teus projetos tenham exatamente o aspeto que imaginaste, deves utilizar estas duas opções e aproveitar os nomes de cores para simulações e testes.

A palavra-chave currentColor

A palavra-chave currentColor, tal como o nome sugere, é um valor de cor válido em CSS. Isto representa o valor específico da propriedade color do elemento. Isto permite-te utilizar o valor da propriedade color para propriedades que não recebem este valor quando ele não é explicitamente definido.

Por exemplo, se declarares cada div para ter um contorno de 3px com a cor currentColor, significa que o contorno de cada div será da mesma cor que o valor da sua propriedade color:

div{
  /* A palavra-chave currentColor para o valor da cor, o que significa que o contorno terá o valor da respetiva propriedade de cor da div */
  border: 3px solid currentColor;
}

/* Esta div terá contorno verde, porque o seu valor de cor é verde. */
#div1{
  color: green;
}

/* Esta div terá contorno azul, porque o seu valor de cor é azul. */
#div2{
  color: blue;
}

Aplicação prática com um SVG

Aqui está um exemplo muito comum na web – um botão com um ícone SVG e texto dentro dele. A cor do contorno, texto e ícones altera ao passar o rato por cima do botão. A imagem abaixo retrata o estado inicial e o estado quando o rato está por cima do botão, por ordem.

Os ícones de fontes também podem ser utilizados para este propósito, mas existem várias vantagens em utilizar SVG em linha em vez de ícones de fontes. Isto pode fazer com que os SVGs sejam a escolha de muitos programadores. Citando o CSS-Tricks,

Pode ser frustrante posicionar um ícone de fonte. Os ícones são inseridos por meio de pseudoelementos, e dependem de line-height, vertical-align, letter-spacing, word-spacing, como o fonte está desenhada (tem espaço natural à sua volta? tem informação de kerning?). Então, o tipo de display dos pseudoelementos causa efeito se essas propriedades tiverem ou não algum efeito. Um SVG tem apenas a dimensão que tem.

Resumindo, por vezes pode ser frustrante utilizar ícones de fonte em conjunto com o texto.

Poderíamos utilizar este nosso código para alcançar este comportamento desejado:

button {
  color: #016898;
}

.emailIcon {
  fill: #016898;
}

button:hover {
  color: #19B5FE;
}

button:hover .emailIcon {
  fill: #19B5FE;
}

Agora, em vez de alterar explicitamente a cor de fill (preenchimento) do SVG ao passar o rato por cima, podemos definir o preenchimento para currentColor. Isto altera automaticamente a cor do SVG para o valor da propriedade color do botão. Agora só precisamos de alterar a propriedade color do botão. Isto torna o código CSS mais curto e inteligente:

.emailIcon {
  fill: currentColor;
}

button {
  color: #016898;
}

button:hover {
  color: #19B5FE;
}

Dá uma vista de olhos ao exemplo em https://repl.it/NNt9/2.

Exemplo de media queries em CSS3

As media queries permitem-te ter estilos diferentes para tamanhos de dispositivos/ecrãs diferentes.

A melhor abordagem ao desenhar um site responsivo é pensar primeiro em dispositivos móveis; o que significa que começas a criar a tua página com o aspeto e conteúdo da versão para dispositivos móveis.

Podes pensar que com uns tamanhos escalonáveis ( %, vw ou vh ) a tua página se adapte de forma perfeita a qualquer dispositivo. Isso, porém, não vai acontecer. Talvez para um aspeto muito básico, mas garantidamente não funcionará em páginas mais comuns ou complexas!

Ao desenhares a tua página para dispositivos mais pequenos, o teu foco será no conteúdo principal. Num ecrã maior, terás de readaptar alguns tamanhos de letra, margens, paddings, entre outros, de modo a manter a tua página confortável e legível. Também vais querer/precisar adicionar mais conteúdo, as partes que não achaste fundamentais e preencher o espaço vazio criado pelo tamanho do ecrã.

O processo de pensamento deve ser:

1. Que conteúdo apresentar?
2. Como organizar?
3. Dimensões?

A sintaxe básica

    @media only screen and (min-width: 768px) {
      p {padding: 30px;}
    }

A tag p terá um padding de 30px assim que o ecrã atingir a largura mínima de 768px.

A sintaxe de AND

  @media only screen and (min-height: 768px) and (orientation: landscape) {
    p {padding: 30px;}
  }

A tag p terá um padding de 30px assim que o ecrã atingir a altura mínima de 768px e a orientação do ecrã esteja no modo landscape.

A sintaxe de OR

    @media only screen and (min-width: 768px), (min-resolution: 150dpi) {
      p {padding: 30px;}
    }

A tag p terá um padding de 30px assim que o ecrã atingir a largura mínima de 768px ou a sua resolução atinja no mínimo 150dpi.

Exemplo de fontes no CSS

As diferentes propriedades de fonte do CSS definem o tamanho, peso, estilo, altura de linha e fonte/tipo de letra do texto na página.

Fonte

A fonte ou tipo de letra do texto é definida ao utilizar a propriedade font-family.

Esta propriedade funciona com um sistema de reserva – se o teu navegador não suportar a primeira fonte, este tentará cada uma das fontes subsequentes até encontrar uma que seja suportada. Se o nome da fonte for maior do que uma palavra, este deve estar entre aspas. Por exemplo:

p {
    font-family: "Times New Roman", Times, serif;   
}

A fonte Times New Roman é constituída por três palavras e deve ser colocada entre aspas. Por outro lado, serif é apenas uma palavra e não precisa das aspas.

O último item na lista deve ser sempre uma fonte genérica, como serif, sans-serif, monospace, cursive, fantasy, system-ui.

Estilo de fonte

A propriedade font-style pode ser utilizada para tornar o texto itálico ou oblíquo.

Existem três valores possíveis para esta propriedade:

• normal - O texto é apresentado no modo normal
• italic - O texto é apresentado em itálico
• oblique - O texto é apresentado inclinado

.normal {
    font-style: normal;
}

.italic {
    font-style: italic;
}

.oblique {
    font-style: oblique;
}

Tamanho de letra

Utiliza a propriedade font-size para ajustar o tamanho do texto. O tamanho de letra predefinido é 16px em maior parte dos navegadores.

Aqui estão os valores de tamanho de letra mais utilizados:

• px (pixeis)
• em - 1em – o tamanho de letra do elemento pai
• rem – o tamanho de letra do elemento raíz
• % - percentagens

.with-pixels {
    font-size: 14px;
}

.with-ems {
    font-size: 0.875em;
}

.with-absolute {
    font-size: large;
}

.with-percentage {
    font-size: 80%;
}

Peso da fonte

A propriedade font-weight ajusta o peso do texto. Esta propriedade aceita valores de palavra-chave como bold ou normal, além de valores numéricos de palavra-chave, como 400  700.

Aqui estão alguns valores de palavras-chave e palavras-chave numéricas comuns:

O valor predefinido para o peso da fonte é 400 ou normal.

p {
   font-weight: bold
}

Nota: nem todas as palavras-chave ou palavras-chave numéricas estão disponíveis para todas as famílias de fonte. Por exemplo, se estiveres a carregar uma fonte do Google Fonts, precisarás de selecionar todos os pesos de fonte que desejas utilizar.

Exemplo de alinhamento de texto em CSS

Esta propriedade do CSS descreve o alinhamento horizontal do conteúdo em linha no seu bloco pai. text-align não controla o alinhamento dos elementos do bloco, este afeta apenas o seu conteúdo em linha.

Valores:

A propriedade text-align é especificada como uma única palavra-chave escolhida a partir da lista de valores abaixo:

text-align: left; alinha o texto à esquerda

text-align: right; alinha o texto à direita

text-align: center; alinha o texto ao centro

text-align: justify; faz com que as linhas tenham todas a mesma largura

text-align: justify-all; faz com que as linhas tenham todas a mesma largura, incluindo a última linha

text-align: start; alinha a última frase ao início da linha

text-align: end; alinha a última frase ao final da linha

text-align: match-parent; calcula o início e fim do valor na direção do elemento pai e substitui pelo valor apropriado de left ou right.

Valores de alinhamento de bloco (sintaxe não predefinida):

text-align: -moz-center;

text-align: -webkit-center;

Valores globais:

text-align: inherit; herda do seu elemento pai

text-align: initial; valor predefinido

text-align: unset; aplica quer o valor inherit quer o initial, com base nas propriedades predefinidas do elemento

Exemplo do modelo de caixas do CSS

Compreender o modelo de caixas do CSS é crucial para sermos capazes de organizar corretamente uma página web.

Quando um navegador renderiza (desenha) uma página web, cada elemento, por exemplo, um pedaço de texto ou uma imagem, é desenhado como uma caixa retangular seguindo as regras do modelo de caixas do CSS.

No centro da caixa está o próprio conteúdo, que ocupa uma determinada altura e largura. Esta região é conhecida como área de conteúdo. A dimensão da área de conteúdo pode ser determinada automaticamente, ou então podes definir explicitamente uma altura e largura (ver nota abaixo sobre box-sizing).

À volta da área de conteúdo, existe uma região conhecida como área de padding. A dimensão do padding pode ser a mesma a toda a volta (definido com padding), ou então podes definir o padding de maneira individual para o topo, direita, baixo e esquerda (com padding-top, padding-right, padding-bottom e padding-left).

De seguida temos a Área de Contorno. Isto cria um contorno à volta do elemento e do seu padding. Podes definir a grossura (border-width), cor (border-color) e estilo (border-style) do contorno. As opções de estilo incluem none (sem contorno), solid, dashed, dotted e muitas mais.

Adicionalmente, podes definir o contorno nos 4 lados de maneira individual; por exemplo, o contorno do topo com border-top-width, border-top-color e border-top-style para a largura do contorno, cor e estilo (ver nota abaixo sobre box-sizing).

Por último, existe a área de margem. Isto cria espaço livre à volta do elemento, do padding e do contorno. Novamente, podes definir de modo individual as margens para o topo, direita, baixo e esquerda (com margin-top, margin-right, margin-bottom e margin-left). Em algumas circunstâncias, o colapso de margens ocorre e as margens de elementos adjacentes podem ser partilhadas.

Propriedade box-sizing: O valor predefinido para esta propriedade é content-box. Se utilizares a predefinição, então o modelo da caixa permitirá que o autor especifique a dimensão da área de conteúdo. No entanto, é possível utilizar isto para especificar a dimensão da área de contorno. Isto é feito ao alterar a propriedade box-sizing para border-box. Isto pode por vezes criar layouts mais facilmente. Podes definir a propriedade box-sizing por elemento, da maneira que desejares.

Cursores do CSS

A propriedade cursor especifica o tipo de cursor a ser exibido quando se passa o rato por cima de um elemento. Tem 36 valores possíveis:

    .auto            { cursor: auto; }
    .default         { cursor: default; }
    .none            { cursor: none; }
    .context-menu    { cursor: context-menu; }
    .help            { cursor: help; }
    .pointer         { cursor: pointer; }
    .progress        { cursor: progress; }
    .wait            { cursor: wait; }
    .cell            { cursor: cell; }
    .crosshair       { cursor: crosshair; }
    .text            { cursor: text; }
    .vertical-text   { cursor: vertical-text; }
    .alias           { cursor: alias; }
    .copy            { cursor: copy; }
    .move            { cursor: move; }
    .no-drop         { cursor: no-drop; }
    .not-allowed     { cursor: not-allowed; }
    .all-scroll      { cursor: all-scroll; }
    .col-resize      { cursor: col-resize; }
    .row-resize      { cursor: row-resize; }
    .n-resize        { cursor: n-resize; }
    .e-resize        { cursor: e-resize; }
    .s-resize        { cursor: s-resize; }
    .w-resize        { cursor: w-resize; }
    .ns-resize       { cursor: ns-resize; }
    .ew-resize       { cursor: ew-resize; }
    .ne-resize       { cursor: ne-resize; }
    .nw-resize       { cursor: nw-resize; }
    .se-resize       { cursor: se-resize; }
    .sw-resize       { cursor: sw-resize; }
    .nesw-resize     { cursor: nesw-resize; }
    .nwse-resize     { cursor: nwse-resize; }

Também podes definir uma imagem como cursor.

.custom-cursor {
  cursor: url(cursor-image.png);
}