» » » » Texto con sombra shadow

Texto con sombra shadow

Ejemplos de texto con sombra que podemos añadir en nuestro blog.

Lo añadimos donde deseamos mostrar el efecto (entrada o gadget).

Para incluirla en el blog ir a:

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

En el recuadro pegar el código elegido.



#shadow1 {
color: #DA1B62;
font-family: 'Leckerli One',cursive;
font-size: 95px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 4px 4px 0 rgba(255, 255, 255, 0.8), 10px 10px 0 rgba(187, 187, 187, 0.5);
}
#shadow2 {
color: #FE6602;
font-family: 'Aclonica',serif;
font-size: 95px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #000000, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #FFFFFF, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px #001135;
letter-spacing: 1px;
}


#shadow3 {color: white;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0.1em 0.1em 0.2em black;
}
#shadow4 {
color: #44CCF6;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#shadow5 {
color: rgba(0, 174, 239, 0.2);
font-size: 95px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 5px 2px rgba(0, 0, 30, 0.08);
}
#shadow6 {
color: #FFFFFF;
font-size: 105px;
font-weight: bold;
font-family: "League-Gothic",Courier;
text-transform: uppercase;
text-shadow: 0 0 20px #FEFCC9, 10px -10px 30px #FEEC85, -20px -20px 40px #FFAE34, 20px -40px 50px #EC760C, -20px -10px 60px #CD4606, 0 -10px 70px #973716, 10px -20px 80px #451B0E;
}
#shadow7 {
color: #006666;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.5);
}
#shadow8 {
color: #fff;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
#shadow9 {
color: #F9BAD4;
font-size: 105px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 2px 0 #F48CB7, 0 4px 0 #FBDAE8, 0 6px 0 #F48CB7, 0 8px 0 #F48CB7, 3px 8px 15px #FBDAE8, 3px 8px 5px #F48CB7;
}
#shadow10 {
color: #C10230;
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 10px 21px 11px #000000;
}



  • Para incluirla el un texto el la entrada por ejemplo:


Texto
<div id="shadow1">
texto con shadow
</div>
texto


  • font-family: hay que agregar la fuente en la plantilla  ir a Google Fonts para elegirla.


  • Para usar estas sombras en el título de tu blog, únicamente cambia la clase del texto, por ejemplo, en lugar de #shadow1 { pones .header h1 {

  • En los títulos de tus entradas, cambia #shadow1 { por .post h3 {

  • En los títulos de tus gadgets, cambia #shadow1 { por .sidebar h2 {





Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top