• Ir al contenido principal
  • Ir al pie de página

Programación Multimedia

Diseño Gráfico y Desarrollo Web

  • Inicio
  • Qué hacemos
  • Portafolio
  • Blog
  • Contacto
Usted está aquí: Inicio / CSS / CSS3: Añadir borde a una tipografía

CSS3: Añadir borde a una tipografía

26 septiembre, 2012 Por Raúl Flores 3 comentarios

Detalles del tutorial

  • Tecnología: CSS3
  • Dificultad: Nivel básico
  • Tiempo de realización: ¿5 minutos?

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.

Archivado en:CSS Etiquetado con:css3, tip

En el blog

La Edad de Oro del software español

Esta vez quiero comentar la reciente publicación del volumen 2 del fabuloso libro Ocho Quilates. Una historia de la Edad … [Leer más...] acerca deLa Edad de Oro del software español

CSS3: Añadir borde a una tipografía

Buscando la forma de crear un borde para algún titular de esta web, sin tener que hacerlo vía imagen/Photoshop, me … [Leer más...] acerca deCSS3: Añadir borde a una tipografía

tutorial ios tabla personalizada

iOS: Crear vista de tabla personalizada sin usar UITableView

Muchas veces queremos crear una vista de tabla usando UITableView y a la hora de personalizarla nos encontramos con … [Leer más...] acerca deiOS: Crear vista de tabla personalizada sin usar UITableView

Ayúdanos a difundir

Si te ha parecido útil esta información, por favor compártela en las redes sociales.

Interacciones con los lectores

Comentarios

  1. Alan dice

    18 mayo, 2013 en 5:48

    muchas gracias por el truco

    Responder
  2. Miguel Angel dice

    31 julio, 2014 en 4:21

    Hola! 😀

    Creo que de esta manera también se puede hacer para evitar que se vea como 4 sombras:
    text-shadow: 0px 0px 1px black;

    Responder
  3. Raúl Flores dice

    1 agosto, 2014 en 18:09

    Gracias por el aporte Miguel Ángel!!

    Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Desarrollo Web
hazte visible

DA EL PRIMER PASO

Diseño web programacion multimedia

Copyright 2012 | www.programacionmultimedia.net | Raúl Flores