Como ya todos sabemos lo fácil que es realizar un texto con bordes ya sea con los programas de edición y diseño de imágenes, pues esta vez vamos a cambiar la forma y vamos a realizarlo pero utilizando CSS 3.
Vamos a utilizar la nueva característica de CSS 3: 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).
Vamos a mirar un ejemplo utilizando text-stroke:
Entonces el código CSS3 sería:
Luego de incorporar el código CSS3 para utilizar simplemente añade un h1 en tu página web o blog:
Detectar el navegador
Para detectar si el navegador soporta esta propiedad, y si no, cambiamos el color del texto de blanco a a negro utilizando Javascript:
Para más opciones avanzadas de personalización, puedes ver Modernizr.
Vamos a utilizar la nueva característica de CSS 3: 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).
Vamos a mirar un ejemplo utilizando text-stroke:
onsoni.blogspot.com
[ h1 { -webkit-text-stroke: 2px Darkgoldenrod; color: white; font-size: 50px; font-family: helvetica, arial; }]
Luego de incorporar el código CSS3 para utilizar simplemente añade un h1 en tu página web o blog:
[<h1>Ejemplo</h1>]
Detectar el navegador
Para detectar si el navegador soporta esta propiedad, y si no, cambiamos el color del texto de blanco a a negro utilizando Javascript:
[<script> var h1 = document.createElement('h1'); if ( !( 'webkitTextStroke' in h1.style ) ) { var heading = document.getElementsByTagName('h1')[0]; heading.style.color = 'black'; } </script>]
Para más opciones avanzadas de personalización, puedes ver Modernizr.
