Añade sombra a los títulos de tus posts y harás furor entre los bloggers

6.7.16

sombra texto titulo

Ya sabes cómo personalizar las tipografías y los colores de los textos de tu blog, pero si aún te parecen aburridos tienes que probar de combinar sombras y colores alrededor del título o de cualquier texto, triunfarás!

A pesar de haber personalizado mucho los textos en tu blog, hay una característica que hasta ahora no habías descubierto y que seguro que te gusta.

A los textos también se les pueden añadir sombra. Y no sólo sombras aburridas y simples.....

Cómo poner sombras al título del post

Si quieres que todos los títulos de tus posts tengan una sombra concreta (puede ser de lo más simple o de lo más extravagante) tienes que añadir el código CSS (que hay más adelante) en:
  1. Entra en Plantilla del menú lateral izquierdo.

    poner sombra texto
  2. Pincha en Personalizar

    personalizar texto blog
  3. Añade el código CSS (que verás más adelante) en el recuadro blanco de Avanzado --> Añadir CSS

Ejemplos de texto con sombra

Aquí verás unos cuantos ejemplos de la sombra personalizada que le puedes poner a un texto y alucinarás de la cantidad de combinaciones que se pueden hacer.

Primero de todo te voy a explicar la estructura de la sombra, para que más adelante puedas personalizar a tu  gusto las sombras que verás. 


    text-shadow: 5px 5px 1px #ffff00;



Donde vemos tres valores con píxeles y un color al final:
  • primer valor pixel --> la posición horizontal de la sombra.
  • segundo valor pixel --> la posición vertical de la sombra.
  • tercero valor pixel --> es el difuminado de la sombra
  • color --> es el color en HEX (o en rgb, como lo prefieras) de la sombra

Ahora que ya tienes claro qué es cada valor, ya puedes ver los ejemplos de código CSS que tendrás que añadir a tu blog. Recuerda que esto es para poner sombra en el título de los posts.

Ej 1. Este es la sombra más básica que puedes poner, sin difuminado.

sombra css codigo



    .post-title {
        text-shadow: 5px 5px #e3e3e3; 
     }



Ej 2. Aquí hay dos sombras difuminadas.


codigo css texto sombra



    .post-title {
        text-shadow: 5px 15px 5px #e3e3e3,
                    -5px 15px 5px #e3e3e3; 
     }




Ej 3. Una sola sombra difuminada.


sombra difuminada css



    .post-title {
        text-shadow: 5px 5px  3px #e3e3e3; 
     }




Ej 4.  Sombra con el color verde  y difuminada (puedes utilizar el que tu quieras).


sombra texto color



    .post-title {
        text-shadow: 5px 5px  3px #94edcb; 
     }




Ej 5. Doble sombra, una de las cuales es blanca.

doble sombra css


    .post-title {
        text-shadow: 3px 2px #ffffff,
                     8px 7px #e2e2e2; 
     }



Ej 6. Dos sombras verticales difuminadas.



sombra vertical texto css



    .post-title {
        text-shadow: 0px 3px 5px #e0e0e0,
                     0px 18px 2px #e0e0e0; 
     }



Ej 7. Tres sombras de colores "en escalera".

codigo css texto sombra




    .post-title {
        text-shadow: -10px 10px #0000ff,
                     -20px 20px #6666ff,
                     -30px 30px #ccccff; 
     }



Ej 8. Doble sombra con difuminado y color.

codigo color sombra texto





    .post-title {
        text-shadow: 5px 15px 5px #ffff00,
                     -5px 15px 5px #00ff00
     }




Ej 9. Además si quieres también puedes modificar el color del texto del título y hacer creaciones más coloridas.


titulo sombra color





    .post-title {
        text-shadow: 5px 15px 5px #c7bee1,
                     -5px 15px 5px #c7bee1;
     }




Cómo añadir sombra a un texto cualquiera dentro de un post

También puede ser que quieras destacar un trozo de texto dentro de un post.

  1. Entra en la versión HTML del post (arriba a la derecha, mientras editas el post.)
  2. Busca el trozo de texto al que quieras añadir sombra.
  3. Antes del texto pon esto:



        <div style="AQUI LA SOMBRA QUE TU QUIERAS">



    Para que lo veas claro, aquí tienes el código con el ejemplo 9 (sólo tienes que copiar text-shadow:......)


        <div style="text-shadow:5px 15px 5px #c7bee1, 
                               -5px 15px 5px #c7bee1; ">


  4. Y después simplemente esto


        </div>


Así ya tendrás un trozo cualquiera de texto o título dentro de un post, con una sorprendente sombra.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.





Espero que te haya gustado la personalización de las sombras.

¿Conocías antes este afecto? ¿Lo habías utilizado nunca? ¿En qué casos lo vas a utilizar? Nos leemos en los comentarios.
Laura


¿Te ha servido lo que has leído?

Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)


¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.