Efeito ao passar o mouse no menu
5 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Efeito ao passar o mouse no menu
Qual é minha questão:
Olá!
Gostaria de saber o código desse efeito, que quando passa o mouse sobre o menu, a imagem fica forte e depois clareia, rapidamente.
Link que vi:
http://pokemononline123.forumeiros.com/
Obrigado!
Endereço do meu fórum:
http://pokemon-infinity.forumeiros.com
Versão do fórum:
PHPBB3
Olá!
Gostaria de saber o código desse efeito, que quando passa o mouse sobre o menu, a imagem fica forte e depois clareia, rapidamente.
Link que vi:
http://pokemononline123.forumeiros.com/
Obrigado!
Endereço do meu fórum:
http://pokemon-infinity.forumeiros.com
Versão do fórum:
PHPBB3
Re: Efeito ao passar o mouse no menu
Olá!
Aceda à "Folha de Estilo CSS":
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS
Codigo CSS:
Coloque no inicio de teu CSS.
Clique em "Validar".
Até mais.
Tópico movido de 'Questões sobre códigos' para 'Questões sobre a aparência do fórum'
Aceda à "Folha de Estilo CSS":
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS
Codigo CSS:
- Código:
a.mainmenu img:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
Coloque no inicio de teu CSS.
Clique em "Validar".
Até mais.
Tópico movido de 'Questões sobre códigos' para 'Questões sobre a aparência do fórum'
Re: Efeito ao passar o mouse no menu
Olá!
Aceda à "Folha de Estilo CSS":
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS
Codigo CSS:
Coloque no inicio de teu CSS.
Clique em "Validar".
Até mais.
Aceda à "Folha de Estilo CSS":
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS
Codigo CSS:
- Código:
a.mainmenu:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
filter: alpha(opacity=30);
-moz-opacity: 0.65;
opacity: 0.55;
text-decoration: none;
text-shadow: yes;
-webkit-transition: 180ms linear 0s;
-moz-transition: 180ms linear 0s;
-o-transition: 180ms linear 0s;
transition: 180ms linear 0s;
outline: 0 none;
}
Coloque no inicio de teu CSS.
Clique em "Validar".
Até mais.
Re: Efeito ao passar o mouse no menu
Esse código deixa a imagem mais clara, mas não faz o efeito que eu quero.
Re: Efeito ao passar o mouse no menu
Olá!
Aceda á "Folha de Estilos CSS":
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilos CSS
Adicione o seguinte código no inicio da sua "Folha de Estilos CSS"
Valide e veja o resultado.
Atenciosamente,
Crazy.
Aceda á "Folha de Estilos CSS":
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilos CSS
Adicione o seguinte código no inicio da sua "Folha de Estilos CSS"
- Código:
a.mainmenu img {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity=10);
-moz-opacity: 0.65;
opacity: 0.55;
text-decoration: none;
text-shadow: yes;
-webkit-transition: 180ms linear 0s;
-moz-transition: 180ms linear 0s;
-o-transition: 180ms linear 0s;
transition: 180ms linear 0s;
outline: 0 none;
}
a.mainmenu img:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
filter: alpha(opacity=30);
-moz-opacity: 0.65;
opacity: 1.55;
text-decoration: none;
text-shadow: yes;
-webkit-transition: 180ms linear 0s;
-moz-transition: 180ms linear 0s;
-o-transition: 180ms linear 0s;
transition: 180ms linear 0s;
outline: 0 none;
}
Valide e veja o resultado.
Atenciosamente,
Crazy.
Re: Efeito ao passar o mouse no menu
Infucional também!
Ele clareia as imagens, e, ao passar o mouse, ela fica normal.
Quero a imagem normal, quando passa o Mouse, tem aquele efeito.
Ele clareia as imagens, e, ao passar o mouse, ela fica normal.
Quero a imagem normal, quando passa o Mouse, tem aquele efeito.
Re: Efeito ao passar o mouse no menu
Olá!
Aceda à "Folha de Estilo CSS":
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS
Codigo CSS:
Clique em "Validar".
Até mais.
Aceda à "Folha de Estilo CSS":
Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS
Codigo CSS:
- Código:
a:link {
text-decoration: none;
text-shadow: yes;
-webkit-transition: 180ms linear 0s;
-moz-transition: 180ms linear 0s;
-o-transition: 180ms linear 0s;
transition: 180ms linear 0s;
outline: 0 none;
}
a.mainmenu img {
filter: alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
a.mainmenu img:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
Clique em "Validar".
Até mais.
Re: Efeito ao passar o mouse no menu
Olá amigo,
Não está igual, o senhor está fazendo um equivoco. Me responda, o senhor está colocand este código no inicio de teu CSS? Peço que me mande teu CSS.
Até mais.
Não está igual, o senhor está fazendo um equivoco. Me responda, o senhor está colocand este código no inicio de teu CSS? Peço que me mande teu CSS.
Até mais.
Re: Efeito ao passar o mouse no menu
Claro, aqui está:
- Spoiler:
- Código:
a:link {
text-decoration: none;
text-shadow: yes;
-webkit-transition: 180ms linear 0s;
-moz-transition: 180ms linear 0s;
-o-transition: 180ms linear 0s;
transition: 180ms linear 0s;
outline: 0 none;
}
a.mainmenu img {
filter: alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
a.mainmenu img:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
#chatbox_header, #chatbox_footer {
moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #4E5769 !important;
}
input, textarea, select {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.post span.postdetails a img:first-child,.postprofile dl dt a img:first-child,.post div.user-ident div.user-basic-info a img:first-child,dl.postdetails dl a img:first-child{width:150px;}
a.topictitle:hover {text-decoration: none!important;}
.postbody .content{background-image:url(http://www.johnrobshaw.com/magnify_pictures/10c/SHT_cal_king_white_fitted.jpg);border:1px 1px 1px;border-bottom:9px solid #000;border-bottom-left-radius:50px;border-bottom-right-radius:50px;border-radiu:30px 0 30px 0;border-style:solid;font-family:Palatino Linotype,sans-serif;font-size:12pt;margin-top:8px;padding:5px 5px 15px;text-align:center}li.header{background:#000;border-left:double 40px #888;border-right:double 40px #888;color:#FFF;height:20px;padding:-20px;text-align:center}
.hierarchy {
position: relative;
left: 30px;
}
.span-tab {
position: relative;
left: 35px;
}
.nomargin {
display: none!important;
}
.posts {
position: absolute;
left: -9999px;
}
.forumtitle {
position: relative !important;
left: 35px !important;
}
a.forumtitle:hover, .topictitle:hover {text-decoration: none;
margin-left: 9px;transition: 2s;
-webkit-transition: 2s
;}
#page-header .navbar{background-color:#DDE5E7}
.lastpost {
position: relative;
left: 50px;
}
.headerbar {background: url() 40px!important;}
#wrap {border: none!important;padding: 0px!important;}
li.header {
background: rgb(0, 0, 0);
border-left: double 40px #888;
border-right: double 40px #888;
color: rgb(255, 255, 255);
height: 20px;
padding: -20px;
text-align: center;
}
#categorias {
background-image: url(http://i.imgur.com/7fCCFjA.jpg);
border-bottom: 1px dotted #000000;
border-left: 6px solid #000000;
border-right: 6px solid #000000;
border-top: 1px dotted #000000;
margin-left: 44px;
padding: 7px;
text-align: center;
width: 340px
}
.forabg .row .lastpost {
background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRomoErb_t0xbE_KkMqSKhamRkE1Ey6xd7GE0IsjyGFAxFKtcNf)!important;
border-left: 6px solid #000;
border-radius: 0 30px 0 30px;
border-right: 6px solid #000;
border-top: 2px solid #000;
display: block;
font-family: 'Berkshire Swash';
font-size: 13px;
height: 50px;
margin-left: 40px!important;
margin-top: 13px;
padding: 4px 3px 0;
position: relative;
text-align: center;
width: 180px;
}
a[href="/u1"] {
text-shadow: 0px 0px 5px #4169E1;
font-family: MV Boli;
background: url("http://i.imgur.com/ZFoje.gif");
}
a[href="/u4"] {
text-shadow: 0px 0px 5px #4169E1;
font-family: MV Boli;
background: url("http://i.imgur.com/ZFoje.gif");
}
.h3 {
height: 70%;background:#000;background-position:center;border-radius:50px 50px 50px 50px;font-family:'Unica One';font-size:25px;font-weight:300;text-align:center;text-transform:uppercase;width: 100% !important;
}
#i_whosonline.img-whois + p, #chatbox_popup, #main-content .page-bottom {-moz-border-radius:45px 45px 0 0;-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);-webkit-border-radius:45px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);background:url(http://www.atuaconstrutora.com.br/MOB/images/FUNDO-AZUL-CLARO.jpg);border-radius:50px;border-rigth:20px solid #2F2F4F;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);color:#000;font-family:Bebas;letter-spacing:2px;text-align:center}
Re: Efeito ao passar o mouse no menu
Olá!
Troque o código que eu lhe forneci por este:
Até mais.
Troque o código que eu lhe forneci por este:
- Código:
a.mainmenu img:hover {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity=10);
-moz-opacity: 0.65;
opacity: 0.55;
text-decoration: none;
text-shadow: yes;
-webkit-transition: 180ms linear 0s;
-moz-transition: 180ms linear 0s;
-o-transition: 180ms linear 0s;
transition: 180ms linear 0s;
outline: 0 none;
}
a.mainmenu img {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
filter: alpha(opacity=30);
-moz-opacity: 0.65;
opacity: 1.55;
text-decoration: none;
text-shadow: yes;
-webkit-transition: 180ms linear 0s;
-moz-transition: 180ms linear 0s;
-o-transition: 180ms linear 0s;
transition: 180ms linear 0s;
outline: 0 none;
}
Até mais.
Re: Efeito ao passar o mouse no menu
Continua infucional...
Agora está o contrário do que estava antes: Está normal, quando passa o mouse, fica mais claro.
Agora está o contrário do que estava antes: Está normal, quando passa o mouse, fica mais claro.
Re: Efeito ao passar o mouse no menu
Olá amigo,
Estranho estes código não estarem funcionando... No caso agora teste este:
Até mais.
Estranho estes código não estarem funcionando... No caso agora teste este:
- Código:
a.mainmenu:hover{position:relative;bottom:5px}
a.mainmenu img {
filter:alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
a.mainmenu img:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
a.mainmenu:hover{
filter:alpha(opacity=30);
-moz-opacity: 0.65;
opacity: 0.55;
}
Até mais.
Re: Efeito ao passar o mouse no menu
Não está igual!
Ele clareou as imagens e, ao passar o mouse, fez subi-las.
Ele clareou as imagens e, ao passar o mouse, fez subi-las.
Re: Efeito ao passar o mouse no menu
Olá!
Substitua-os por apenas este código:
Salve e visualize!
Atenciosamente, Hizu.
Substitua-os por apenas este código:
- Código:
a.mainmenu img {
filter: alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
a:link {
text-decoration: none;
text-shadow: yes;
-webkit-transition: 180ms linear 0s;
-moz-transition: 180ms linear 0s;
-o-transition: 180ms linear 0s;
transition: 180ms linear 0s;
outline: 0 none;
}
a.mainmenu img:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
Salve e visualize!
Atenciosamente, Hizu.
Hizu- ****
- Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360
Re: Efeito ao passar o mouse no menu
O senhor está retirando os antigos e colocando os novos códigos? Caso esteja mantendo os outros códigos disponibilizados neste tópico, pode ser que por isto, os novos códigos não estejam surtindo efeito. Em todo o caso, substitua-os por este:
Atenciosamente, Hizu.
- Código:
a.mainmenu{color:#000;text-decoration:none}a.mainmenu:hover{color:#fa0303;text-decoration:underline}
a.mainmenu:hover{position:relative;bottom:5px}
a.mainmenu img {filter:alpha(opacity=40);-moz-opacity: 0.4;opacity: 0.4;}
a.mainmenu img:hover {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;}
a.mainmenu:hover{filter:alpha(opacity=30);-moz-opacity: 0.65;opacity: 0.55;}
a:link {text-decoration: none;text-shadow: yes;-webkit-transition: 180ms linear 0s;-moz-transition: 180ms linear 0s;-o-transition: 180ms linear 0s;transition: 180ms linear 0s;outline: 0 none; }
a:hover {color: #F5E90E;}
Atenciosamente, Hizu.
Última edição por Hizu em 09.07.13 2:21, editado 1 vez(es)
Hizu- ****
- Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360
Re: Efeito ao passar o mouse no menu
Sim, estou, e mais uma vez, infuncional, continua com o efeito de 'subir' e sem a 'piscada' que eu quero.
Re: Efeito ao passar o mouse no menu
Poderia me disponibilizar sua CSS? Se preferir, poderá me mandar por mensagem privada, irei analisar. Vale ressaltar que como a sua imagem é diferente. o efeito pode parecer diferente, mas na verdade é o mesmo.
Todavia, faça uma busca no teu CSS por este código:
Retire o código acima e salve logo em seguida! Resultou?
Todavia, faça uma busca no teu CSS por este código:
- Código:
a.mainmenu img:hover {
opacity: 1;
}
Retire o código acima e salve logo em seguida! Resultou?
Hizu- ****
- Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360
Re: Efeito ao passar o mouse no menu
Como já tinha enviado anteriormente, aqui está minha CSS:
Não achei nada que correspondesse a
- Spoiler:
- Código:
a.mainmenu{color:#000;text-decoration:none}a.mainmenu:hover{color:#fa0303;text-decoration:underline}
a.mainmenu:hover{position:relative;bottom:5px}
a.mainmenu img {filter:alpha(opacity=40);-moz-opacity: 0.4;opacity: 0.4;}
a.mainmenu img:hover {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;}
a.mainmenu:hover{filter:alpha(opacity=30);-moz-opacity: 0.65;opacity: 0.55;}
a:link {text-decoration: none;text-shadow: yes;-webkit-transition: 180ms linear 0s;-moz-transition: 180ms linear 0s;-o-transition: 180ms linear 0s;transition: 180ms linear 0s;outline: 0 none; }
a:hover {color: #F5E90E;}
#chatbox_header, #chatbox_footer {
moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #4E5769 !important;
}
#page-header .navbar{background-color:#DDE5E7}
input, textarea, select {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.post span.postdetails a img:first-child,.postprofile dl dt a img:first-child,.post div.user-ident div.user-basic-info a img:first-child,dl.postdetails dl a img:first-child{width:150px;}
a.topictitle:hover {text-decoration: none!important;}
.postbody .content{background-image:url(http://www.johnrobshaw.com/magnify_pictures/10c/SHT_cal_king_white_fitted.jpg);border:1px 1px 1px;border-bottom:9px solid #000;border-bottom-left-radius:50px;border-bottom-right-radius:50px;border-radiu:30px 0 30px 0;border-style:solid;font-family:Palatino Linotype,sans-serif;font-size:12pt;margin-top:8px;padding:5px 5px 15px;text-align:center}li.header{background:#000;border-left:double 40px #888;border-right:double 40px #888;color:#FFF;height:20px;padding:-20px;text-align:center}
.hierarchy {
position: relative;
left: 30px;
}
.span-tab {
position: relative;
left: 35px;
}
.nomargin {
display: none!important;
}
.posts {
position: absolute;
left: -9999px;
}
.forumtitle {
position: relative !important;
left: 35px !important;
}
a.forumtitle:hover, .topictitle:hover {text-decoration: none;
margin-left: 9px;transition: 2s;
-webkit-transition: 2s
;}
.lastpost {
position: relative;
left: 50px;
}
.headerbar {background: url() 40px!important;}
#wrap {border: none!important;padding: 0px!important;}
li.header {
background: rgb(0, 0, 0);
border-left: double 40px #888;
border-right: double 40px #888;
color: rgb(255, 255, 255);
height: 20px;
padding: -20px;
text-align: center;
}
#categorias {
background-image: url(http://i.imgur.com/7fCCFjA.jpg);
border-bottom: 1px dotted #000000;
border-left: 6px solid #000000;
border-right: 6px solid #000000;
border-top: 1px dotted #000000;
margin-left: 44px;
padding: 7px;
text-align: center;
width: 340px
}
.forabg .row .lastpost {
background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRomoErb_t0xbE_KkMqSKhamRkE1Ey6xd7GE0IsjyGFAxFKtcNf)!important;
border-left: 6px solid #000;
border-radius: 0 30px 0 30px;
border-right: 6px solid #000;
border-top: 2px solid #000;
display: block;
font-family: 'Berkshire Swash';
font-size: 13px;
height: 50px;
margin-left: 40px!important;
margin-top: 13px;
padding: 4px 3px 0;
position: relative;
text-align: center;
width: 180px;
}
a[href="/u1"] {
text-shadow: 0px 0px 5px #4169E1;
font-family: MV Boli;
background: url("http://i.imgur.com/ZFoje.gif");
}
a[href="/u4"] {
text-shadow: 0px 0px 5px #4169E1;
font-family: MV Boli;
background: url("http://i.imgur.com/ZFoje.gif");
}
.h3 {
height: 70%;background:#000;background-position:center;border-radius:50px 50px 50px 50px;font-family:'Unica One';font-size:25px;font-weight:300;text-align:center;text-transform:uppercase;width: 100% !important;
}
#i_whosonline.img-whois + p, #chatbox_popup, #main-content .page-bottom {-moz-border-radius:45px 45px 0 0;-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);-webkit-border-radius:45px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);background:url(http://www.atuaconstrutora.com.br/MOB/images/FUNDO-AZUL-CLARO.jpg);border-radius:50px;border-rigth:20px solid #2F2F4F;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);color:#000;font-family:Bebas;letter-spacing:2px;text-align:center}
Não achei nada que correspondesse a
- Código:
a.mainmenu img:hover {
opacity: 1;
}
- Código:
a.mainmenu img:hover {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;}
Re: Efeito ao passar o mouse no menu
Boa noite!
Substitua a tua CSS inteira por esta:
Até mais!
Substitua a tua CSS inteira por esta:
- Código:
a.mainmenu{color:#000;text-decoration:none}a.mainmenu:hover{color:#fa0303;text-decoration:underline}
a.mainmenu:hover{position:relative;bottom:5px}
a.mainmenu img {filter:alpha(opacity=40);-moz-opacity: 0.4;opacity: 0.4;}
a.mainmenu img:hover {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;}
a.mainmenu:hover{filter:alpha(opacity=30);-moz-opacity: 0.65;opacity: 0.55;}
a:link {text-decoration: none;text-shadow: yes;-webkit-transition: 180ms linear 0s;-moz-transition: 180ms linear 0s;-o-transition: 180ms linear 0s;transition: 180ms linear 0s;outline: 0 none; }
a:hover {color: #F5E90E;}
#chatbox_header, #chatbox_footer {
moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #4E5769 !important;
}
#page-header .navbar{background-color:#DDE5E7}
input, textarea, select {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.post span.postdetails a img:first-child,.postprofile dl dt a img:first-child,.post div.user-ident div.user-basic-info a img:first-child,dl.postdetails dl a img:first-child{width:150px;}
a.topictitle:hover {text-decoration: none!important;}
.postbody .content{background-image:url(http://www.johnrobshaw.com/magnify_pictures/10c/SHT_cal_king_white_fitted.jpg);border:1px 1px 1px;border-bottom:9px solid #000;border-bottom-left-radius:50px;border-bottom-right-radius:50px;border-radiu:30px 0 30px 0;border-style:solid;font-family:Palatino Linotype,sans-serif;font-size:12pt;margin-top:8px;padding:5px 5px 15px;text-align:center}li.header{background:#000;border-left:double 40px #888;border-right:double 40px #888;color:#FFF;height:20px;padding:-20px;text-align:center}
.hierarchy {
position: relative;
left: 30px;
}
.span-tab {
position: relative;
left: 35px;
}
.nomargin {
display: none!important;
}
.posts {
position: absolute;
left: -9999px;
}
.forumtitle {
position: relative !important;
left: 35px !important;
}
a.forumtitle:hover, .topictitle:hover {text-decoration: none;
margin-left: 9px;transition: 2s;
-webkit-transition: 2s
;}
.lastpost {
position: relative;
left: 50px;
}
.headerbar {background: url() 40px!important;}
#wrap {border: none!important;padding: 0px!important;}
li.header {
background: rgb(0, 0, 0);
border-left: double 40px #888;
border-right: double 40px #888;
color: rgb(255, 255, 255);
height: 20px;
padding: -20px;
text-align: center;
}
#categorias {
background-image: url(http://i.imgur.com/7fCCFjA.jpg);
border-bottom: 1px dotted #000000;
border-left: 6px solid #000000;
border-right: 6px solid #000000;
border-top: 1px dotted #000000;
margin-left: 44px;
padding: 7px;
text-align: center;
width: 340px
}
.forabg .row .lastpost {
background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRomoErb_t0xbE_KkMqSKhamRkE1Ey6xd7GE0IsjyGFAxFKtcNf)!important;
border-left: 6px solid #000;
border-radius: 0 30px 0 30px;
border-right: 6px solid #000;
border-top: 2px solid #000;
display: block;
font-family: 'Berkshire Swash';
font-size: 13px;
height: 50px;
margin-left: 40px!important;
margin-top: 13px;
padding: 4px 3px 0;
position: relative;
text-align: center;
width: 180px;
}
a[href="/u1"] {
text-shadow: 0px 0px 5px #4169E1;
font-family: MV Boli;
background: url("http://i.imgur.com/ZFoje.gif");
}
a[href="/u4"] {
text-shadow: 0px 0px 5px #4169E1;
font-family: MV Boli;
background: url("http://i.imgur.com/ZFoje.gif");
}
.h3 {
height: 70%;background:#000;background-position:center;border-radius:50px 50px 50px 50px;font-family:'Unica One';font-size:25px;font-weight:300;text-align:center;text-transform:uppercase;width: 100% !important;
}
#i_whosonline.img-whois + p, #chatbox_popup, #main-content .page-bottom {-moz-border-radius:45px 45px 0 0;-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);-webkit-border-radius:45px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);background:url(http://www.atuaconstrutora.com.br/MOB/images/FUNDO-AZUL-CLARO.jpg);border-radius:50px;border-rigth:20px solid #2F2F4F;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);color:#000;font-family:Bebas;letter-spacing:2px;text-align:center}
Até mais!
Hizu- ****
- Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360
Re: Efeito ao passar o mouse no menu
Esqueci de retirar uma coisa apenas, agora tenho certeza que dará certo!
Substitua a tua CSS por esta:
Resulta?
Substitua a tua CSS por esta:
- Código:
a.mainmenu{color:#000;text-decoration:none}a.mainmenu:hover{color:#fa0303;text-decoration:underline}
a.mainmenu:hover{position:relative}
a.mainmenu img {filter:alpha(opacity=40);-moz-opacity: 0.4;opacity: 0.4;}
a.mainmenu img:hover {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;}
a.mainmenu:hover{filter:alpha(opacity=30);-moz-opacity: 0.65;opacity: 0.55;}
a:link {text-decoration: none;text-shadow: yes;-webkit-transition: 180ms linear 0s;-moz-transition: 180ms linear 0s;-o-transition: 180ms linear 0s;transition: 180ms linear 0s;outline: 0 none; }
a:hover {color: #F5E90E;}
#chatbox_header, #chatbox_footer {
moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #4E5769 !important;
}
#page-header .navbar{background-color:#DDE5E7}
input, textarea, select {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.post span.postdetails a img:first-child,.postprofile dl dt a img:first-child,.post div.user-ident div.user-basic-info a img:first-child,dl.postdetails dl a img:first-child{width:150px;}
a.topictitle:hover {text-decoration: none!important;}
.postbody .content{background-image:url(http://www.johnrobshaw.com/magnify_pictures/10c/SHT_cal_king_white_fitted.jpg);border:1px 1px 1px;border-bottom:9px solid #000;border-bottom-left-radius:50px;border-bottom-right-radius:50px;border-radiu:30px 0 30px 0;border-style:solid;font-family:Palatino Linotype,sans-serif;font-size:12pt;margin-top:8px;padding:5px 5px 15px;text-align:center}li.header{background:#000;border-left:double 40px #888;border-right:double 40px #888;color:#FFF;height:20px;padding:-20px;text-align:center}
.hierarchy {
position: relative;
left: 30px;
}
.span-tab {
position: relative;
left: 35px;
}
.nomargin {
display: none!important;
}
.posts {
position: absolute;
left: -9999px;
}
.forumtitle {
position: relative !important;
left: 35px !important;
}
a.forumtitle:hover, .topictitle:hover {text-decoration: none;
margin-left: 9px;transition: 2s;
-webkit-transition: 2s
;}
.lastpost {
position: relative;
left: 50px;
}
.headerbar {background: url() 40px!important;}
#wrap {border: none!important;padding: 0px!important;}
li.header {
background: rgb(0, 0, 0);
border-left: double 40px #888;
border-right: double 40px #888;
color: rgb(255, 255, 255);
height: 20px;
padding: -20px;
text-align: center;
}
#categorias {
background-image: url(http://i.imgur.com/7fCCFjA.jpg);
border-bottom: 1px dotted #000000;
border-left: 6px solid #000000;
border-right: 6px solid #000000;
border-top: 1px dotted #000000;
margin-left: 44px;
padding: 7px;
text-align: center;
width: 340px
}
.forabg .row .lastpost {
background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRomoErb_t0xbE_KkMqSKhamRkE1Ey6xd7GE0IsjyGFAxFKtcNf)!important;
border-left: 6px solid #000;
border-radius: 0 30px 0 30px;
border-right: 6px solid #000;
border-top: 2px solid #000;
display: block;
font-family: 'Berkshire Swash';
font-size: 13px;
height: 50px;
margin-left: 40px!important;
margin-top: 13px;
padding: 4px 3px 0;
position: relative;
text-align: center;
width: 180px;
}
a[href="/u1"] {
text-shadow: 0px 0px 5px #4169E1;
font-family: MV Boli;
background: url("http://i.imgur.com/ZFoje.gif");
}
a[href="/u4"] {
text-shadow: 0px 0px 5px #4169E1;
font-family: MV Boli;
background: url("http://i.imgur.com/ZFoje.gif");
}
.h3 {
height: 70%;background:#000;background-position:center;border-radius:50px 50px 50px 50px;font-family:'Unica One';font-size:25px;font-weight:300;text-align:center;text-transform:uppercase;width: 100% !important;
}
#i_whosonline.img-whois + p, #chatbox_popup, #main-content .page-bottom {-moz-border-radius:45px 45px 0 0;-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);-webkit-border-radius:45px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);background:url(http://www.atuaconstrutora.com.br/MOB/images/FUNDO-AZUL-CLARO.jpg);border-radius:50px;border-rigth:20px solid #2F2F4F;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);color:#000;font-family:Bebas;letter-spacing:2px;text-align:center}
Resulta?
Hizu- ****
- Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360
Re: Efeito ao passar o mouse no menu
Caso nenhum resulte, experimente trocar por este:
Até mais!
- Código:
a:link {
text-decoration: none;
text-shadow: yes;
-webkit-transition: 180ms linear 0s;
-moz-transition: 180ms linear 0s;
-o-transition: 180ms linear 0s;
transition: 180ms linear 0s;
outline: 0 none;
}
Até mais!
Re: Efeito ao passar o mouse no menu
Não funcionaram... Se funcionaram, mal foi visível. Teria como escurecer?
Re: Efeito ao passar o mouse no menu
Boa tarde!
Então, a questão é que a imagem do seu fórum é diferente da imagem do outro fórum, então o efeito parece estar diferente, mas na verdade é o mesmo.
Substitua tua CSS por esta:
Salve e veja o resultado! Caso ache que o efeito não está igual, substitua sua imagem por uma igual do outro fórum e veja se o efeito é o mesmo.
Atenciosamente,
Hizu.
Então, a questão é que a imagem do seu fórum é diferente da imagem do outro fórum, então o efeito parece estar diferente, mas na verdade é o mesmo.
Substitua tua CSS por esta:
- Código:
a.mainmenu{color:#000;text-decoration:none}a.mainmenu:hover{color:#fa0303;text-decoration:underline}
a.mainmenu:hover{position:relative}
a:link {text-decoration: none;text-shadow: yes;-webkit-transition: 180ms linear 0s;-moz-transition: 180ms linear 0s;-o-transition: 180ms linear 0s;transition: 180ms linear 0s;outline: 0 none;}
a:hover {color: #F5E90E;}
a.mainmenu img {filter:alpha(opacity=40);-moz-opacity: 0.4;opacity: 0.4;}
a.mainmenu img:hover {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;}
a.mainmenu:hover{filter:alpha(opacity=30);-moz-opacity: 0.65;opacity: 0.55;}
a:link{color:#000}
#chatbox_header, #chatbox_footer {
moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #4E5769 !important;
}
#page-header .navbar{background-color:#DDE5E7}
input, textarea, select {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.post span.postdetails a img:first-child,.postprofile dl dt a img:first-child,.post div.user-ident div.user-basic-info a img:first-child,dl.postdetails dl a img:first-child{width:150px;}
a.topictitle:hover {text-decoration: none!important;}
.postbody .content{background-image:url(http://www.johnrobshaw.com/magnify_pictures/10c/SHT_cal_king_white_fitted.jpg);border:1px 1px 1px;border-bottom:9px solid #000;border-bottom-left-radius:50px;border-bottom-right-radius:50px;border-radiu:30px 0 30px 0;border-style:solid;font-family:Palatino Linotype,sans-serif;font-size:12pt;margin-top:8px;padding:5px 5px 15px;text-align:center}li.header{background:#000;border-left:double 40px #888;border-right:double 40px #888;color:#FFF;height:20px;padding:-20px;text-align:center}
.hierarchy {
position: relative;
left: 30px;
}
.span-tab {
position: relative;
left: 35px;
}
.nomargin {
display: none!important;
}
.posts {
position: absolute;
left: -9999px;
}
.forumtitle {
position: relative !important;
left: 35px !important;
}
a.forumtitle:hover, .topictitle:hover {text-decoration: none;
margin-left: 9px;transition: 2s;
-webkit-transition: 2s
;}
.lastpost {
position: relative;
left: 50px;
}
.headerbar {background: url() 40px!important;}
#wrap {border: none!important;padding: 0px!important;}
li.header {
background: rgb(0, 0, 0);
border-left: double 40px #888;
border-right: double 40px #888;
color: rgb(255, 255, 255);
height: 20px;
padding: -20px;
text-align: center;
}
#categorias {
background-image: url(http://i.imgur.com/7fCCFjA.jpg);
border-bottom: 1px dotted #000000;
border-left: 6px solid #000000;
border-right: 6px solid #000000;
border-top: 1px dotted #000000;
margin-left: 44px;
padding: 7px;
text-align: center;
width: 340px
}
.forabg .row .lastpost {
background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRomoErb_t0xbE_KkMqSKhamRkE1Ey6xd7GE0IsjyGFAxFKtcNf)!important;
border-left: 6px solid #000;
border-radius: 0 30px 0 30px;
border-right: 6px solid #000;
border-top: 2px solid #000;
display: block;
font-family: 'Berkshire Swash';
font-size: 13px;
height: 50px;
margin-left: 40px!important;
margin-top: 13px;
padding: 4px 3px 0;
position: relative;
text-align: center;
width: 180px;
}
a[href="/u1"] {
text-shadow: 0px 0px 5px #4169E1;
font-family: MV Boli;
background: url("http://i.imgur.com/ZFoje.gif");
}
a[href="/u4"] {
text-shadow: 0px 0px 5px #4169E1;
font-family: MV Boli;
background: url("http://i.imgur.com/ZFoje.gif");
}
.h3 {
height: 70%;background:#000;background-position:center;border-radius:50px 50px 50px 50px;font-family:'Unica One';font-size:25px;font-weight:300;text-align:center;text-transform:uppercase;width: 100% !important;
}
#i_whosonline.img-whois + p, #chatbox_popup, #main-content .page-bottom {-moz-border-radius:45px 45px 0 0;-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);-webkit-border-radius:45px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);background:url(http://www.atuaconstrutora.com.br/MOB/images/FUNDO-AZUL-CLARO.jpg);border-radius:50px;border-rigth:20px solid #2F2F4F;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);color:#000;font-family:Bebas;letter-spacing:2px;text-align:center}
Salve e veja o resultado! Caso ache que o efeito não está igual, substitua sua imagem por uma igual do outro fórum e veja se o efeito é o mesmo.
Atenciosamente,
Hizu.
Hizu- ****
- Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360
Re: Efeito ao passar o mouse no menu
Está bom assim.
Mas, teria como, diminuir um pouco a claridade quando está sem o mouse, e quando bota o mouse, a imagem vira a original (sem efeitos)?
Mas, teria como, diminuir um pouco a claridade quando está sem o mouse, e quando bota o mouse, a imagem vira a original (sem efeitos)?
Re: Efeito ao passar o mouse no menu
Neste caso, substitua a tua CSS atual por esta:
Seria isto?
Até mais!
- Código:
a.mainmenu{color:#000;text-decoration:none}a.mainmenu:hover{color:#fa0303;text-decoration:underline}
a.mainmenu:hover{position:relative}
a:link {text-decoration: none;text-shadow: yes;-webkit-transition: 180ms linear 0s;-moz-transition: 180ms linear 0s;-o-transition: 180ms linear 0s;transition: 180ms linear 0s;outline: 0 none;}
a:hover {color: #F5E90E;}
a.mainmenu img {filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;}
a.mainmenu img:hover {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;}
#chatbox_header, #chatbox_footer {
moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #4E5769 !important;
}
#page-header .navbar{background-color:#DDE5E7}
input, textarea, select {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.post span.postdetails a img:first-child,.postprofile dl dt a img:first-child,.post div.user-ident div.user-basic-info a img:first-child,dl.postdetails dl a img:first-child{width:150px;}
a.topictitle:hover {text-decoration: none!important;}
.postbody .content{background-image:url(http://www.johnrobshaw.com/magnify_pictures/10c/SHT_cal_king_white_fitted.jpg);border:1px 1px 1px;border-bottom:9px solid #000;border-bottom-left-radius:50px;border-bottom-right-radius:50px;border-radiu:30px 0 30px 0;border-style:solid;font-family:Palatino Linotype,sans-serif;font-size:12pt;margin-top:8px;padding:5px 5px 15px;text-align:center}li.header{background:#000;border-left:double 40px #888;border-right:double 40px #888;color:#FFF;height:20px;padding:-20px;text-align:center}
.hierarchy {
position: relative;
left: 30px;
}
.span-tab {
position: relative;
left: 35px;
}
.nomargin {
display: none!important;
}
.posts {
position: absolute;
left: -9999px;
}
.forumtitle {
position: relative !important;
left: 35px !important;
}
a.forumtitle:hover, .topictitle:hover {text-decoration: none;
margin-left: 9px;transition: 2s;
-webkit-transition: 2s
;}
.lastpost {
position: relative;
left: 50px;
}
.headerbar {background: url() 40px!important;}
#wrap {border: none!important;padding: 0px!important;}
li.header {
background: rgb(0, 0, 0);
border-left: double 40px #888;
border-right: double 40px #888;
color: rgb(255, 255, 255);
height: 20px;
padding: -20px;
text-align: center;
}
#categorias {
background-image: url(http://i.imgur.com/7fCCFjA.jpg);
border-bottom: 1px dotted #000000;
border-left: 6px solid #000000;
border-right: 6px solid #000000;
border-top: 1px dotted #000000;
margin-left: 44px;
padding: 7px;
text-align: center;
width: 340px
}
.forabg .row .lastpost {
background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRomoErb_t0xbE_KkMqSKhamRkE1Ey6xd7GE0IsjyGFAxFKtcNf)!important;
border-left: 6px solid #000;
border-radius: 0 30px 0 30px;
border-right: 6px solid #000;
border-top: 2px solid #000;
display: block;
font-family: 'Berkshire Swash';
font-size: 13px;
height: 50px;
margin-left: 40px!important;
margin-top: 13px;
padding: 4px 3px 0;
position: relative;
text-align: center;
width: 180px;
}
a[href="/u1"] {
text-shadow: 0px 0px 5px #4169E1;
font-family: MV Boli;
background: url("http://i.imgur.com/ZFoje.gif");
}
a[href="/u4"] {
text-shadow: 0px 0px 5px #4169E1;
font-family: MV Boli;
background: url("http://i.imgur.com/ZFoje.gif");
}
.h3 {
height: 70%;background:#000;background-position:center;border-radius:50px 50px 50px 50px;font-family:'Unica One';font-size:25px;font-weight:300;text-align:center;text-transform:uppercase;width: 100% !important;
}
#i_whosonline.img-whois + p, #chatbox_popup, #main-content .page-bottom {-moz-border-radius:45px 45px 0 0;-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);-webkit-border-radius:45px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);background:url(http://www.atuaconstrutora.com.br/MOB/images/FUNDO-AZUL-CLARO.jpg);border-radius:50px;border-rigth:20px solid #2F2F4F;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);color:#000;font-family:Bebas;letter-spacing:2px;text-align:center}
Seria isto?
Até mais!
Hizu- ****
- Membro desde : 08/07/2013
Mensagens : 249
Pontos : 360
Tópicos semelhantes
» Efeito ao passar o mouse nos botoes do menu
» Efeito ao passar o mouse nos botões do menu
» Como colocar o menu acima do banner, e efeito de passar o mouse acima do menu?
» Efeito ao passar o mouse em cima do avatar
» Retirar efeito de passar mouse
» Efeito ao passar o mouse nos botões do menu
» Como colocar o menu acima do banner, e efeito de passar o mouse acima do menu?
» Efeito ao passar o mouse em cima do avatar
» Retirar efeito de passar mouse
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos