Interfaz de usuario CSS

En este artículo se tratará sobre las siguientes propiedades de interfaz de usuario CSS:

• resize
• outline-offset

Cambio de Tamaño CSS

La propiedad resize especifica si (y como) un elemento debe ser redimensionable por el usuario.

En el siguiente ejemplo la propiedad resize se establece en both para permitir al usuario redimensionar tanto horizontal como vertical el elemento div:

CSS:

.div {
  border: 2px solid;
  padding: 20px;
  width: 300px;
  resize: both;
  overflow: auto;
}

Ejemplo:

En el siguiente ejemplo solo se permite redimensionar el ancho, estableciendo la propiedad resize en horizontal:

CSS:

.div {
  border: 2px solid;
  padding: 20px;
  width: 300px;
  resize: horizontal;
  overflow: auto;
}

Ejemplo:

En el siguiente ejemplo solo se permite redimensionar el alto, estableciendo la propiedad resize en vertical:

CSS:

.div {
  border: 2px solid;
  padding: 20px;
  width: 300px;
  resize: vertical;
  overflow: auto;
}

Ejemplo:

En muchos navegadores web el elemento <textarea> es redimensionable por defecto, pero podemos deshabilitar esto con la propiedad resize establecida en none:

CSS:

textarea {
  resize: none;
}

Ejemplo:

"textarea" no redimensionable

"textarea" si redimensionable por defecto

Contorno Desplazado CSS

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

El contorno difiere de los bordes. A diferencia del borde, el contorno es dibujado fuera del borde del elemento, y puede sobreponerse a otro contenido. También, el contorno no es parte de las dimensiones del elemento: el ancho y alto total del elemento no se ven afectados por el ancho del contorno.

En el siguiente ejemplo se utiliza la propiedad outline-offset para agregar espacio entre el borde y el contorno:

CSS

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

Ejemplos:

Propiedades de Interfaz de Usuario CSS

En la siguiente tabla se listan las propiedades de interfaz de usuario: