Consegui aplicar da mesma forma com a explicação do professor.
Mas, os ícones que estão na base do menu, não demonstram o mesmo comportamento. Sendo que inserimos o comando para "aside a:". Mesmo sabendo que colocamos um text-indent gigante na classe "icones-redes- sociais" onde estão esses ícones, teria alguma forma de aplicar a mesma sombra nesses itens?
8
respostas
respostas
Aula 8 - Ex6 - Shadow nos links na área de navegação lateral
Flávio, poderia compartilhar um print ou os códigos ? Ficaria mais fácil lhe ajudar.
Matheus, boa noite! Esse é o link da imagem. São os botões do menu lateral à direita.
O código css do menu é esse:
.icones-redes-sociais li {
display: inline-block;
}
.icones-redes-sociais a {
width: 40px;
height: 40px;
display: block;
text-indent: -99999px;
}
.github {
background-image: url(../imagens/github.png);
}
.twitter {
background-image: url(../imagens/twitter.png);
}
.linkedin {
background-image: url(../imagens/linkedin.png);
}
main {
width: 80%;
float: left;
padding-bottom: 4em;
}
.minha-foto,
.navegacao-site {
border-left: .5em solid black;
border-bottom: .5em solid black;
box-sizing: border-box;
}
.minha-foto {
position: absolute;
top: 0;
right: 0;
height: 300px;
}
main a:hover,
main a:focus,
footer a:hover,
footer a:focus {
color:red;
}
aside a:hover,
aside a:focus {
text-shadow: 0px 0px 8px pink;
}
oi. acho que para adicionar o shadow nesses itens devemos mudar a regra para eles. para um elemento acima.
Eu tentei somar algo do tipo:
.github:hover {
text-shadow: 1px 1px 10px white;
}
Mas nada aconteceu também.
então... pensei em colocar a sombra no elemento acima. no pai. já que o texto está bem longe (-9999px) não iremos ver.
coloquei no li: .icones-redes-sociais li:hover { box-shadow: 0px 0px 2px pink; border-radius: 50%; }
Em vez de usar o text-shadow tente trocar pelo box-shadow, pois o texto você fez a técnica de ident então não vai estar visível.
Deu certo!
Mas, como o box-shadow pega o elemento, acabou que ficou a sombra em torno de uma caixa. Pensei que a sombra respeitaria o png com fundo transparente.
Certo, isso porque acontece por causa do text-ident, particularmente eu não uso essa técnico, gosto de trabalhar com ícones.