Web X.1

Para todos aquellos más o menos avezados en el mundillo del diseño web, entenderán lo ‘sencillo’ que puede llegar a resultar el realizar un borde en un texto con imágenes, eso sí, siempre vía la utilización de herramientas, tales como Photoshop, fireworks, etc.

Pero y si os preguntase, ¿Cómo hacerlo vía CSS?. Entendemos que la cosa cambia un poco.

Por ello os presentamos una nueva característica de CSS3, text-stroke, (aunque todavía no es parte de él) es la inclusión de borde en el texto, de una forma muy sencilla, tal y como nos tiene acostumbrados CSS3. Pero hay que destacar que por ahora funciona únicamente en navegadores basados en WebKit (Safari, Chrome, iPhone). Por ejemplo, si aplicamos texto con un color blanco,en Firefox simplemente aparecerá una página en blanco, ya que no existe borde, porque no reconoce esta propiedad. Puedes usar Javascript para que detecte el borde, o asegurarte de que el color del texto no coincide con el del fondo. Un ejemplo sería este:

h1 {  

-webkit-text-stroke: 3px black;  

color: white;  

}  

Aplicar estilos según el navegador

Así podremos detectar si el navegador soporta esta propiedad, y si no, cambiamos el color del texto de blanco a a negro:

var h1 = document.createElement('h1');   

if ( !( 'webkitTextStroke' in h1.style ) ) {  

  var heading = document.getElementsByTagName('h1')[0];  

  heading.style.color = 'black';  

}  

Ejemplo de su funcionamiento, con el típico: "Hola Mundo":

Cabe destacar que podemos hacer un efecto similar con la propiedad text-shadow.