Interfaz de usuario de CSS
Interfaz de usuario de CSS
En este capítulo aprenderá acerca de las siguientes propiedades de la interfaz de usuario de CSS:
resizeoutline-offset
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Property | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
Cambio de tamaño de CSS
La resizepropiedad especifica si (y cómo) el usuario debe cambiar el tamaño de un elemento.
¡El usuario puede cambiar el tamaño de este elemento div!
Para cambiar el tamaño: haga clic y arrastre la esquina inferior derecha de este elemento div.
El siguiente ejemplo le permite al usuario cambiar el tamaño solo del ancho de un elemento <div>:
Ejemplo
div
{
resize: horizontal;
overflow: auto;
}
El siguiente ejemplo le permite al usuario cambiar el tamaño solo de la altura de un elemento <div>:
Ejemplo
div
{
resize: vertical;
overflow: auto;
}
El siguiente ejemplo le permite al usuario cambiar el tamaño tanto del alto como del ancho de un elemento <div>:
Ejemplo
div
{
resize: both;
overflow: auto;
}
En muchos navegadores, <textarea> se puede cambiar de tamaño de forma predeterminada. Aquí, hemos utilizado la propiedad de cambio de tamaño para desactivar la capacidad de cambio de tamaño:
Ejemplo
textarea {
resize: none;
}
Desplazamiento de contorno CSS
La outline-offsetpropiedad agrega espacio entre un contorno y el borde o borde de un elemento.
Nota: ¡El contorno difiere de los bordes! A diferencia del borde, el contorno se dibuja fuera del borde del elemento y puede superponerse a otro contenido. Además, el contorno NO forma parte de las dimensiones del elemento; el ancho y la altura totales del elemento no se ven afectados por el ancho del contorno.
El siguiente ejemplo usa la outline-offsetpropiedad para agregar espacio entre el borde y el 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;
}
Propiedades de la interfaz de usuario de CSS
La siguiente tabla enumera todas las propiedades de la interfaz de usuario:
| Property | Description |
|---|---|
| outline-offset | Adds space between an outline and the edge or border of an element |
| resize | Specifies whether or not an element is resizable by the user |