Interfaz de usuario CSS3
CSS3 tiene nuevas características de la interfaz de usuario, como cambiar el tamaño de los elementos, esquemas, y caja de medición.
En este capítulo usted aprenderá acerca de las siguientes propiedades de la interfaz de usuario:
-
resize -
outline-offset
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit- o -moz- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| resize | 4.0 | No soportado | 5.0 4.0 -moz- | 4.0 | 15.0 |
| outline-offset | 4.0 | No soportado | 5.0 4.0 -moz- | 4.0 | 9.5 |
Cambiar el tamaño de CSS3
El resize propiedad especifica si un elemento debe ser de tamaño variable por el usuario.
El siguiente ejemplo permite al usuario cambiar el tamaño de sólo el ancho de un <div> elemento:
El siguiente ejemplo permite al usuario cambiar el tamaño solamente la altura de un <div> elemento:
El siguiente ejemplo permite al usuario cambiar el tamaño de la altura y la anchura de un <div> elemento:
Esquema CSS3 Offset
El outline-offset establecimiento tiene espacio entre un esquema y el borde o borde de un elemento.
Esquemas difieren de las fronteras de tres maneras:
- Un esquema es una línea trazada alrededor de los elementos, fuera del límite del borde
- Un esquema no ocupa espacio
- Un esquema puede ser no rectangular
En el siguiente ejemplo se utiliza la propiedad de esquema de compensación para agregar un espacio de 15 píxeles entre el borde y el contorno:
Ejemplo
div
{
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Inténtalo tú mismo " Propiedades de la interfaz de usuario de CSS3
La siguiente tabla muestra todas las propiedades de la interfaz de usuario:
| Propiedad | Descripción |
|---|---|
| box-sizing | Permite incluir el relleno y el borde en total anchura y la altura de un elemento |
| nav-down | Especifica dónde navegar utilizando la tecla de navegación flecha hacia abajo |
| nav-index | Especifica el orden de tabulación de un elemento |
| nav-left | Especifica dónde navegar utilizando la tecla de navegación flecha hacia la izquierda |
| nav-right | Especifica dónde navegar utilizando la tecla de navegación flecha hacia la derecha |
| nav-up | Especifica dónde navegar utilizando la tecla de navegación flecha hacia arriba |
| outline-offset | Agrega espacio entre un esquema y el borde o borde de un elemento |
| resize | Especifica si un elemento es de tamaño variable por el usuario |