Outline, contornos dinámicos en CSS

10 Jul'09

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.

Etiquetas: ,

Compartir

7 Comentarios

  1. 11 Julio 2009 - 16:19

    Que buen tip! yo ando desfasado en muchos campos, y css es uno de ellos, pero siempre está bien tener ases como estos debajo de la manga, para marcar territorio :)

    Responder

    Marcos

  2. 12 Julio 2009 - 13:46

    El ejemplo de funcionamiento es este mismo de los formulario del blog, ¿no?

    Responder

    Gabriel P

  3. 13 Julio 2009 - 13:45

    Gracias Marcos, no me extraña nada que estés “desfasado”, ya en bastantes cosas estas metido :P

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

    Responder

    javiaurea

  4. 13 Julio 2009 - 21:43

    Está claro…no tengo ni puta idea de CSS xD

    Responder

    Skeku

    • 13 Julio 2009 - 22:59

      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 :P

      javiaurea

  5. 13 Julio 2009 - 23:46

    Ahora el puesto es mio… XD

    Responder

    marcos

  6. 16 Julio 2009 - 19:25

    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

    Responder

    Skeku

Dejar un comentario