Programación Multimedia

Buscando la forma de crear un borde para algún titular de esta web, sin tener que hacerlo vía imagen/Photoshop, me encontré con un truco que a algún diseñador le puede interesar bastante. Se trata de añadir el borde a una tipografía mediante CSS.
Aunque en la especificación de CSS3 existe una propiedad para esta finalidad, text-outline, ésta todavía no es soportada en la mayoría de los navegadores.

Creando los estilos CSS

El truco está en utilizar la propiedad text-shadow varias veces, cambiando los valores de posición de la sombra en horizontal-vertical en -1px y 1px con todas las posibles combinaciones, y el valor blur a 0. En la práctica esto es así:

.borde {
    color: #000;

    text-shadow:
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
   -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

Esta clase CSS nos añade un borde blanco de 1px a la tipografía de un texto de color negro. Por desgracia si aumentamos el tamaño del borde creado a 2px o valores superiores, los resultados no son los esperados.

Conclusión

Este Tip no soluciona del todo el asunto de crear bordes mediante CSS por su limitación. Esperemos que la propiedad text-outline esté pronto disponible.

★ Por Raúl Flores (11 entradas) el 26 septiembre, 2012 ★

Fatal error: Uncaught Error: Call to undefined function wp_related_posts() in /usr/home/programacionmultimedia.net/web/wp-content/themes/echo/single.php:37 Stack trace: #0 /usr/home/programacionmultimedia.net/web/wp-includes/template-loader.php(74): include() #1 /usr/home/programacionmultimedia.net/web/wp-blog-header.php(19): require_once('/usr/home/progr...') #2 /usr/home/programacionmultimedia.net/web/index.php(17): require('/usr/home/progr...') #3 {main} thrown in /usr/home/programacionmultimedia.net/web/wp-content/themes/echo/single.php on line 37