Contornos en CSS
En CSS, el contorno es una línea que rodea el borde de un elemento y se dibuja por fuera del mismo. A diferencia del borde, el contorno no afecta el tamaño del elemento, por lo que no modifica el flujo del contenido en la página. Esto significa que, aunque el contorno se visualiza alrededor del elemento, no ocupa espacio en el diseño.
El contorno es particularmente útil para resaltar elementos de forma temporal, como cuando se utiliza en campos de formularios que requieren validación o en enlaces activos que se enfocan mediante el teclado.
El contorno se puede personalizar mediante diferentes propiedades de CSS, como el color, el estilo y el grosor. A continuación, exploraremos las propiedades más comunes de los contornos en CSS:
- outline-color: Define el color del contorno.
- outline-style: Establece el estilo de la línea del contorno (punteado, sólido, doble, etc.).
- outline-width: Controla el grosor del contorno.
- outline-offset: Ajusta la distancia entre el contorno y el borde del elemento.
- outline: Es una propiedad abreviada que permite definir color, estilo y grosor en una sola declaración.
Ejemplo de contorno aplicado en un párrafo:
...
Propiedades de contorno en CSS
Las propiedades de contorno en CSS permiten personalizar el estilo de los contornos que rodean los elementos HTML. A continuación se describen las propiedades principales que se pueden utilizar para modificar un contorno:
- outline-color: Esta propiedad define el color del contorno. Puede ser cualquier valor de color válido en CSS (nombre del color, hexadecimal, RGB, etc.).
- outline-style: Establece el estilo del contorno. Los valores comunes incluyen:
- dotted: Contorno punteado.
- dashed: Contorno discontinuo.
- solid: Contorno sólido.
- double: Contorno doble.
- groove, ridge, inset, outset: Estilos en 3D que dependen del color del contorno para simular profundidad.
- none: Sin contorno.
- outline-width: Controla el grosor del contorno, con valores en unidades absolutas (como px) o relativas (como em).
- outline-offset: Ajusta la distancia entre el contorno y el borde del elemento. Permite separar visualmente el contorno del elemento al que rodea.
- outline: Propiedad abreviada que combina outline-color, outline-style y outline-width en una sola declaración.
Ejemplo de un contorno con propiedades combinadas:
outline-color
La propiedad outline-color define el color del contorno de un elemento en CSS. Este contorno se dibuja fuera del borde del elemento y no afecta el tamaño total ni la disposición del elemento en la página.
Algunos valores para outline-color incluyen:
- Nombres de colores:
red,blue,green, etc. - Colores hexadecimales:
#4CAF50,#FF5733, etc. - Valores RGB/RGBA:
rgb(76, 175, 80)orgba(76, 175, 80, 0.8)(este último permite transparencia). - CurrentColor: Usa el color actual del elemento, por ejemplo, el color del texto.
Ejemplo visual:
outline-style
La propiedad outline-style define el estilo de la línea del contorno alrededor de un elemento
en CSS. Funciona de forma similar a border-style y permite una variedad de estilos que
añaden efectos visuales al contorno.
Valores de outline-style:
- dotted: Define un contorno punteado.
- dashed: Define un contorno discontinuo.
- solid: Define un contorno sólido.
- double: Define un contorno de doble línea.
- groove: Define un contorno en relieve 3D.
- ridge: Define un contorno de cresta 3D.
- inset: Define un contorno de inserción en 3D.
- outset: Define un contorno saliente en 3D.
- none: No define ningún contorno.
Ejemplo visual:
outline-width
La propiedad outline-width especifica el grosor del contorno de un elemento en CSS. Funciona
de forma similar a border-width y permite controlar el ancho del contorno alrededor de
un elemento, independientemente del borde.
Valores de outline-width:
- thin: Define un contorno delgado.
- medium: Define un contorno de grosor medio (valor predeterminado).
- thick: Define un contorno grueso.
- Medidas específicas: También se puede especificar en píxeles, rems u otras unidades, como
5pxo0.2rem.
Ejemplo visual:
outline-offset
La propiedad outline-offset en CSS define la distancia entre el borde de un elemento y su contorno. Este desplazamiento permite que el contorno no se dibuje directamente sobre el borde, sino a una distancia específica del mismo, creando un efecto de separación.
Valores de outline-offset: Cualquier medida válida en CSS, como píxeles (px),
rems (rem), porcentajes, etc.
Ejemplo visual:
outline
La propiedad outline en CSS es una propiedad abreviada que permite definir el color, el estilo y el ancho del contorno en una sola línea. A diferencia del borde, el contorno no afecta el flujo del documento, ya que se dibuja fuera del borde del elemento.
Sintaxis: outline: <color> <style> <width>
Ejemplo:
Propiedades individuales: La propiedad outline combina las propiedades
outline-color, outline-style y outline-width en una sola
línea.
Estilos de los contornos en CSS
La propiedad outline-style en CSS permite definir diferentes estilos para los contornos de un elemento. Esta propiedad puede tener varios valores que afectan cómo se dibuja el contorno alrededor del elemento.
Valores de outline-style:
- dotted: Un contorno punteado.
- dashed: Un contorno discontinuo.
- solid: Un contorno sólido.
- double: Un contorno doble.
- groove: Un contorno ranurado en 3D.
- ridge: Un contorno estriado en 3D.
- inset: Un contorno de inserción en 3D.
- outset: Un contorno inicial en 3D.
- none: No se dibuja contorno.
- hidden: Contorno oculto.
Ejemplo de contornos con diferentes estilos:
Estos estilos de contorno pueden combinarse con otras propiedades, como el color, el grosor y el desplazamiento del contorno, para personalizar aún más el diseño.
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias