Contorno: outline
Alrededor de cualquier bloque se puede crear una especie de marco definido en CSS como outline. Se trata de una zona creada alredededor de la caja CSS justo después de los bordes. Es un elemento que no ocupa espacio y por tanto no afecta ni a las dimensioones del bloque ni a su posición. No pertenece al modelo CSS box.
Por su definición y atributos se parece mucho a los bordes pero es un elemento totalmetne distinto,
- No ocupa espacio en la página.
- No tiene lados diferentes, los cuatro lados tienen el mismo aspecto
- Puede tener formas no rectangulares.
Las propiedades específicas de este elemento los bordes son
| Propiedad | Uso | Valor |
|---|---|---|
| outline-width | un valor indicando el ancho del contorno | Medida |
| outline-style | El tipo de linea para dibujar el contorno. Obligatorio | dashed, dotted, double, groove, inset, outset, ridge, solid, inherit, hidden, none |
| outline-color | El color del contorno | código de color |
| outline-offset | Distancia al borde de la caja | Medida |
Lo atributos anchura, estilo y color pueden definirse usando el sistema de abreviaturas habitual de css, usando el nombre outline seguido de los valores de cada atributo
outlline: 2px solid red
Este es un ejemplo para un elemento con un contorno
div{
outline-width: 20px;
outline-style: solid;
outline-color: #a1a1a1;
outline-offset: 4px;
}
Estaes una llinea que está después del bloque en el código de la página. Pero queda oculta. Realmente está debajo del contorno del bloque
Esta última que está puesta después del bloque div está medio oculta por el contorno, igual que la linea anterior al bloque div. Esto ocurre porque este elemento está por encima de la página y no ocupa espacio, se superpone.
Hemos creado un rectángulo (un contenedor <div>) con un borde sólido de 2 px color #a1a1a1, un relleno interior (padding) de 40 px, color de fondo (background: #dddddd) ancho 300 px y esquinas redondeadas de 25 px de radio. Se pueden conseguir bloques redondos aplicando radios para todas las esquinas igual al ancho y alto del bloque (cuadrado, claro).
No es bueno abusar de los bordes y a veces un borde con un color muy ligero es suficiente. Las cajas cerradas abigarran el contenido de la página.
Una muestra de los distintos estilos de linea para dibujar el cotorno que pueden usarse en las páginas web, algunos apenas son perceptibles. Se pueden usar incluso para dar cierto aspecto 3D.
No es bueno abusar de los bordes. Un elevado número de cajas cerradas por bordes abigarran el contenido de la página.
A veces una ligera linea de un tono algo subido respecto al fondo es suficiente.
Estos bordes son aplicables igualmente a tablas y celdas
Uso de outline
El outline es un contorno que se dibuja alrededor de un elmento y por encima de la hoja, sobrepuesto a lo que pueda haber debajo. No reacciona a los eventor de ratón, no puedes escribir un script que actúe cuando el ratón pasa por el contorno.
Este elemento se podría describir como un pseudo borde, en el sentido de que comparte propiedades, pero no es un borde y no forma parte del modelo de contenedor CSS, cuando se calcula el espacio ocupado por un elemento en el documento HTML no se tienen en cuenta este elemento.
Entonces la pregunta es ¿para que usar este elemento que me tapa la página? Pues básicamente el único uso es para resaltar un elemento de la página como puedes ver en el siguiente ejemplo. Al pasar el ratón por la caja central se resalta con un outline, pero todo sigue en su sitio, no se mueve. El outline es dibujado por encima de la página.
Esta es la definición del estilo usado para el contorno de la caja central al pasar el ratón por encima (:hover). He usado un color con transparencia y un ancho grande para que se ve claro como funciona este elemento:
outline: 40px solid rgb(0,195,255, 0.5);
outline-offset: 4px;
El contorno se dibuja por encima de la página.
No detecta el paso del ratón por encima
Es diferente a los bordes
Se usa para resaltar un elemento de la página.