• Skip to main content
  • Skip to footer

Programación Multimedia

Diseño Gráfico y Desarrollo Web

  • Inicio
  • Qué hacemos
  • Portafolio
  • Blog
  • Contacto
You are here: Home / 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 Comments

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.

Filed Under: CSS Tagged With: 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...] about La 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...] about CSS3: 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...] about iOS: 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.

Reader Interactions

Comments

  1. Alan says

    18 mayo, 2013 at 5:48

    muchas gracias por el truco

    Responder
  2. Miguel Angel says

    31 julio, 2014 at 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 says

    1 agosto, 2014 at 18:09

    Gracias por el aporte Miguel Ángel!!

    Responder

Deja un comentario Cancelar 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