Crear tipografia insertada en un recuadro con CSS3

5/13/2010 07:59:00 p.m. | Publicadas por nenesio | Editar entrada

Con el uso de CSS3 ya no es necesario usar programas como Photoshop para crear vistosas tipografías por ejemplo en títulos en el uso de H1, H2, etc...

Las nuevas propiedades de CSS3 da toda creativamente nuevas formas de estilo de nuestros sitios sin tener que recurrir a las imágenes, javascript o flash, En este caso vamos a utilizar la propiedad text-shadow que es actualmente soportado por Firefox, Opera y Safari para crear el aspecto del texto insertado, creando un recuadro con texto que el texto sea relegado a segundo plano, casi como un efecto de relieve inverso.

A continuación, vamos a utilizar gradientes de CSS3, si nunca has usado las extensiones del navegador necesarias para CSS3, crearemos un fondo gradiente del top hacia abajo desde #003471 al #448CCB:


#gradientes {
 width: 550px;
 height: 100px;
 background: -moz-linear-gradient(-90deg, #003471, #448CCB);
 background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}

Ahora añadimos la tipografia, colocamos el font-size a 30px y el color de la fuente en #0D4383:

<br />h1.tipografia {<br />  font-family: Rockwell, Georgia, "Times New Roman", Times, serif;<br />  font-size: 50px;<br />  color: #0D4383;<br />}<br />

y usamos para llamar la clase el siguiente código HTML:

<br /><div id="gradientes"><br />	<h1 class="tipografia">Blogger Recursos</h1><br /></div><br />

Obtendríamos el siguiente resultado

Si no estas enterado de las extensiones del navegador, estos son los estilos CSS con un prefijo de proveedor específico, aun CSS3 no es totalmente compatible con todos los navegadores (IE por supuesto), sin embargo, debemos utilizar estas extensiones:

Mozilla/Firefox/Gecko:-moz-

Webkit(Safari/Chrome):-webkit-(Nota: Algunas webkit prefijos sólo podrían funcionan en Safari y no Chrome)

Como han observado el codigo usado, debemos utilizar las extensiones con cada prefijo para lograr la compatibilidad del CSS3 en Firefox, Safari y Chrome.