O CSS na formação da tríade (HTML, CSS, Javascript), tem como objetivo a estilização de páginas. Definições de cores, dimensões, posicionamento. Para qualquer tipo de animação, precisávamos recorrer ao Javascript.
A partir do CSS3 passou a ser possível realizar animações e manipulações apenas utilizando o CSS. Antes também era possível, por exemplo, usando apenas a pseudo-classe :hover, mas isso se apresentava de forma mais “seca”, não criando um efeito suavizado que queremos muitas vezes apresentar.
No tutorial a seguir, as propriedades responsáveis pelo feito serão Transition e Transform.
Antes de começar o tutorial em si, é interessante falar um pouco sobre as propriedade que serão utilizada no decorrer do texto.
Como informado acima, determinados efeitos são mostrados de forma mais “seca” e para conseguir essa “suavização”, temos a propriedade Transition.
Essa propriedade irá calcular o tempo de mudança de uma ação à outra utilizando o :hover.
Com a Transition você consegue configurar o que será animado (transition-property), a duração do efeito (transition–duration), a progressão da transição (transition–timing–function) e o tempo da transição (transition–delay).
Você consegue utilizar essas propriedades de forma única, da mesma forma que background usando apenas transition.
Outra propriedade, só que voltada para modificação do elemento, é a Transform.
Com esta propriedade você modificará a forma de um elemento, como dimensão (scale), mover para o eixo x e y (translation), modificar ângulos (skew) e rotacionar o elemento (rotate).
No decorrer do tutorial, serão utilizados os prefixos. Ele são usados por que alguns navegadores realizam suas implementações das propriedades que as vezes ainda são rascunhos na W3C.
Você tem prefixo pra Chrome e Opera (-webkit-), para o Internet Explorer (-ms-) e para Mozilla Firefox (-mo-). Sempre ao utilizar os prefixos, deixe a propriedade sem o prefixo por último para garantir o funcionamento nos navegadores que já tenham esta propriedade por padrão.
O tooltip ou “dica de contexto” é muito utilizado quando você deseja mostrar informações adicionais ou explicativa a um elemento na página. Basicamente o seu funcionamento consiste ao passar o mouse nesse elemento, aparecendo assim uma determinada mensagem.
Nossa estrutura de arquivos e pastas ficará da seguinte forma:
Agora iremos definir as marcações no index.html.
<!doctype html>
<html lang="pt-br">
<head>
<title>Tooltip com CSS 3</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<header></header>
<ul id="shared">
<li class="facebook"><a href="#"><span>Facebook</span></a></li>
<li class="twitter"><a href="#"><span>Twitter</span></a></li>
<li class="email"><a href="#"><span>Email</span></a></li>
</ul>
</body>
</html>
Explicando o código acima.
Agora iremos ao style.css.
body{
background:#e5e5e5;
}
header{
height: 100px;
background:#ccc;
}
#shared {
list-style:none;
text-align:center;
}
#shared li{
display: inline-block;
}
#shared li a{
display: inline-block;
width:65px;
height: 60px;
position: relative;
background:url(../images/sprite.png) no-repeat;
}
#shared li.facebook a{
background-position: 0 0;
}
#shared li.twitter a{
background-position: 0 -61px;
}
#shared li.email a{
background-position: 0 -121px;
}
#shared li a span{
position: absolute;
width:100px;
height:100px;
bottom:-60px;
left:50%;
margin-left: -50px;
border-radius: 50%;
opacity: 0;
background: rgba(255,255,255,0.5);
color:#333;
font-size:12px;
font-weight: bold;
text-align: center;
line-height: 100px;
border:1px solid #ccc;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-o-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
}
#shared li a:hover span{
bottom:60px;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
Explicando o código acima.
Veja o efeito como fica:
https://www.mxcursos.com/blog/exemplos/tooltip/
Para baixar os arquivos:
https://github.com/davidchc/tutorial-tooltip-css3
Durante o tutorial também utilizamos outras propriedades do CSS3, como border-radius e também usamos o rgba, para colocar um valor de opacidade (alfa), mas preferimos dá um foco no Transition e Transform devido à realização do efeito esperado.
Espero que tenham gostado.
Abraços e até a próxima.
Nos últimos anos, testemunhamos uma revolução na forma como os sites são criados, impulsionada pelo…
A animação 3D tem sido uma forma poderosa de contar histórias e criar experiências visuais…
Nos últimos anos, a inteligência artificial (IA) tem revolucionado a forma como criamos e editamos…
Nos últimos anos, a integração da inteligência artificial (IA) na criação de sites tem revolucionado…
Nos últimos anos, a edição de vídeo evoluiu rapidamente com o avanço da tecnologia, e…
A dublagem de filmes desempenha um papel fundamental na indústria cinematográfica, permitindo que obras de…
This website uses cookies.
Ver comentários
O link que da acesso ao exemplo pede senha.