Códigos de efeito em menus

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Códigos de efeito em menus

Mensagem por Talissa Andr. em 02/12/10, 12:24 pm

Olá,
eu quero saber quais são todos os códigos que dão efeitos em menus como por EXEMPLO os botoes subirem ou abaixarem quando passa o mouse ele criar sombra ou seilá..

Alguém sabes os códigos e suas funçoes?


Última edição por Talissa Andr. em 02/12/10, 05:00 pm, editado 1 vez(es)

Talissa Andr.
Usuário destaque

Feminino
Inscrito dia : 28/10/2010
Mensagens : 834
Pontos Ativos : 1130

Ver perfil do usuário

Resolvido Re: Códigos de efeito em menus

Mensagem por espacodesigners.net em 02/12/10, 04:40 pm

desculpa...
mas so sei fazer o houver

se quiser diz q posto

abraços
avatar

espacodesigners.net
Nível 5

Masculino
Inscrito dia : 31/10/2010
Mensagens : 59
Pontos Ativos : 91

Ver perfil do usuário http://espacodesigners.net

Resolvido Re: Códigos de efeito em menus

Mensagem por Talissa Andr. em 02/12/10, 05:00 pm

pode me dizer?! Muito feliz

Talissa Andr.
Usuário destaque

Feminino
Inscrito dia : 28/10/2010
Mensagens : 834
Pontos Ativos : 1130

Ver perfil do usuário

Resolvido Re: Códigos de efeito em menus

Mensagem por espacodesigners.net em 02/12/10, 07:44 pm

Como é meu primeiro post resolvendo um problema de alguem não tenho experiencia vou ser o mais claro possivel

Todos os codigos deveram ser adicionado em folha de estilo css

Visualização>>>Cores>>Folha de Estilo CSS

hover pra coloca imagem:

#i_icon_mini_index {
background-image: url('URL_DA_IMAGEM');
background-repeat: np-repeat;
padding: AApx LLpx;
}

#i_icon_mini_index:hover {
background-image: url('URL_DA_IMAGEM_SOBRE_MOUSE');
background-repeat: np-repeat;
padding: AApx LLpx;
}

Vermelho - A imagem do seu menu
Índigo - A metade da altura do seu menu(tem que colocar em numero)
Laranja - A metade da largura do seu menu (tem que colocar em numero)
Azul
- A imagem que vai colocar como Hover

o resto.

i_icon_mini_portal - Portal
i_icon_mini_calendar - Calendário
i_icon_mini_gallery - Álbum
i_icon_mini_faq - FAQ
i_icon_mini_search - Buscar
i_icon_mini_members - Membros
i_icon_mini_groups - Grupos
i_icon_mini_profile - Perfil
i_icon_mini_message - Mensagens privadas
i_icon_mini_new_message - Nova mensagem privada
i_icon_mini_logout - Sair
i_icon_mini_register - Registar
i_icon_mini_login - Entrar

Espero ter ajudado!!!

Abraços


Última edição por Mr. Supero em 06/12/10, 11:13 pm, editado 3 vez(es) (Razão : erro de digitação)
avatar

espacodesigners.net
Nível 5

Masculino
Inscrito dia : 31/10/2010
Mensagens : 59
Pontos Ativos : 91

Ver perfil do usuário http://espacodesigners.net

Resolvido Re: Códigos de efeito em menus

Mensagem por Talissa Andr. em 02/12/10, 09:27 pm

Vlw! vou aguardar caso mais usuários saibam outros efeitos.
A tome cuidado viu ajudar vicia....

Talissa Andr.
Usuário destaque

Feminino
Inscrito dia : 28/10/2010
Mensagens : 834
Pontos Ativos : 1130

Ver perfil do usuário

Resolvido Re: Códigos de efeito em menus

Mensagem por Callie em 02/12/10, 09:30 pm

Olá Talissa Andr.,

Veja aqui outro efeito:

Efeito de opacidade nas imagens do menu

Até mais.
avatar

Callie
Principal contribuidor
Principal contribuidor

Feminino
Inscrito dia : 20/12/2009
Mensagens : 5007
Pontos Ativos : 7285

Ver perfil do usuário

Resolvido Re: Códigos de efeito em menus

Mensagem por Talissa Andr. em 02/12/10, 09:33 pm

Obrigada ' joãopedro.
bem legal este.

Mais efeitos? =)

Talissa Andr.
Usuário destaque

Feminino
Inscrito dia : 28/10/2010
Mensagens : 834
Pontos Ativos : 1130

Ver perfil do usuário

Resolvido Re: Códigos de efeito em menus

Mensagem por espacodesigners.net em 02/12/10, 09:43 pm

de menu eu acho q so Talissa !
avatar

espacodesigners.net
Nível 5

Masculino
Inscrito dia : 31/10/2010
Mensagens : 59
Pontos Ativos : 91

Ver perfil do usuário http://espacodesigners.net

Resolvido Re: Códigos de efeito em menus

Mensagem por Callie em 02/12/10, 09:44 pm

Viu algum efeito que lhe tivesse agradado?
Se soubéssemos isso seria mais fácil.
avatar

Callie
Principal contribuidor
Principal contribuidor

Feminino
Inscrito dia : 20/12/2009
Mensagens : 5007
Pontos Ativos : 7285

Ver perfil do usuário

Resolvido Re: Códigos de efeito em menus

Mensagem por Talissa Andr. em 03/12/10, 02:38 pm

A vi em alguns fóruns botôes que ao passa o mouse eles sobem !
gostei deste! =D

Talissa Andr.
Usuário destaque

Feminino
Inscrito dia : 28/10/2010
Mensagens : 834
Pontos Ativos : 1130

Ver perfil do usuário

Resolvido Re: Códigos de efeito em menus

Mensagem por espacodesigners.net em 03/12/10, 03:22 pm

depois de "background-imagem" adicione "margin-bottom : 3px !important;"

o valor em vermelho pode ser modificado

abraços
avatar

espacodesigners.net
Nível 5

Masculino
Inscrito dia : 31/10/2010
Mensagens : 59
Pontos Ativos : 91

Ver perfil do usuário http://espacodesigners.net

Resolvido Re: Códigos de efeito em menus

Mensagem por Talissa Andr. em 04/12/10, 08:20 pm

Mas há uma maneira de adicionar isto sem ter que mudar as imagens ao passa o mouse?

Talissa Andr.
Usuário destaque

Feminino
Inscrito dia : 28/10/2010
Mensagens : 834
Pontos Ativos : 1130

Ver perfil do usuário

Resolvido Re: Códigos de efeito em menus

Mensagem por espacodesigners.net em 05/12/10, 10:51 am

Esqueci de mecionar: é pra coloca no hover.
assim:

#i_icon_mini_index:hover {
background-image: url('COLE-O-URL-DA-IMG-DO-MENU-NORMAL');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: AApx LLpx;
}
avatar

espacodesigners.net
Nível 5

Masculino
Inscrito dia : 31/10/2010
Mensagens : 59
Pontos Ativos : 91

Ver perfil do usuário http://espacodesigners.net

Resolvido Re: Códigos de efeito em menus

Mensagem por burlador em 05/12/10, 05:32 pm

se quiser pode usar este efeito
Código:

#i_icon_mini_index {
background-image: url('URL_DA_IMAGEM');
background-repeat: no-repeat;
padding: AApx LLpx;
}

#i_icon_mini_index:hover {
background-image: url('URL_DA_IMAGEM_SOBRE_MOUSE');
background-repeat: no-repeat;
padding: AApx LLpx;
top: 5px relative;
}
o botao sobe knd passa o mouse

burlador
Nível 9

Masculino
Inscrito dia : 25/01/2010
Mensagens : 200
Pontos Ativos : 290

Ver perfil do usuário http://google.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum