Outline (contorno)
Outline
Border
Contenido
Las propiedades más comunes de outline son las siguientes:
outline-styleoutline-coloroutline-widthoutline-offsetoutline
Nota: la propiedad outline no forma parte de las dimensiones del elemento,
solo se sobrepone al contenido del elemento. Por tanto, el alto y ancho del elemento no varía.
Estilos para outline
Para la propiedad outline-style podemos dar los siguientes estilos:
dotted:el contorno es punteado.dashed:el contorno es discontinuo.solid:el contorno es sólido.double:el contorno es doble.groove:el contorno es en 3D.ridge:el contorno es estriado en 3D.inset:el contorno es por dentro en 3D.outset:el contorno tiene un inicio en 3D.none:no tiene contorno.hidden:su contorno es oculto.
Input:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
Output:
Contorno tipo dotted.
Contorno tipo dashed.
Contorno tipo sólido.
Contorno tipo doble.
Contorno tipo groove.
Contorno tipo ridge.
Contorno tipo inset.
Contorno tipo outset.
Outline width
La propiedad outline-width especifica el ancho del contorno, se puede usar los siguientes valores:
- thin
- medium
- thick
- Tamaño (px, pt, cm, em, etc)
Input:
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}
p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}
Output:
Un contorno fino.
Un contorno mediano.
Un contorno grueso.
Un contorno de 8px de grosor.
Outline color
La propiedad outline-color establece el color del contorno, su configuración es mediante los siguientes atributos:
- nombre: especifica el nombre de color reconocido por CSS, ejemplo:
tomato. - HEX: especifica el valor hexadecimal, ejemplo:
#ff0022. - RGB: especifica el color rgb(255,10,0).
- HSL: especifica el color hsl(0,100%,50%).
- invert: invierte el color del contorno y es independiente al color de fondo.
Input:
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
Output:
Contorno sólido, color tomato.
Contorno sólido, color rgb(255,100,50).
Contorno sólido, color hsl(300,90%,70%).
Outline offset
La propiedad outline-offset agrega espacio entre el contorno y el borde de un elemento, el espacio es transparente.
Input:
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Output:
Este párrafo tiene un contorno de 20px fuera del borde.
Outline shorthand (abreviado)
Para usar la propiedad outline abreviada se debe considerar los siguientes valores individuales:
outline-widthoutline-style (requerido)outline-color
Input:
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
Output:
Contorno punteado.
Contorno punteado de color rosado.
Contorno sólido de 5px de grosor y de color rosado.
Contorno sólido de grosor thick y de color rosado.
Ejercicio 1
Crea un menú de navegación sencillo y aplícale un estilo que resalte el contorno de los botones del menú usando la propiedad outline. Cuando el cursor se encuentre sobre el botón se debe apreciar los estilos del contorno.
Resultado:
Ejercicio 2
Crea un contenedor en HTML y aplícale un estilo que use outline para mostrar un contorno alrededor del elemento. Además, usa la propiedad outline-offset para desplazar el contorno desde el borde.
Resultado: