Para esconder um texto, poderíamos utilizar a color: transparent? Esta solução impacta em algum outro ponto?
Obrigada!
Solucionado
Para esconder um texto, poderíamos utilizar a color: transparent? Esta solução impacta em algum outro ponto?
Obrigada!
hoje, com a Alura e o Google Gemini
Olá, Simone! Tudo bem? =)
Usar color: transparent em um texto deixará a cor transparente, mas acredito que o texto ainda estará lá, ou seja, terá uma altura e largura, terá dimensões que devem ser levadas em conta. Se você não se importar com isso, acho que não deve ter grandes problemas. Uma outra solução talvez seja o display: none. =)
Espero ter ajudado, qualquer dúvida não deixe de postar!
Abraço e bons estudos,
Fábio
Depende: color transparent não é uma boa solução
Para tal você tem duas opções;
visibility ou display
Quando você coloca
visibility: hidden
Você diz pro seu CSS que seu elemento ficará invisível, mas ele ainda fará parte do layout, deslocando objetos
Na prática, ele estará ali, apenas não poderá ser visto.
Quando você usa :
display: none
Você está dizendo pro seu código que aquele objeto existe, mas ele não vai aparecer de forma nenhuma na página, Na prática, ele é escrito no código, mas não é exibido pro usuário, nem atrapalha outros elementos no DOM.
Espero ter ajudado
Boa tarde, Simone!
Salva esse código como teste.html e vê o que acontece com os textos.
Perceba que tanto o "color: transparent" quanto o "rgba" mudam a transparência do texto, entretanto, as bordas e background, por exemplo, continuam visíveis.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.rgba {
color: #000; /** fix para navegadores antigos **/
color: rgba(0, 0, 0, 0.1);
border: 10px solid #F00;
}
.transparent {
color: transparent;
border: 10px solid #00F;
}
.opacity {
opacity: 0.1;
border: 10px solid #0F0;
}
</style>
</head>
<body>
<h1 class="rgba">Teste com rgba</h1>
<h2 class="transparent">Teste com transparent</h2>
<p class="opacity">Teste com opacity</p>
</body>
</html>Assim, se você deseja deixar a tag transparente e todos os elementos que a integram (como borda), você pode utilizar o "opacity", que deixa o texto e as bordas também transparentes.
Boa tarde, pessoal!
Muito obrigada!