Lo Último

Sombreado de textos




Sombreado de textos para quien quiera dar un toque de distinción a una palabra o una frase determinada, normalmente se utiliza para un título o una frase que queramos destacar, pero también puede utilizarse en un gadget.

En Blogger In te enseñamos cómo se le da a cierto texto un sombreado especial.

Lo primero es ir a tu plantilla, procedemos de la siguiente forma:


Ve a tu "Escritorio Blogger"
Pulsa en tu "Blog"
Pulsa en "Plantilla"
Pulsa en "Editar HTML"

Busca la siguiente etiqueta ]]></b:skin>
Antes de esa etiqueta pega los código CSS de los siguientes 12 ejemplos que te ofrecemos:

/----------------------------------------------------------------------------------------------------------\
.sombra1 {
color: #F3E2A9;
text-shadow: 0px -1px 0px #424242;
font-size: 40px;
font-family: 'Unna', serif;
}

.sombra2 {
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
font-size: 40px;
font-weight: bold;
font-family: 'Arial Black';
}

.sombra3 {
color: #b82f14;
text-shadow: 6px 6px 0px rgba(83,155,194,0.5);
font-size: 40px;
font-family: 'Sancreek', cursive;
}

.sombra4 {
color: #69D2E7;
text-shadow:
4px 4px 0px #E0E4CC,
9px 8px 0px #F38630;
font-size: 40px;
font-family: 'Lobster', cursive;
}

.sombra5 {
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);
color: #fff;
font-size: 40px;
font-family: Impact;
}

.sombra6 {
color: #DF01A5;
text-shadow: 0px 0px 8px #FE2EF7;
font-size: 40px;
font-family: 'Orbitron', sans-serif;
}

.sombra7 {
padding-left: 20px;
text-transform: uppercase;
color: #E8E3AE;
text-shadow:
-10px 10px 0px #A9CBA6,
-20px 20px 0px #7EBEA3,
-30px 30px 0px #53A08E;
font-size: 40px;
font-family: 'Luckiest Guy', cursive;
}

.sombra8 {
color: #fff;
text-shadow:
-2px -2px 0 #000, 
1px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
font-size: 40px;
font-family: 'Boogaloo', cursive;
}

.sombra9 {
text-shadow:
9px 2px 0 rgba(0, 255, 255, 0.5),
-6px -1px 1px rgba(255, 0, 0, 0.4);
color: #2A0A12;
font-size: 40px;
font-family: 'Special Elite', cursive;
}

.sombra10 {
color: #DF0101;
margin: 10px;
padding: 40px 0 10px;
text-align: center;
text-shadow:
0 0 4px #fff,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
font-size: 40px;
font-family: 'New Rocker', cursive;
}

.sombra11 {
color: transparent;
text-shadow: #81DAF5 0 0 12px;
text-transform: uppercase;
font-size: 40px;
font-family: 'Chango', cursive;
}

.sombra12 {
color: #fcc90f;
text-shadow:
-2px -2px 0 #29296e, 
1px -2px 0 #29296e,
-2px 2px 0 #29296e,
2px 2px 0 #29296e,
1px 1px #e60602,
2px 2px #e60602,
3px 3px #29296e,
4px 4px #29296e,
5px 5px #29296e,
6px 6px #29296e,
7px 7px #29296e,
8px 8px #29296e,
9px 9px #29296e,
10px 10px #29296e,
11px 11px #29296e,
12px 12px #29296e,
13px 13px #29296e,
14px 14px #29296e,
15px 15px #29296e,
16px 16px #29296e,
17px 17px #29296e,
18px 18px #29296e,
19px 19px #29296e,
20px 20px #29296e;
font-size: 40px;
font-family: 'Henny Penny', cursive;
}
\----------------------------------------------------------------------------------------------------------/

En rojo he marcado los colores y tamaño de letra que puedes cambiar a tu gusto, una vez que los tengas configurados, pulsa en "Guardar plantilla"

Ahora ya puedes insertar en tus entradas o en tus gadgets los sombreados que has introducido en tu plantilla. Para ello en el lugar donde va a ir el texto sombreado pones el siguiente código dependiendo del sombreado que hayas elegido para tu texto. Los códigos de cada uno de ellos son los siguientes:

<span class='sombra1'>MI TEXTO</span>
MI TEXTO

<span class='sombra2'>MI TEXTO</span>
MI TEXTO

<span class='sombra3'>MI TEXTO</span>
MI TEXTO

<span class='sombra4'>MI TEXTO</span>
MI TEXTO

<span class='sombra5'>MI TEXTO</span>
MI TEXTO

<span class='sombra6'>MI TEXTO</span>
MI TEXTO

<span class='sombra7'>MI TEXTO</span>
MI TEXTO

<span class='sombra8'>MI TEXTO</span>
MI TEXTO

<span class='sombra9'>MI TEXTO</span>
MI TEXTO

<span class='sombra10'>MI TEXTO</span>
MI TEXTO

<span class='sombra11'>MI TEXTO</span>
MI TEXTO

<span class='sombra12'>MI TEXTO</span>
MI TEXTO



Si necesitas los códigos de colores visita ésta entrada.


Recuerda que no verás el resultado hasta que guardes el trabajo de la entrada y pulses en Vista Previa o en Publicar. Para ver el resultado y saber como queda antes de publicar pulsa en Vista previa, en la lista de entradas de tu blog en blogger.

Queda genial a que si? para cambiar el tamaño del texto y el color debes ir a tu plantilla y cambiarlos donde has pegado el código antes de la etiqueta ]]></b:skin>.




Para estar actualizado en las novedades de Blogger In puedes seguir el blog, para ello ve al gadget en la columna lateral de este blog y pulsa en "Participar en éste sitio" y sigue el asistente hasta el final y comprueba que apareces en el gadget. Feliz semana amigos!!