8
respostas

Aula 8 - Ex6 - Shadow nos links na área de navegação lateral

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

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.