Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Técnica Image Replacement

Durante o curso de html e css, foi lecionada uma técnica chamada image replacement, que consiste em adicionar uma imagem através do css e o texto é direcionado para outro lugar fora da página, com a utilização text-indent: -9999; Existe alguma prática que faça esse mesmo processo e que seja uma boa prática no HTML ? Abaixo o texto de exemplo: CSS

.icones-redes-sociais a{
    display: inline-block;
    width: 40px;
    height: 40px;
    text-indent: -99999;

}
.twitter {
    background-image: url(twitter.png);
}
.github {
    background-image: url(github.png);
    }
.linkedin {
    background-image: url(linkedin.png);
}

HTML

<ul class="icones-redes-sociais">
                <li>
                    <a class= "github"href="https://github.com/joaodasilva">
                        Git
                    </a>
                </li>
                <li>
                    <a class= "twitter"href="https://twitter.com/joaodasilva">
                        Twitter
                    </a>
                </li>
                <li>
                    <a class= "linkedin"href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                        Linkedin
                    </a>
                </li>
            </ul>
2 respostas
solução!

Oi Talita, tudo certo?

Existem técnicas e técnicas para fazer image replacement, como essa que você aprendeu, que suponho ser a mais utilizada atualmente.

Outras envolvem deixar o font-size do texto com o valor de 0, resolve no desktop, mas no celular você pode ter problemas pelo tamanho mínimo de fonte que alguns sistemas possuem.

Outra opção é deixar a cor transparente, mas ela ainda ficaria selecionável, caso o usuário selecione a região do texto com o mouse.

Se você quiser ver outras o CSS Tricks fez essa lista de 9 técnicas de Image Replacement (em inglês). A do text-indent é a de número #3.

Espero ter ajudado,

Abcs!

Ajudou muito obrigada!