Você provavelmente está familiarizado com o uso de texto para mascarar uma imagem no Photoshop; é a maneira mais conhecida de adicionar textura, ou até mesmo um fundo de imagem, ao seu texto. Você pode então usar esse texto como uma imagem em seu site; no entanto, não seria ótimo se você pudesse aplicar o mesmo efeito usando apenas HTML e CSS? A boa notícia é que você pode!
CSS introduziu propriedades como background-clip e mask-image, que você pode usar para criar efeitos similares aos que você está criando no Photoshop. Além disso, você também pode usar o SVG para recortar uma imagem com texto.
Hoje, vamos dar uma olhada nas opções e até mesmo lançar algumas animações simples. Se você gostaria de seguir junto com o código, você pode baixe os arquivos aqui.
Previsivelmente, algumas das propriedades que usaremos não são universalmente suportadas, o que significa que elas falharão em navegadores como o IE e o Firefox. A boa notícia é que essas propriedades falharão silenciosamente, o que significa que essas técnicas são um aprimoramento progressivo e podem ser usadas em sites.
A primeira opção que veremos é a propriedade do clipe de fundo . Esta propriedade irá definir se o plano de fundo será estendido para a borda ou não. Permite que o texto de um elemento definido para recortar uma imagem.
Nossa marcação é simplesmente uma h1 com a classe bgClip:
Clip Text
Agora, vamos adicionar a mágica ao CSS…
Nós vamos adicionar textura ao nosso texto com uma imagem do céu noturno. Também vamos garantir que o texto seja renderizado suavemente usando suavização de fonte. Observe que, para que isso funcione, a cor do texto deve ser transparente. Por isso, também usaremos text-fill-color: transparent.
.bgClip {background:url('../images/clouds.jpg');background-repeat:repeat-x;background-position:0 0;font-size:200px;text-transform:uppercase;text-align:center;font-family:'Luckiest Guy';color:transparent;-webkit-font-smoothing:antialiased;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0;Agora só queremos adicionar um pouco de animação para tornar o plano de fundo mais atraente:
-webkit-animation:BackgroundAnimated 15s linear infinite;-moz-animation:BackgroundAnimated 15s linear infinite;-ms-animation:BackgroundAnimated 15s linear infinite;-o-animation:BackgroundAnimated 15s linear infinite;animation:BackgroundAnimated 15s linear infinite;}@keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-webkit-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-ms-keyframes BackgroundAnimated {< from {background-position:0 0}to {background-position:100% 0}}@-moz-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}Aqui está o resultado:
A última técnica que vamos ver é texturizar texto com imagem de máscara. A funcionalidade básica dessa propriedade é que ela cortará a área do texto que é visível com base na opacidade.
Tudo o que precisamos é de um elemento h1 envolto em um div:
Mask Text
Para mascarar a imagem com o texto, usaremos o -webkit-mask-image para especificar a imagem e também adicionaremos uma boa sombra de texto. Finalmente, eu quero assentar alguns efeitos suaves para revelar todo o texto no mouse (só porque nós podemos):
#maskText h1 {font-size: 200px;font-family: 'Lilita One', sans-serif;color: #ffe400;text-shadow: 7px 7px 0px #34495e;text-transform: uppercase;text-align: center;margin: 0;display: block;-webkit-mask-image: url('../images/texture.png');-webkit-transition:all 2s ease;-moz-transition:all 2s ease;-o-transition:all 2s ease;transition:all 2s ease;}#maskText h1:hover{-webkit-mask-image: url('../images/texture-hover.png');cursor: pointer;color: #ffe400;}Aqui está o resultado: