![[TUTORIAL] Aumentando o tamanho da logo com efeito Hover 405374159](https://shift.forumactif.com/users/3315/15/85/04/smiles/405374159.gif?t=1334779744)
ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!![[TUTORIAL] Aumentando o tamanho da logo com efeito Hover 1660898911](https://shift.forumactif.com/users/3315/15/85/04/smiles/1660898911.gif?t=1334779744)
Início
Publicações[TUTORIAL] Aumentando o tamanho da logo com efeito Hover
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
![[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Empty](https://2img.net/i/empty.gif)
[TUTORIAL] Aumentando o tamanho da logo com efeito Hover
por Make Seg 31 Dez - 15:43
![[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Homepg10](https://i.servimg.com/u/f14/16/87/99/88/homepg10.png) | Efeito na Logo |
--> Tutoriais <--
Aumentando o tamanho da logo com efeito Hover
Aumentando o tamanho da logo com efeito Hover
1º - Código há ser utilizado:
![[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Versio11](https://i.servimg.com/u/f76/11/66/91/15/versio11.gif) | Phpbb2 |
- Código:
#i_logo {
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 0.6;
filter:alpha(opacity=40);
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
#i_logo:hover {
transition-duration: 1.0s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
-webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 1.0;
filter:alpha(opacity=40);
}
![[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Versio12](https://i.servimg.com/u/f76/11/66/91/15/versio12.gif) | Phpbb3 |
- Código:
#logo img{
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 0.6;
filter:alpha(opacity=40);
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
#logo img:hover {
transition-duration: 1.0s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
-webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 1.0;
filter:alpha(opacity=40);
}
![[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Versio14](https://i.servimg.com/u/f76/11/66/91/15/versio14.gif) | Invision |
- Código:
div#logostrip a img {
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 0.6;
filter:alpha(opacity=40);
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
div#logostrip a img:hover{
transition-duration: 1.0s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
-webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 1.0;
filter:alpha(opacity=40);
}
![[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Versio15](https://i.servimg.com/u/f76/11/66/91/15/versio15.gif) | PunBB |
- Código:
#pun-intro a img{
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 0.6;
filter:alpha(opacity=40);
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
#pun-intro a img:hover{
transition-duration: 1.0s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
-webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 1.0;
filter:alpha(opacity=40);
}
2º - Folha CSS:
Agora siga as setas de acordo onde deverá adicionar o código dado acima:
Painel de Controle
Visualização Imagens e cores Cores Folha de estilo CSS(carregue na imagem para aumentar)![[TUTORIAL] Aumentando o tamanho da logo com efeito Hover 1114](https://i.servimg.com/u/f71/11/61/24/05/1114.gif)
3º - Resultado:
(carregue na imagem para aumentar)
![[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Result12](https://i.servimg.com/u/f12/16/63/75/54/result12.gif)
- Como retiro o efeito de opacidade?
Procure pelo code abaixo e o retire:
- Um EXEMPLO no código punbb:-moz-opacity: 0.6;
opacity: 0.6;
Azul Forumeiros: É oque você deve retirar para não ter opacidade.#pun-intro a img{
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 0.6;
filter:alpha(opacity=40);
-moz-transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
}
#pun-intro a img:hover{
transition-duration: 1.0s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
-webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px);
-moz-opacity: 0.6;
opacity: 1.0;
filter:alpha(opacity=40);
}
Verde Forumeiros: É oque você deve deixar para que o efeito ocorra na logo.
© ShiftActif
![[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Faq10](https://i.servimg.com/u/f47/16/87/99/88/faq10.png) | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:[Dúvida] Aumentando o tamanho da logo com efeito Hover |
Make- Membro em destaque
-
Idade : 24
PointActif's : 4550
ReputActifs : 5
Mensagens : 196
Inscrição : 25/06/2012
Localização : Fortaleza-CE
Tópicos semelhantes» [TUTORIAL] Efeito hover no Logo
» [TUTORIAL] Efeito hover em caixa de texto com CSS
» [TUTORIAL] Opacidade e Efeito Hover em Avatar
» [TUTORIAL] Efeito hover o menu do fórum
» [TUTORIAL] Efeito hover nos números de mensagens e tópicos (Phpbb3)
» [TUTORIAL] Efeito hover em caixa de texto com CSS
» [TUTORIAL] Opacidade e Efeito Hover em Avatar
» [TUTORIAL] Efeito hover o menu do fórum
» [TUTORIAL] Efeito hover nos números de mensagens e tópicos (Phpbb3)
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|
Facebook![[TUTORIAL] Aumentando o tamanho da logo com efeito Hover Tw10](https://i.servimg.com/u/f21/18/21/41/30/tw10.png)
Twitter
Youtube
