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

Compatibilidad del navegador

Los números en la tabla indican la primera 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) ajustarse por el usuario.

¡Este elemento div es ajustable 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 personalmente

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

Ejemplo

div {
  resize: vertical;
  overflow: auto;
}

Prueba personalmente

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

Ejemplo

div {
  resize: both;
  overflow: auto;
}

Prueba personalmente

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

Ejemplo

textarea {
  resize: none;
}

Prueba personalmente

Desplazamiento de borde de CSS

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

Este div tiene un contorno de 15px fuera del borde.

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 solaparse con 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 personalmente

Atributos de interfaz de usuario CSS

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

Atributo Descripción
outline-offset Agregar espacio entre el contorno y el borde del elemento.
resize Determinar si el elemento es ajustable por el usuario.