Blog what I write

Outline, contornos dinámicos en CSS

post - - 11 replies -

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.

  • http://www.q-interactiva.com Marcos

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

  • http://www.estandaresyaccesibilidad.com Gabriel Porr

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

  • http://aurea.es javiaurea

    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.

  • http://www.criteriondg.info/wordpress Skeku

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

    • http://aurea.es javiaurea

      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

  • http://www.q-interactiva.com marcos

    Ahora el puesto es mio… XD

  • http://www.criteriondg.info/wordpress Skeku

    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

  • christian

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

    • http://aurea.es javiaurea

      Christian, pruena con: *:focus { outline: none; }

  • christian

    igual no funciona javiaurea mmm gracias de todas formas

  • fackel2101

    grasias pana lo estaba buscando