Códigos de efeito em menus

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

Atendido / Resolvido Códigos de efeito em menus

Mensagem por Talissa Andr. em 02.12.10 14:24

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 19:00, editado 1 vez(es)
avatar

Talissa Andr.
Usuário destaque

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

Atendido / Resolvido Re: Códigos de efeito em menus

Mensagem por espacodesigners.net em 02.12.10 18:40

desculpa...
mas so sei fazer o houver

se quiser diz q posto

abraços
espacodesigners.net

espacodesigners.net
Nível 5

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

http://espacodesigners.net

Atendido / Resolvido Re: Códigos de efeito em menus

Mensagem por Talissa Andr. em 02.12.10 19:00

pode me dizer?! Muito feliz
avatar

Talissa Andr.
Usuário destaque

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

Atendido / Resolvido Re: Códigos de efeito em menus

Mensagem por espacodesigners.net em 02.12.10 21:44

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 07.12.10 1:13, editado 3 vez(es) (Razão : erro de digitação)
espacodesigners.net

espacodesigners.net
Nível 5

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

http://espacodesigners.net

Atendido / Resolvido Re: Códigos de efeito em menus

Mensagem por Talissa Andr. em 02.12.10 23:27

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

Talissa Andr.
Usuário destaque

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

Atendido / Resolvido Re: Códigos de efeito em menus

Mensagem por Callie em 02.12.10 23:30

Olá Talissa Andr.,

Veja aqui outro efeito:

Efeito de opacidade nas imagens do menu

Até mais.
Callie

Callie
Principal contribuidor
Principal contribuidor

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

Atendido / Resolvido Re: Códigos de efeito em menus

Mensagem por Talissa Andr. em 02.12.10 23:33

Obrigada ' joãopedro.
bem legal este.

Mais efeitos? =)
avatar

Talissa Andr.
Usuário destaque

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

Atendido / Resolvido Re: Códigos de efeito em menus

Mensagem por espacodesigners.net em 02.12.10 23:43

de menu eu acho q so Talissa !
espacodesigners.net

espacodesigners.net
Nível 5

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

http://espacodesigners.net

Atendido / Resolvido Re: Códigos de efeito em menus

Mensagem por Callie em 02.12.10 23:44

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

Callie
Principal contribuidor
Principal contribuidor

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

Atendido / Resolvido Re: Códigos de efeito em menus

Mensagem por Talissa Andr. em 03.12.10 16:38

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

Talissa Andr.
Usuário destaque

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

Atendido / Resolvido Re: Códigos de efeito em menus

Mensagem por espacodesigners.net em 03.12.10 17:22

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

o valor em vermelho pode ser modificado

abraços
espacodesigners.net

espacodesigners.net
Nível 5

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

http://espacodesigners.net

Atendido / Resolvido Re: Códigos de efeito em menus

Mensagem por Talissa Andr. em 04.12.10 22:20

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

Talissa Andr.
Usuário destaque

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

Atendido / Resolvido Re: Códigos de efeito em menus

Mensagem por espacodesigners.net em 05.12.10 12:51

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;
}
espacodesigners.net

espacodesigners.net
Nível 5

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

http://espacodesigners.net

Atendido / Resolvido Re: Códigos de efeito em menus

Mensagem por burlador em 05.12.10 19:32

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
avatar

burlador
Nível 9

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

http://google.com

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


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