CSS: Textos con color degradado
02/02/2018 by Casanova

Front.id

Hoy vamos a abordar que hacer cuando necesitamos que nuestro texto tenga un color degradado.

dg text

Como suele suceder, tenemos más de una manera de lograrlo, en este caso vamos a desarrollar dos formas, que podemos usar según nuestras necesidades.

En el primer caso, cuando es un degradado de solo dos colores y uno de los colores es igual al color de fondo donde esta ubicado el texto:

dg two colors

Solo necesitamos una imagen que sea un degradado con transparencia y tenga el mismo color que el fondo donde esta ubicado el texto (blanco en este caso), como en este ejemplo (el fondo rojo solo es para que se pueda apreciar el degradado):

Dg text bg

Contando con esto, solo faltarían unas pocas lineas de CSS para colocar la imagen sobre el texto, repetirla horizontalmente si hace falta, y darle al texto el otro color que nos antoje. En esta oportunidad utilizamos un :before para colocar la imagen por encima del texto. 

<h2>Lorem ipsum</h2>
h2 {
    position: relative;
    color: black;
}

h2:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url("gradient-white.png") repeat-x;
    position: absolute;
    top: 0;
    left: 0;
}

Con esto podemos jugar de diversas formas.

dg 02 bg

 


 

El otro caso es cuando necesitamos que el degradado sea de múltiples colores .

dg text multiple

Primero veamos el código y luego entramos en la explicación.

<h2>Lorem ipsum</h2>
h2 {
    display: inline-block;
    color: #000;
    background: #fff;
    mix-blend-mode: multiply;
}

h2:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, red, yellow);
    mix-blend-mode: screen; //<-- atento a esta linea//
    position: absolute;
    top: 0;
    left: 0;
}

** Cabe aclarar que este método es compatible con Chrome y Firefox, pero solo compatible con algunas versiones del resto de navegadores.

Como en el caso anterior posicionamos un fondo de color degradado sobre el texto pero aquí ya entra en juego: mix-blend-mode, que es una propiedad que define cómo el contenido de un elemento debe mezclarse con su fondo.

Ya solo queda jugar con ello.

dg bg sample

 

Attachments
Attachment Size
gradient-white.png 145 bytes
pattern-zebra.png 12.95 KB
Tags

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.