sábado, 27 de julio de 2013

Como Añadir Relieve A Texto Con Css3 En Tu Blog De Blogger

By andante77 11:49 a.m. blogger, css3, diseno, efecto relieve, HTML, Texto relieve, trucos, tutoriales 1 comment

En este tutorial te estare mostrando como hacer Texto Relieve sobre una superficie de fondo,este efecto se logra utilizando Css3.Este ayudara en crear un logo para el diseño de tu blog sin necesidad de utilizar imagnes.En terminos generales se utiliza 'puro CSS3' lo que significa que no utilizaremos Photoshop o otra herramienta de editar imagenes para crear este efecto. Vamos a usar texto sombreado con la propiedad de CSSpara crear este efecto relieve.Este ademas es compatible con navegadores como Firefox, Chrome, Safari y Opera pero no con el Internet Explorer.

Comenzemos.
Paso 1:

Para comenzar, necesitamos un fondo en donde daremos relieve al texto. Aqui el codigo de CSS para el fondoPuedes cambiar el Fondo con cualquier color que desees. Si vas a aplicar este efecto relieve en un fondo ya preestablecido no necesitas este codigo.

#TBI-Emboss-Background {
background: #5444E4;
}

Paso 2:

El proximo paso sera crear un codigo de CSS para aplicar el efecto relieve. Aqui usaremos 2 sombras de texto diagona lcon alguna opacidad.Aqui el CSS.

#TBI-Emboss {
text-align: center;
text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8);
color: #2C1DB0;
opacity: 0.4;
font: 700 80px 'Bitter';
margin: 0 0 15px;
}

La Primera Sombra de texto es para resaltar donde la segunda es la sombra.En este paso debes estar seguro que color del texto compara con el color de fondo o un poquito mas claro que el color de fondo o no se mostrara el efecto perfectamente.

Paso 3:
Ahora que tenemos el codigo de CSS listo, podemos poner algun texto en este. Utilice el siguiente codigo.

<div id="TBI-Emboss-Background">
<div id="TBI-Emboss">
Ciudadblogger</div>
</div>

Reemplace Ciudadblogger con tu Texto. Para este tutorial hemos utilizado letra de Google 'Bitter'.
Eso es todo. Exitosamente has anadido un texto moldeado sin la necesidad de programa de ediccion. Asi es como luce.

CiudadBlogger

Como Usar este Efecto en Blogger?

1.Entra cuenta de Blogger.com -> Plantilla -> Editar HTML
2. Busca la etiqueta ]]></b:skin> (Tip: Utiliza Ctrl + F para buscarla)
3. Antes de etiqueta ]]></b:skin> pegue el siguiente codigo y Guarda Plantilla.

#TBI-Emboss {
text-align: center;
text-shadow: -2px -2px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8);
color: #2C1DB0;
opacity: 0.4;
font: 700 80px 'Bitter';
margin: 0 0 15px;
}#TBI-Emboss-Background {
background: #5444E4;
}

Como Utilizar El Texto Moldeado En Un Articulo
Uando la pestaña de Html en la entrada encierra tu texto en el siguiente codigo: