Um efeito muito usado em programas de edição de imagem e vetorização é adicionar imagem dentro de textos ou objetos. Hoje vamos mostrar como fazer esse efeito para web usando apenas CSS.
O CSS foi evoluindo muito nos últimos anos, e foram acrescentadas muitas propriedades que ajudam muito no desenvolvimento e no design dos elementos de um site, porém algumas são pouco conhecidas, nosso trabalho aqui é apresentar algumas dessas propriedades.
Nesse artigo vamos falar do background-clip. A propriedade CSS define se o fundo de um elemento se estende abaixo de sua caixa de borda, caixa de preenchimento ou caixa de conteúdo. Neste artigo vamos usar ele para adicionar um fundo dentro de um texto.
Veja em vídeo como fazer:
Agora vamos fazer o passo a passo de como fazer, primeiro vamos criar o texto que queremos adicionar o fundo, o primeiro vamos fazer com um gradiente.
Agora vamos estilizar nosso texto com CSS.
Nosso efeito está criado, para adicionar uma imagem de fundo é o mesmo passo, basta alterar o background-image e adicionar uma imagem de fundo assim como no exemplo abaixo:
Veja como ficou nosso exemplo criado:
See the Pen CSS Gradient Text by Cupcom Codes (@cupcomcodes) on CodePen.
O legal é que você pode adicionar efeitos de transição e animações com css em seu fundo, basta usar a ciratividade.
Espero ter ajudado 🙂
As criptomoedas revolucionaram o mundo das finanças, proporcionando uma forma digital de realizar transações e…
Ao criar um site WordPress, uma das decisões mais importantes que você precisa tomar é…
Quando se trata de criar um site de sucesso no WordPress, otimizar o desempenho é…
If you're attending WordCamp US 2024 in person or online, I have great news! In…
Quando se trabalha como freelancer e lida com código o dia todo, é comum precisar…
A importância de se manter atualizado é essencial em todas as áreas de atuação. Profissionais…