Ponle contorno a tus títulos con CSS3

Desde que apareció CSS3 son muchas las posibilidades que se han abierto y que son de uso cotidiano hoy en dia en la mayoria de webs. Los nuevos navegadores a pesar de algunas diferencias, estan cada vez mas alineados y mantienen muchas de las normas estandarizadas en este sentido.

Hoy, despues de mucho tiempo y aunque no por falta de ganas ni de material, mas bien de tiempo y manos para ello, os dejamos este pequeno truco que hará de vuestros títulos en web mucho mas atractivos.

Tener una letra Arial o Helvetica puede parecer un poco fuera de lineas actuales pero a lo mejor dándole un toque artítico puedes tener un efecto en el lector bastante mas impactante. Para ello solo deberás añadir un clase a tu título (h1….h6) por ejemplo para tener un contorno de lo mas actual en tus títulos. En este caso aparece un contorno de color azul (#057AC6 )

Primero haremos lo siguiente en nuestro título (recuera h1, h2… h6):

<h1 class="contornotexto">Este es el titular"</h1>

Y en el fichero de CSS (style.css para wordpress ) añadimos lo siguiente:

.contornotexto{
text-shadow: 
2px 0 0 #057AC6, 
-2px 0 0 #057AC6, 
0 2px 0 #057AC6, 
0 -2px 0 #057AC6, 
1px 1px #057AC6, 
-1px -1px 0 #057AC6, 
1px -1px 0 #057AC6, 
-1px 1px 0 #057AC6;
}

El resultado del antes y después lo podeis ver aquí:

¿Rápido verdad? Si además éste lo combinas con los “stylos” clásicos y otros atributos, puedes llegar a tener unos titulares realmente espectaculares sin necesitadad de tirar de photoshop u otros programas …. y con la ventaja de que es 100% amigoseo (SEO friendly)

Como siempre un placer poder aportar un granito mas…