Outline, contornos dinámicos en CSS

Outline nos permite crear un contorno dinámico (que bien suena esto :D) alrededor de los objetos, imágenes, controles de un formulario, etc.

La propiedad de CSS «outline» es una gran desconocida, creo que le hace sombra la famosa propiedad «border» aunque de forma mal interpretada.

¿Qué es un contorno dinámico?

Es aquel que se forma alrededor del elemento sin afectar a la maquetación. Por lo tanto, mostrar u ocultar los contornos no provoca el redibujado de los elementos afectados ni adyacentes.

Cabe destacar que el contorno se dibuja justo fuera del limite del «border».

Las propiedades hijas de outline

  • outline-width
  • outline-style
  • outline-color

Outline vs. Border

Son propiedades diferentes:

  • Los contornos no ocupan espacio.
  • Los contornos pueden ser no rectangulares.
  • No existen outline-top, outline-left.
  • La propiedad outline-style no acepta el valor «hidden».

Usando outline

Yo recurro mucho a esta propiedad para la interacción con los controles de un formulario.

input:focus[type=text], 
textarea:focus, 
select:focus { 
	outline: 1px solid #3EB3D6; 
}  

En este CSS indico que a través de los pseudo-selectores:

  • input:focus[type=text]: controles de entrada de datos (solamente de tipo text, no botones)
  • textarea:focus: áreas textuales
  • select:focus: controles de tipo desplegable con varias opciones.

Cuando estos controles reciben el foco se dibuja un contorno dinámico de 1px de grosor, de estilo solido y con el color #3EB3D6.

Compartir:

11 Comments

    • Gracias Marcos, no me extraña nada que estés «desfasado», ya en bastantes cosas estas metido 😛

      Grabriel, como bien dices en este blog uso esta técnica.

    • Skeku, sabrás menos de CSS jejeje.
      Por cierto, cuando estuve por [Q] flipe con tu puesto (decoración, herramientas, organización > mejor dicho distribución, etc) todo un artista 😛

  • En efecto, me lo ha robado el gay de mi jefe. Pero lo he solventado rápido. Estoy en huelga de hambre desde entonces. Sólo me alimento a base de panteras rosas. xD

  • deseo ocultarlo de un elemento link; no me funca el outline:none en el ie7

Comments are closed for this post