Envelope Animado com CSS3

Envelope Animado com CSS3

Web

E aí, tudo certo? Recentemente eu fiz um envelope de contato para o meu site e pensei: Porque não compartilhar essa ideia?

O objetivo é simples: Fazer um envelope se abrir mostrando o endereço de e-mail para o usuário.

 

Começando

Para começar, vamos criar a caixa que vai comportar tudo:

<div class="box-email">
</div>

 

Agora vamos customizar ela com CSS. Adicione o código abaixo na lista de estilos do seu projeto:

.box-email{
	cursor: pointer;
	text-align: center;
	margin: 70px 0 0 0;
	position: relative;
	display: block;
}

 

Explicando o que foi feito acima, o "cursor: pointer" é para mudar o cursor quando o usuário passar o mouse por cima (mesmo que não seja clicável). Aquela margem gigantesca no topo é para compensar a abertura do envelope. De resto, você vai entender melhor depois... ;)

 

Envelope e e-mail

Agora vamos adicionar os elementos que vão estruturar o envelope e aquela faixa que mostra o email:

<div class="box-email">
    <a href="mailto:seuemail@email.com" class="link-email">seuemail@email.com</a>
    <div class="email-envelope"></div>
</div>

 

O link "link-email" é a informação que vai aparecer quando você passar o mouse. A div "email-envelope" e seu conteúdo vão ser o envelope desenhado com CSS.

 

Desenhando o Envelope

Agora vem a parte mais legal, a parte de desenhar o envelope com CSS =D

Precisamos definir tamanho, cor, exibição e alinhamento do envelope.

.email-envelope {
	width: 140px;
	height: 85px;
	background-color: #dedede;
	display: block;
	display: inline-block;
	position: relative;
	margin: 0 auto;
}

 

Por enquanto, nosso envelope ficará assim:

Agora vamos criar as dobras do envelope utilizando uma técnica que permite fazer triângulos utlizando apenas css, veja mais aqui: Como fazer triângulos com CSS.

Sabendo disso, vamos montar esses triângulos utilizando os ultras mega hypers blasters incríveis, pseudo-elementos do CSS3, :before e :after.

.email-envelope:before {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 55px 70px 0 70px;
	border-color: #ececec transparent transparent transparent;
	-webkit-transform-origin: top center;
	-ms-transform-origin: top center;
	transform-origin: top center;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
	transition: 0.4s;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
}

.email-envelope:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 70px 42px 70px;
	border-color: transparent transparent #ffffff transparent;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
}

 

Obs: Lembra que o "email-envelope" recebeu o atributo "position: relative;"? Então, fizemos aquilo para poder usar os pseudo-elementos por cima do envelope.

O elemento ":before" desse envelope é um pouco mais especial. Ele vai ter a função de abrir o envelope, logo, ele também tem algumas propriedades bem especiais do CSS como por exemplo o "transform-origin".

Mas tá, e o que esse "transform-origin" aí faz? Essa propriedade irá mudar o "eixo" do elemento para a posição desejada. No nosso caso, durante a animação de abertura, o "eixo" da dobra do envelope precisa estar no topo, para isso usamos o "transform-origin: top center;", como no exemplo abaixo:

Animando a dobra do envelope

Depois de montado o envelope, precisamos anima-lo (deixar mais vivo). Para isso vamos utilizar o :hover e a propriedade do CSS3 que permite a rotação de objetos, o transform.

.box-email:hover .email-envelope:before {
	-webkit-transform: rotateX(150deg);
	-moz-transform: rotateX(150deg);
	-ms-transform: rotateX(150deg);
	-o-transform: rotateX(150deg);
	transform: rotateX(150deg);
}

 

E agora, o mais importante

Nesse momento, precisamos mostrar o e-mail quando o usuário passa o mouse por cima do envelope, e é isso que vamos fazer.

Sabe o "link-email" que criamos lá em cima? Então, agora ele vai ser muito útil.

.link-email{
	width: auto;
	color: #ffffff;
	font: 100 16px/16px Arial, sans-serif;
	font: 100 1.6rem/1.6rem Arial, sans-serif;
	text-decoration: none;
	background-color: #d50a3e;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
	transition: 0.4s;
	-webkit-transform: translateX(-50%) scale(0.8);
	-moz-transform: translateX(-50%) scale(0.8);
	-ms-transform: translateX(-50%) scale(0.8);
	-o-transform: translateX(-50%) scale(0.8);
	transform: translateX(-50%) scale(0.8);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	-webkit-opacity: 0;
	opacity: 0;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	filter: alpha(opacity=0);
	margin: 0;
	padding: 11px 5px;
	display: block;
	position: absolute;
	z-index: 5;
	left: 50%;
	top: 0;
}

 

Se eu fosse explicar cada propriedade mostrada acima, eu não viveria para contar, então eu vou explicar apenas as coisas que eu considero mais importantes 

  • z-index - O link com o e-mail vai ficar por cima de tudo.
  • opacity - O elemento ficará invisível até que você passe o mouse.
  • translateX e left - A junção desses dois, deixa o e-mail centralizado horizontalmente.
  • scale - Irá fazer uma animação de escala no hover.

 

Exibição do e-mail no :hover

Agora vamos animar o e-mail no momento em que o usuário fizer um ":hover" no envelope:

.box-email:hover .link-email{
	-webkit-transform: translateX(-50%) scale(1);
	-moz-transform: translateX(-50%) scale(1);
	-ms-transform: translateX(-50%) scale(1);
	-o-transform: translateX(-50%) scale(1);
	transform: translateX(-50%) scale(1);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	-webkit-opacity: 1;
	opacity: 1;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	filter: alpha(opacity=100);
}

 

Ok, mas e no celular?

Bom, no celular você pode ativar o e-mail por padrão (como se o usuário estivesse fazendo um hover contínuo no envelope). Para isso, podemos utilizar os "media-queries" do CSS:

@media screen and (max-width: 768px) {
	.link-email{
		-webkit-transform: translateX(-50%) scale(1);
		-moz-transform: translateX(-50%) scale(1);
		-ms-transform: translateX(-50%) scale(1);
		-o-transform: translateX(-50%) scale(1);
		transform: translateX(-50%) scale(1);
		-moz-opacity: 1;
		-khtml-opacity: 1;
		-webkit-opacity: 1;
		opacity: 1;
		-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
		filter: alpha(opacity=100);
	}
}

 

Claro que o código mostrado acima é apenas um exemplo, portanto, pode acontecer algumas redundâncias, mas nada que afete o funcionamento do código.

Outra coisa é o tamanho do envelope em telas muito pequenas. Caso seja necessário, você pode diminuir o tamanho dos elementos utilizando media-queries.

 

Código Final

Haha, eu sei que muita gente pulou para essa parte, afinal, nem todo mundo tem tempo para ler um tutorial desse tamanho. XD

 

Peraí, é rapidinho

Não vai embora não, eu só gostaria de agradecer pela leitura. Espero que esse tutorial tenha sido, de alguma forma, útil para você. Fique a vontade para comentar logo abaixo. 

Que a força esteja com você.