Interfaz de usuario CSS

Interfaz de usuario CSS

En este capítulo, aprenderá las siguientes propiedades de interfaz de usuario de CSS:

  • resize
  • outline-offset

Soporte del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Atributo Chrome IE Firefox Safari Opera
resize 4.0 No soportado 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

Ajuste de CSS

resize La propiedad especifica si el elemento debe (y cómo) ser ajustado por el usuario.

¡Este elemento div puede ser ajustado por el usuario!

Ajuste de tamaño: haga clic y arrastre la esquina inferior derecha de este elemento div.

Nota:Internet Explorer no admite la propiedad resize.

El siguiente ejemplo permite que el usuario ajuste solo el ancho del elemento <div>:

Ejemplo

div {
  resize: horizontal;
  overflow: auto;
}

Prueba por ti mismo

El siguiente ejemplo permite que el usuario ajuste solo la altura del elemento <div>:

Ejemplo

div {
  resize: vertical;
  overflow: auto;
}

Prueba por ti mismo

El siguiente ejemplo permite que el usuario pueda ajustar la altura y el ancho del elemento <div>:

Ejemplo

div {
  resize: both;
  overflow: auto;
}

Prueba por ti mismo

En muchos navegadores, <textarea> se ajusta de manera predeterminada. Aquí, utilizamos la propiedad resize para deshabilitar esta escalabilidad:

Ejemplo

textarea {
  resize: none;
}

Prueba por ti mismo

Desplazamiento de contorno de CSS

outline-offset La propiedad agrega espacio entre el contorno y el borde del elemento.

Este div tiene 15px de contorno en el borde externo.

Nota:El contorno es diferente del borde! A diferencia del borde, la línea de contorno se dibuja fuera del borde del elemento y puede superponerse a otros contenido. Además, el contorno no es parte del tamaño del elemento: el ancho y la altura totales del elemento no se ven afectados por el ancho de la línea de contorno.

El siguiente ejemplo utiliza la propiedad outline-offset para agregar espacio entre el borde y la línea de contorno:

Ejemplo

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

Prueba por ti mismo

Atributos de interfaz de usuario CSS

La siguiente tabla enumera todos los atributos de interfaz de usuario:

Atributo Descripción
outline-offset Añade espacio entre el contorno y el borde del elemento.
resize Especifica si los elementos pueden ser ajustados en tamaño por el usuario.