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