Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. CSS
Webdesign

Como Fazer Mágica, Dicas Animadas com CSS

by
Difficulty:IntermediateLength:LongLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Dicas são uma ótima forma de aprimorar uma UI quando usuários precisam de contexto extra para um ícone diferente ou quando querem garantias para clicar um botão, ou talvez um subtítulo surpresa junto de uma imagem. Vejamos como fazer dicas animadas, agora, apenas com HTML e CSS.

Demo

Eis o que criaremos:

Antes de irmos de cabeça, vejamos o que estamos criando. O objetivo principal é tem uma forma simples de adicionar uma dica, então faremos adicionando um atributos customiado tooltip:

Uma Nota Sobre Acessibilidade e Capacidade

Se busca por dicas compatíveis ou dicas mais interessantes com containers que detectam colisão ou suporta conteúdo HTML ao invés de texto puro, há várias soluções que usam scripts de terceiros para resolver essas necessidades.

"JavaScript é imperativo para componentes inteiramente acessíveis" – Sara Soueidan, Construindo dica de ajuda totalmente acessível... é mais difícil que pensei

Esse tutorial não resolver qualquer ponto de acessibilidade. Conhecemos nossos usuários e o que eles precisam, então consideremos suas necessidades nesse sentido também.

Criando Algumas Expectativas

  • Sem JavaScript
  • Usaremos seletores de atributos (não nomes de classes) com o combinador de padrão embutido do CSS
  • Adicionando a elementos DOM existentes (nada de elementos novo adicionados ao código)
  • Exemplos de código são sem prefixos (adicionemos prefixos para os navegadores alvos se preciso)
  • Assumamos mouseover/hover para ativar as dicas
  • Dicas em texto puro (HTML, imagens, etc não são suportados)
  • Animações súbtas ao invocar as dicas

Muito bem! Comecemos!

Espera! Temos um asterisco para lidar primeiro, sobre "não precisar de código extra". Isso é mágica, afinal. Nossas dicas não precisam de qualquer elemento DOM extra já que são feitos, completamente de pseudo-elementos (::before e ::after) que podemos controlar via CSS.

Se já usamos pseudo-elementos de alguma elemento de algum outro conjunto de estilos, e precisamos de dicas nele, teremos de reestruturá-lo um pouco.

Não Há Festa Como Uma Festa de Dicas!

Espera. Gremlins! Mais uma ressalva: Posicionamento CSS. Para as dicas funcionarem direito, os elementos pais (onde atrelaremos a dica) precisa ser:

  • position: relative; ou
  • position: absolute; ou
  • position: fixed;

Basicamente, qualquer coisa além de position: static – que é a posição padrão para quase todos os elementos no navegador. As dicas são posicionadas absolutamente e precisam saber os limites de seu "absolutismo". A diretiva de posição padrão static não declara seus próprio limites e não dará contexto para nossas dicas se basearem, assim, elas usariam o contexto do próximo elemento pai que tenha limite declarado.

Precisamos decidir qual diretiva de posicionamento funciona melhor com o que usamos as dicas. Esse tutorial assume position: relative para o elemento pai. Se nossa UI depende de um elemento com posição absoluta, então é preciso alguma reestruturação (código extra) para obter as dicas nele.

Vejamos o que acontece.

Seletores de Attribute: Uma Atualização Rápida

A maioria das regras CSS são escritas com nomes de classe em mente, como .this-thing, mas CSS tem vários outros seletores. Nossas dicas mágicas usarão seletores de atributos–aqueles dos colchetes:

Quando o navegador encontra algo assim:

saberá que precisará aplicar as regras [foo] à tag span por ter o atributo foo. Nesse caso, o span em si teria um plano de fundo preto transparente com texto branco.

Elementos HTML possuem vários atributos embutidos, mas também podemos criar nossos próprios. Como foo ou tooltip. Por padrão, HTML não sabe o que eles significam, mas com CSS podemos explicar ao HTML.

Por Que Seletores de Atributo?

Usaremos seletores de atributos primariamente para separação de conceitos. Usando atributos ao invés de nomes de class não nos dá qualquer ponto na guerra da especificidade. Classes e atributos tem a mesma especificidade. Contudo, ao usar atributos, mantemos nos conteúdo com conteúdo, já que eles podem ter valores e nomes de classe não.

Consideremos .tooltip contra o atributo [tooltip] no código de exemplo. A classe é um dos valores do atributo [class] enquanto o atributo tooltip tem um valor, que é o texto que será mostrado.

Agora, a Alquimia das Dicas

Nossas dicas usarão dois atributos diferentes:

  • tooltip: que guarda o conteúdo da dica (texto puro)
  • flow: opcional, ele dá o controle de como mostrar a dica. Há vários posicionametos que podemos suportar mas cobriremos os quatro mais comuns:
    cima, esquerda, direita e baixo.

Agora, criemos a base de todas as dicas. As regras dos passos 1–5 se aplicam a todas dicas independente de qual flow tem. Passos 6–7 tem distinções entre os vários valores de flow.

1. Relatividade

Essa é para o elemento pai da dica. Atribuamos uma diretiva de posicionamento para que o posicionamento absoluto das partes da dica (os pseudo-elementos ::before e ::after) sejam posicionados no contexto desse elemento pai e não da página ou do elemento avô ou algum outro elemento nível acima da DOM.

2. Horário Nobre dos Pseudo-elementos

É hora de focar nos pseudo-elementos. Aqui, iremos configurar as propriedades base tanto de ::before quanto ::after. A propriedade content é o que faz a dica funcionar, mas veremos já-já.

3. O triângulo

Esse é o pequeno triângulo que é usado nas dicas para passar a ideia de balão de fala por apontar para a coisa de onde foi invocado. Notemos que usamos transparent para a cor da borda. Adicionaremos cores mais tarde já que a adição depende do atributo flow da dica.

Não é um erro que a declaração content: ''; use uma cadeia de caracteres vazia como valor. Não queremos algo ali, mas precisamos da propriedade para o pseudo-elemento existir.

Para criar o triângulo, definimos uma borda sólida com certa largura em uma caixa vazia (sem conteúdo), sem largura ou altura, e apenas dando cor de borda a um dos lados da caixa. Para mais detalhes, vejamos o tutorial abaixo:

4. Bolhas!

Eis o mais legal. Notemos a parte content: attr(tooltip) dizendo "Esse pseudo-elemento deve usar o valor do atributo tooltip como seu conteúdo". É por isso que usar atributos ao invés de nomes de classe é tão legal!

Notemos os valores de z-index do triângulo e da bolha. Eles são valores arbitrários, mas lembre-se que o valor z-index é relativo. Isso significa que um z-index com valor 1001 dentro de um elemento com z-index 3, o de 1001 será o elemento mais acima dentro do container de z-index: 3.

O z-index da bolha deve ser, pelo menos, um nível abaixo do z-index do triângulo. Se for o mesmo ou maior, podemos acabr com coloração inconsistente no triângulo se a dica usar box-shadow.

Para mais detalhes sobre a propriedade z-index, vejamos o tutorial abaixo:

5. Ação de Interação

Nossas dicas são ativadas por sobrepor o elemento da dica com o mouse... ou quase.

Se virmos o bloco de estilo do Passo 2, perceberemos que usamos opacity: 0; junto de display: none; para as pastes da dica. Fizemo-no para podermos usar efeitos de animações CSS ao mostrar e esconder as dicas.

A propriedade display não pode ser animada, mas opacity pode! Lidaremos com as animações por último. Se não nos importamos com animações, basta remover a declaração opacity: 0; do Passo 2 e ignorar a animação do Passo 7.

A última coisa que precisaremos que ainda se relacionam às dicas é a forma de suprimir a dica se não tiver conteúdo. Se popularmos as dicas com algum tipo de sistema dinâmico (Vue.js, Angular React ou PHP, etc), não queremos bolhas vazias!

6. Fluxo de Controle

Esse passo pode ficar bem complicado já que usaremos seletores nem tão comuns para ajudar as dicas a lidar com seus posicionamentos baseado nos valores flow (ou falta dele).

"Coisas estranhas estão aos pés de Circle-K" — Ted Theodore Logan

Antes de irmos para os estilos, vejamos alguns padrões de seletores que usaremos.

Isso diz ao navegador: "Para todos os elementos com o atributo tooltip que não tenha o atributo flow ou tenham-no com valor começando com 'up', aplique esses estilos ao pseudo-elemento ::before".

Usamos um padrão aqui para podermos estendê-lo para os outros fluxos sem precisar repetir muito CSS. Esse padrão flow^="up" usar o combinador ^= (começa com). Isso permite que os estilos também sejam aplicados a up-right e up-left, caso queiramo adicioná-los. Não so cobriremos aqui, mas podemos vê-lo em ação na demo das dicas no CodePen.

Eis os blocos de CSS para os quatro fluxos desse tutorial.

Cima (padrão):

Baixo:

Esquerda:

Direita:

7. Animando Tudo

Animações são demais. Elas podem:

  • ajudar usuários a sentirem-se confortáveis
  • ajudar usuários com percepção espacial da UI
  • chamar atenção a coisas que precisam ser vistas
  • suavizar elementos da UI que, de outra forma, seriam um efeito binário ligado/desligado

Nossas dicas falharam na última descrição. Ao invés da bolha surgir e desaparecer num piscar de olhos, tornemo-na suave.

@keyframes

Adicionaremos duas animações @keyframe. As dicas cima/baixo usarão o keyframe tooltips-vert e as esquerda/direita usaram o keyframe tooltips-horz. Notemos que em ambos os keyframes apenas definimos o estado final desejado das dicas. Não precisamos saber de onde elas vem (as dicas em si tem informação de estilo). Apenas queremos controlar para onde vão.

Agora, precisamos aplicar esses keyframe às dicas quando o usuário sobrepor os elementos ativadores (os elementos com atributos [tooltip]). Já que aplicamos vários fluxos para controlar como as dicas serão mostradas, precisamos identificar essas possibilidades nos estilos.

Usando :hover para Passar Controle para Animações

Lembremo-nos que não podemos animar a propriedade display, mas podemos dar efeitos de fade-in às dicas ao manipular a opacity. Também podemos animar a propriedade transform que dá às dicas um movimento súbto, como se elas estivessem voando para apontar ao elemento ativador.

Notemos a palavra-chave forwards na declaração da animação. Isso diz à animação para não reiniciar quando finalizar, mas continuar on estado final.

Conclusão

Trabalho fantástico! Vimos muito nesse tutorial e agora temos uma coleção legal de dicas para mostrar nosso árduo trabalho:

Apenas vimos o básico do que podemos ser feito com dicas em CSS. Brinque com elas e continue experimentando e inventando suas próprias receitas!

Mais Tutoriais de UI com CSS

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.