Como criar o logotipo do Gmail com CSS3

Há alguns meses atrás, mostrei-lhe como criar o logótipo RSS feed com CSS3. Eu imaginei que seria divertido criar algo um pouco mais complexo. No post de hoje, mostrarei como criar não uma, mas duas variações do logotipo do Gmail usando apenas CSS3.

Atalhos para:

• Tutorial do CSS do logotipo do Gmail # 1 | Visualizar
• Tutorial para CSS do logotipo do Gmail # 2 | Visualizar

Logotipo do Gmail # 1

Este primeiro logotipo é simples e bastante fácil de criar. Sem mais delongas, aqui estão os passos. Vamos começar com a ativação do seu editor de código favorito, inserir os seguintes códigos HTML e salvá-lo como logo-gmail.html.

Adicione os seguintes estilos CSS entre para redefinir valores de CSS padrão.

.gmail-logo, .gmail-logo *, .gmail-logo *: antes, .gmail-logo *: após margin: 0; preenchimento: 0; fundo: transparente; fronteira: 0; esboço: 0; display: bloco; fonte: serifa normal normal 0/0; 

Os seguintes códigos CSS nos fornecem o plano de fundo vermelho do logotipo do Gmail e um lado arredondado.

 .gmail-logo margem: 110px auto; fundo: rgb (201, 44, 25); largura: 600px; altura: 400 px; border-top: 4px solid rgb (201, 44, 25); border-bottom: 4px solid rgb (201, 44, 25); raio de fronteira: 10 px; -moz-border-radius: 10 px; -webkit-border-radius: 10 px; 

Então, continuamos criando a caixa branca dentro do fundo vermelho.

 .gmail-logo .gmail-box estouro: oculto; flutuar: esquerda; largura: 440px; altura: 400 px; margem: 0 0 0 80px; fundo: branco; raio de fronteira: 5 px; -moz-border-radius: 5px; -webkit-border-radius: 5 px; 

Para criar o efeito "M" vermelho, primeiro criaremos uma caixa com borda vermelha.

 .gmail-logo .gmail-box: antes de position: relative; conteúdo: "; z-index: 1; background: branco; float: left; largura: 320px; height: 320px; border: 100px rgb sólido (201, 44, 25); margem: -310px 0 0 -40px; radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: rotação (45deg); -webkit-transform: rotação (45deg); -o-transformação: rotação (45deg );

Então continuamos escondendo os lados excessivos, nos dando um "M" completo na cor vermelha.

 .gmail-logo .gmail-box estouro: oculto; 

Agora, vamos dar dois borda vermelha fina, dando-lhe o olhar envelope.

 .gmail-logo .gmail-box: depois de content: "; float: left; largura: 360px; height: 360px; border: 2px solid rgb (201, 44, 25); margem: 10px 0 0 40px; -o-transform : girar (45deg); -webkit-transform: girar (45deg); -moz-transform: girar (45deg);

Estamos quase terminando. Vamos adicionar um pouco de gradiente ao envelope vermelho.

 .gmail-logo: após content: "; position: relative; z-index: 2; conteúdo:"; flutuar: esquerda; margem superior: -404px; largura: 600px; altura: 408 px; display: bloco; background: -moz-linear-gradiente (top, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.3) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); background: -o-linear-gradiente (top, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.2) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); background: -webkit-gradiente (linear, superior esquerdo, inferior esquerdo, cor-stop (0%, rgba (255, 255, 255, 0.3)), / * color-stop (30%, rgba (255, 255, 255 , 0,2)), * / color-stop (100%, rgba (255, 255, 255, 0,1)));  

Por último, mas não menos importante, vamos dar uma cor diferente quando pairar. Adicione o seguinte DOCTYPE HTML antes

E os seguintes estilos CSS antes

 .gmail-logo: hover fundo: # 313131; border-color: # 313131; / * cursor: ponteiro; * / .gmail-logo: hover .gmail-box: antes de border-color: # 313131;  .gmail-logo: hover .gmail-box: depois de border-color: # 313131; border-bottom-color: #fff; border-right-color: #fff; 

Preview | Baixar arquivo fonte

Logotipo do Gmail # 2

Em seguida, criaremos o logotipo do Gmail de outra perspectiva com um pequeno efeito 3D. Vamos começar com a marcação HTML básica.

Como o logotipo tem uma perspectiva diferente, começaremos girando um pouco e criando as camadas necessárias (que vamos chamá-las elementos) em sequência.

 # gmail-logo2 margin: 0 auto; display: bloco; largura: 380px; altura: 290px; -moz-transform: rotate (6deg); -webkit-transform: rotate (6deg); -o-transformar: girar (6deg); transformar: girar (6deg);  # gmail-logo2 .element1 display: bloco; largura: 380px; altura: 290px;  # gmail-logo2 .element2, #gmail-logo2 .element3, #gmail-logo2 .element4, #gmail-logo2 .element5 float: left; display: bloco; largura: 380px; altura: 290px; margem: -290px 0 0 0;  

Styling .element1 :: antes

 # gmail-logo2 .element1 :: before content: "; posição: relative; margem: 2px 0 0 14px; float: left; display: bloco; background: rgb (201, 44, 25); largura: 30px; altura: 276px; -moz-transform: gira (3deg); -webkit-transform: gira (3deg); -o-transforma: gira (3deg); transforma: gira (3deg); borda-raio: 22px 0 0 20px; -moz -border-radius: 22px 0 0 20px; -webkit-border-raio: 22px 0 0 20px; box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0 ), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10 , 0); -webkit-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6 px 6 px 0 109 (10,0); rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5 px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); 

Styling .element1 :: after

 # gmail-logo2 .element1 :: after content: "; posição: relative; margem: 40px 5px 0 0; float: right; display: bloco; background: rgb (201, 44, 25); largura: 30px; altura: 238px; -moz-transform: gira (3deg); -webkit-transform: gira (3deg); -o-transforma: gira (3deg); transforma: gira (3deg); border-radius: 0 18px 26px 0; -webkit -border-radius: 0 18px 26px 0; -moz-fronteira-raio: 0 18px 26px 0; box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0 ), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10 , 0), -6px 7px 0 rgb (109, 10, 0); -moz-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0 ), -6px 7px 0 rgb (109, 10, 0); -webkit-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3 px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0), -6px 7px 0 rg b (109, 10, 0);  

Styling .element2 :: antes

 # gmail-logo2 .element2 :: before content: "; margem: 22px 0 0 48px; float: left; display: bloco; background: rgb (201, 44, 25); largura: 315px; altura: 14px; -moz -transform: rotate (6.8deg); -webkit-transform: rotacionar (6.8deg); -o-transform: rotate (6.8deg); transformar: rotate (6.8deg); box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5 px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5 px 0 rgb (109, 10, 0), -6 px 6 px 0 rgb (109, 10, 0); Sombra: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0) , 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);

Styling .element2 :: after

 # gmail-logo2 .element2 :: after content: "; posição: relative; margem: 230px 0 0 36px; float: left; display: bloco; background: rgb (201, 44, 25); largura: 310px; altura: 12px; box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10 , 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2 px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4 px 0 rgb (109, 10, 0), 0 5 px 0 rgb (109, 10, 0), -6 px 6 px rgb (109, 10, 0); -moz-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0 ), 0 4px 0 rgb (109, 10, 0), 0 5 px 0 rgb (109, 10, 0), -6 px 6 px 0 rgb (109, 10, 0);

Styling .element3 :: antes

 # gmail-logo2 .element3 :: before content: "; posição: relative; margem: 8px 0 0 42px; float: left; display: bloco; background: rgb (201, 44, 25); largura: 42px; altura: 268px; -moz-transform: gira (3deg); -webkit-transform: gira (3deg); -o-transforma: gira (3deg); transforma: gira (3deg);

Styling .element3 :: after

 # gmail-logo2 .element3 :: after content: "; posição: relative; margem: 40px 32px 0 0; float: right; display: bloco; background: rgb (201, 44, 25); largura: 22px; altura: 236px; -moz-transform: rotate (3.0deg); -webkit-transform: rotate (3.0deg); -o-transform: rotate (3.0deg); transformar: rotate (3.0deg); box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb ( 109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -bebkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0) , 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5 px 0 rgb (109, 10, 0), -6 px 6 px 0 rgb (109, 10, 0); -moz-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);

Styling .element4 :: before

 # gmail-logo2 .element4 :: before content: "; posição: relative; margem: -2px 0 0 130px; float: esquerda; display: bloco; background: rgb (201, 44, 25); largura: 54px; altura : 192px; -moz-transform: rotate (-49deg); -webkit-transform: rotate (-49deg); -o-transform: rotate (-49deg); transformar: rotate (-49deg); box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0 ); -moz-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3 px 0 0 rgb (109, 10, 0), -4 px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6 px 0 0 rgb (109, 10, 0), -7 px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0); -webkit-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3 px 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7 px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0);

Styling .element4 :: after

 # gmail-logo2 .element4 :: after content: "; posição: relative; margem: 12px 88px 0 0; float: right; display: bloco; background: rgb (201, 44, 25); largura: 54px; altura: 186px; border-radius: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-fronteira-raio: 30px 0 0 0; -moz-transform: rotação (53deg); -webkit-transform: girar (53deg); -o-transformar: girar (53deg); transformar: girar (53deg);

Styling .element5 :: antes

# gmail-logo2 .element5 :: before content: "; posição: relative; margem: 115px 0 0 125px; float: esquerda; display: bloco; background: rgb (201, 44, 25); largura: 2px; altura: 150px; -moz-transform: gira (55deg); -o-transform: gira (55deg); -webkit-transform: gira (55deg); transforma: gira (55deg);

Styling .element5 :: after

 # gmail-logo2 .element5 :: after position: relative; conteúdo: "; margem: 115px 0 0 150px; flutuação: esquerda; exibição: bloco; plano de fundo: rgb (201, 44, 25); largura: 2px; altura: 150px; -moz-transformação: rotação (-50deg); webkit-transform: rotate (-50deg); -o-transforma: rotate (-50deg); transform: rotate (-50deg);

Ajustando a prioridade de z-index.

 # gmail-logo2 .element1 :: before z-index: 3; # gmail-logo2 .element1 :: após z-index: 1; / * # gmail-logo2 .element2 :: antes  * / # gmail-logo2 .element2 :: após z-index: 2; # gmail-logo2 .element3 :: antes z-index: 5; # gmail-logo2 .element3 :: após z-index: 1; # gmail-logo2 .element4 :: before z-index: 4; # gmail-logo2 .element4 :: após z-index: 3; / * # gmail-logo2 .element5 :: antes  # gmail- logo2 .element5 :: after  * /

Estamos quase terminando. Seu logotipo do Gmail deve ser parecido com isto:

Finalmente, vamos dar uma cor diferente ao pairar.

 # gmail-logo2: hover * :: depois, # gmail-logo2: hover * :: before background: rgba (20, 196, 7, 1);  # gmail-logo2: hover .element1 :: before sombra-box: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10 , 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2: pairar .element1 :: after box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10 , 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4); -moz-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4); -webkit-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4);  # gmail-logo2: pairar .element2 :: before box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2: hover .element2 :: after caixa-sombra: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2: pairar .element3 :: after box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4);  # gmail-logo2: pairar .element4 :: before box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3 px 0 0 rgb (10 , 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -moz-box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8 px 0 0 rgb (10, 90, 4); -webkit-box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8 px 0 0 rgb (10, 90, 4); 

Preview | Baixar arquivo fonte

Nota do editor: Este post foi escrito por Irham Kendeni para Hongkiat.com. Irham, também conhecido como Indaam, é um web designer e desenvolvedor da Indonésia. Ele também ama o desenvolvimento de temas CSS e WordPress.