6

Eu vi esse modelo de texto e achei bem legal, ai tentei replicar e não deu muito certo... Na verdade eu até consegui colocar um gradiente que me agrada dentro do texto, mas não consegui fazer esse efeito de sombreamento colorida no fundo.

inserir a descrição da imagem aqui

Eu tentei usar text-shadow: 0 0 40px red; no texto, mas quando faço isso o shadow fica por cima do texto! Além disso ele fica de uma cor só. Repare que na imagem de referência essa sombra é multi-colorida.

Como posso contornar esse problema e conseguir uma sombra multicolorida como a da imagem? Como consigo esse gradiente no fundo do texto?

Segue o código com o que eu tenho até o momento.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgb(31, 32, 34);
}

h1 {
  font-family: sans-serif;
  text-align: center;
  font-size: 20vw;
  width: 100%;
  margin: auto;
  position: relative;
  z-index: 2;
}
span {
  color: transparent;
  background-image: radial-gradient(#0ff 0%, #0f0 25%, #ff0 50%, #f0f, #00f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 115% 80%;
  background-position: top left;
}
span.x {
  text-shadow: 0 0 40px red;
}
<h1><span>2018</span></h1>
<h1><span class="x">2018</span></h1>

9
  • Boa hugo, também tenho essa dúvida! Commented 25/01/2019 às 12:32
  • 1
    @AndréFilipe quando a gente bate o olho parece simples, mas na hora de fazer nada da certo rss, a sombra parece que fica pra dentro do texto e não para fora, além disso diferente do box-shadow o text-shadow só da para colocar uma cor... Tem que ser criativo e ter alguma técnica para responder essa...
    – hugocsl
    Commented 25/01/2019 às 12:40
  • Na imagem que você colocou parece que o texto tem o background transparente e o wrap que tem o background com imagem ou com o gradiente, não? Commented 25/01/2019 às 13:02
  • @LaércioLopes talvez seja isso... Mas repare que mesmo se for isso essa sombra parece seguir o contorno do texto, não é uma sombra "quadrada" por traz do texto, ela parece acompanhar o formato do texto. Se for algum outro efeito no background acho válido tb, desde que se aproxime do modelo, com a sombra colorida em consonância com o texto.
    – hugocsl
    Commented 25/01/2019 às 13:10
  • 1
    @LaércioLopes consegui fazer um modelo usando filter:blur, se te interessar deixei os detalhes na resposta!
    – hugocsl
    Commented 25/01/2019 às 16:42

2 Respostas 2

3

Eu busquei reproduzir com o uso de filters também aplicando diretamente no na classe do elemento, desta forma o gradient é criado a partir do próprio texto, acredito que seja uma abordagem útil também.

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: rgb(31, 32, 34);
}

h1 {
  font-family: sans-serif;
  text-align: center;
  font-size: 20vw;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  color: transparent;
  background-image: radial-gradient(#0ff 0%, #0f0 25%, #ff0 50%, #f0f, #00f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 115% 80%;
  -webkit-text-stroke: 4px transparent;  
}

.x {
 filter: blur(40px);
 position: relative;
 top: -150px;
}
<h1><span>2018</span></h1>
<h1><span class="x">2018</span></h1>

4
  • Sua abordagem também ficou legal. Um detalhe que eu reparei é que quando vc tenta selecionar o número a seleção do mouse também fica com Blur, nem sabia que isso poderia acontecer rss prntscr.com/mc58tb olha como o azul da seleção fica com o blur tb
    – hugocsl
    Commented 25/01/2019 às 16:55
  • @hugocsl Sim cara, contudo confesso que não sei explicar como isso ocorreu mas realmente é um efeito bem interessante. Commented 25/01/2019 às 16:58
  • Como concertar vou deixar por sua conta, mas o que está acontecendo é que o texto com blur está por cima do texto sem blur ;) ai a seleção e no texto desfocado... o ideal é que o texto com blur venha por baixo do texto sem blur
    – hugocsl
    Commented 25/01/2019 às 17:01
  • 1
    @hugocsl Isso mesmo, legal cara! Valeu pela dica, quero tentar reproduzir essa situação com SVG também e disponibilizar no codepen, acredito que vai contribuir para futuras dúvidas. Commented 25/01/2019 às 17:12
3

Cheguei a um resultado satisfatório usando um pseudo-elementos e filter:blur

No ::after eu coloquei o mesmo estilo do texto e coloquei um filter:blur para fazer o texto "esfumaçar". Então a sombra colorida no fundo é o próprio texto só que com um desfoque bem grande, dando essa impressão que ele virou uma sombra colorida no fundo.

No ::before eu tirei esse blur, e com um text-shadow eu fiz o sombreamento simples do texto.

Esse foi o resultado

inserir a descrição da imagem aqui

Segue código referente a imagem acima.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgb(29, 30, 31);
}

.x {
  font-family: sans-serif;
  text-align: center;
  font-size: 20vw;
  width: 100%;
  margin: auto;
  position: relative;
  z-index: 2;
}
.x::after,
.x::before {
  content: attr(data-text);
  color: transparent;
  background-image: radial-gradient(#0ff 0%, #0f0 25%, #ff0 50%, #f0f, #00f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 115% 80%;
  background-position: top left;
  width: 100%;
  margin: auto;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  filter: blur(0.12em) opacity(0.75);
}
.x::before {
  color: black;
  text-shadow: 0 .035em .035em rgba(0, 0, 0, 0.75);
  filter: none;
}
.x span {
  color: transparent;
  background-image: radial-gradient(#0ff 0%, #0f0 25%, #ff0 50%, #f0f, #00f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 115% 80%;
  background-position: top left;
}
<h1 class="x" data-text="2018"><span>2018</span></h1>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .