Efectos de texto con CSS en WordPress

por | 17 Feb, 2017 | css, Divi, Tutoriales, Wordpress

5 efectos para modulos de texto en Divi

En un post anterior ya vimos cómo aplicar algunos efectos de texto  con la propiedad CSS text-shadow. Durante este tiempo he estado trasteando y buscando por la web algunos efectos para incorporar a un nuevo post. Verás que combinando y modificando valores podemos conseguir efectos muy interesantes sólo con código CSS.

Para facilitarte las cosas, aquí puedes ver una imagen que resume los parámetros de la propiedad text shadow.

text-shadow-infografia. 5 efectos para modulos de texto en Divi

Si te perdiste el primer post sobre efectos de texto, puedes pulsar AQUÍ para navegar hasta él.

Insertando el CSS

En esta ocasión la implementación será aun más sencilla que en el artículo anterior. Aplicaremos el CSS directamente en la pestaña CSS personalizado de los ajustes del módulo de texto.

ajustes-generales-modulo-texto-2

De forma que para aplicarlos abre los ajustes del módulo de texto pulsando en la zona que ves en la imagen a la izquierda. Una vez dentro de la configuración del módulo, en los ajustes generales sólo deberás poner el texto al que quieras crear el efecto.

En la pestaña Ajustes avanzados de diseño personalizaremos nuestro texto eligiendo la tipografía, tamaño, color, etc.

Y para añadir el efecto, tenemos que abrir la pestaña CSS Personalizado y en el campo Elemento principal pegamos el código necesario.

ajustes-texto-sombra

Los efectos

Y ahora que ya sabes donde tienes que poner el código, vamos a ver un ejemplo de cada efecto y justo debajo de cada uno debes abrir el panel para ver el código y algunos comentarios del código CSS.

Los efectos que vamos a ver hoy son:

  • Relieve clásico
  • Texto contorneado
  • Pseudo fuego
  • Difuminado
  • Texto 3D

 

EFECTO DE RELIEVE

Código del CSS y comentarios

Este es el clásico efecto de relieve que conseguimos contrastando blanco y negro sobre los bordes del texto.

Tipografía: Raleway, Tamaño texto: 82 px. (párrafo)

Este es el código que hemos insertado en el panel CSS personalizado:

text-shadow: 1px 1px white, -1px -1px #333; 

Como ves, hemos añadido un borde interior blanco desplazando la sombra hacia la derecha y hacia abajo 1 pixel. Seguidamente, un borde exterior gris oscuro (#333) desplazando ahora la sombra hacia la izquierda y hacia arriba (valores negativos).

TEXTO CONTORNEADO

Código del CSS y comentarios

Aquí hemos generado un contorno. Es importante que el color del texto y del fondo sea el mismo.

Tipografía: Arvo, Tamaño texto: 88 px. (párrafo)

Este es el código que hemos insertado en el panel CSS personalizado:

text-shadow: -1px 0 #090, 1px 0 #090, 0 1px #090, 0 -1px #090;
color: #dddddd;

Para conseguir este contorno desplazamos la sombra (verde aquí, #090) sólo a la izquierda y a la derecha, anulando el desplazamiento vertical (poniendolo a cero) y luego invertimos el proceso, desplazando sólo verticalmente. Prueba sustituyendo el valor cero por algón valor (por ejemplo, donde pone cero, pon 5px) y verás que variación más chula.

En la siguiente línea ponemos el color del texto al gris del fondo, aunque podríamos eliminar esta línea y hacerlo desde los ajustes avanzados de diseño.

¿EFECTO fuego?

Código del CSS y comentarios

Bueno, fuego, fuego igual es exagerado decir, pero tampoco queda mal, ¿No?.

Tipografía: Cherry cream Soda, Tamaño texto: 88 px. (párrafo), Color texto: #d84f00 (naranja)

Y aquí está el código que hemos insertado en el panel CSS personalizado:

text-shadow: 0 0 20px #fefcc9,
2px -2px 3px #feec85,
-4px -4px 5px #ffae34, 5px -10px 6px #ec760c,
-5px -12px 8px #cd4606, 0 -15px 20px #973716,
2px -15px 20px #451b0e;

Aquí hemos creado una sucesión de capas con distintos colores (del amarillo al naranja) y difuminados. Como siempre, haz variaciones y comprueba tus resultados.

Difuminado

Código del CSS y comentarios

Aquí tenemos un difuminado, variando los valores de desenfoque.

Tipografía: Dancing Script, Tamaño texto: 140px. (párrafo), Color texto: #ffffff (blanco)

Y aquí tienes el código que hemos añadido en el panel CSS personalizado para conseguir el efecto:

text-shadow: 0 0 10px #edf000,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #edf000,
0 0 70px #edf000,
0 0 80px #edf000,
0 0 100px #edf000,
0 0 150px #edf000;

Aquí hemos creado una sucesión de capas con distintos desenfoques (entre 20 y 150 px) desde el blanco (#fff) al amarillo (#edf000). No hay desplazamiento de la sombra. El fondo es negro para que resalte el efecto.

Efecto 3D

Código del CSS y comentarios

Y por fin, llegamos al último efecto, imitación 3D. Es similar al anterior, pero se ha añadido color con distintas transparencia en algunas capas.

Tipografía: Pacífico, Tamaño texto: 140px. (párrafo), Color texto: #ffffff (blanco)

Y aquí tienes el código que hemos añadido en el panel CSS personalizado para conseguir el efecto:

text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);

El fondo es azul claro (#add2d8 ) que va bien con el efecto. Ya sabes, experimenta y sácale todo el jugo que puedas, las combinaciones son infinitas.

Si te ha gustado, comparte, por favor.