Às vezes, o texto padrão simplesmente não funciona. Se você está projetando um site ou página de destino que precisa de imagens de alto impacto dentro do seu texto para realmente ilustrar um ponto, este tutorial é para você! Com apenas algumas linhas de CSS, vamos transformar um parágrafo de texto na obra-prima abaixo.
A demonstração deste tutorial pode ser encontrada aqui .
Adicione nosso parágrafo de texto
Criei uma classe .bg para usar quando quiser adicionar esse efeito aos parágrafos. Você pode alterar isso para várias tags diferentes, como cabeçalhos, se preferir.
<p class="bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor magna</p>
Usei pexels para encontrar a imagem livre de royalties no meu exemplo. Depois de encontrar uma imagem para o seu exemplo, renomeie-a para bg.jpg.
Agora, vamos adicionar algum CSS
Agora, só temos que deixar a fonte maior e mais ousada e adicionar a imagem baixada recentemente para ser usada dentro do nosso parágrafo.
p.bg {
font-size: 66px;
line-height: 80px;
font-weight: 800;
text-transform: uppercase;
background: url(bg.jpeg) 0 0 / cover no-repeat;
color: #de466c;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
O que estamos fazendo com nosso parágrafo
- tamanho da fonte: 66px; Aumente o tamanho do nosso texto.
- altura da linha: 80px; Aumente também a altura da linha.
- peso da fonte: 800; Deixe o peso do texto o mais ousado possível.
- transformação de texto: maiúsculas; Converta o texto para maiúsculas.
- background: url(bg.jpeg) 0 0 / capa sem repetição; Faça da imagem uma imagem de fundo do texto e torne o tamanho o maior possível.
- cor: #de466c; Adicione uma cor alternativa se o navegador não suportar as próximas duas linhas.
- -webkit-background-clip: texto; Mascarar nossa imagem para o texto.
- -webkit-text-fill-color: transparente; Usado com a regra anterior para recortar a imagem no texto.
E isso é tudo. Uma maneira fácil de tornar o texto mais interessante, embora certifique-se de testar seu projeto nos navegadores de destino para garantir que tudo seja exibido corretamente.
Agradecimentos ao FrontendHero. O original deste tutorial você encontra aqui.
