
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 textualesselect: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.
11 Comments
Gabriel Porr
El ejemplo de funcionamiento es este mismo de los formulario del blog, ¿no?
javiaurea
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
Está claro…no tengo ni puta idea de CSS xD
marcos
Ahora el puesto es mio… XD
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 😛
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
javiaurea
Christian, pruena con: *:focus { outline: none; }
christian
igual no funciona javiaurea mmm gracias de todas formas
fackel2101
grasias pana lo estaba buscando
Comments are closed for this post