Ediciones ENI Editorial | líder en informática
La interfaz de usuario
Objetivo
En este capítulo, vamos a ver las propiedades clasificadas en el módulo Basic User Interface Module Level 3 (CSS3 UI), en Candidate Recommendation, 7 July 2015. Este módulo reúne las propiedades que permiten personalizar la interfaz de usuario: los contornos dinámicos y los cursores.
Los contornos dinámicos
El contorno dinámico sirve para resaltar un elemento de la página, principalmente en el momento en que el usuario realiza una acción. El ejemplo más común es su utilización en los campos de un formulario. En el apartado dedicado a los formularios del capítulo Tablas y formularios, hallará un ejemplo de este uso.
La propiedad outline es la sintaxis corta de estas propiedades individuales: outline-color, outline-style y outline-width.
Propiedad: outline-color
Valor: color | invert
Valor inicial: invert
Se aplica a: todos los elementos
Herencia: no
Propiedad: outline-style
Valor: auto | border-style
Valor inicial: none
Se aplica a: todos los elementos
Herencia: no
Propiedades: outline-width
Valor: border-width
Valor inicial: medium
Se aplica a: todos los elementos
Herencia: no
Utilizaremos también la propiedad outline-offset, que sirve para definir la distancia entre el elemento y su contorno dinámico.
Propiedad: outline-offset
Valor: longitud
Valor inicial: 0
Se aplica a: todos los elementos
Herencia: no
Veamos un ejemplo (07_01.html) muy sencillo de contorno dinámico en un párrafo en el que el usuario ha hecho clic.
He aquí el código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Párrafo resaltado</title> ...Los cursores
La propiedad cursor permite cambiar la apariencia del cursor en un contexto determinado de la página.
Propiedad: cursor
Valor: url | auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out
Valor inicial: auto
Se aplica a: todos los elementos
Herencia: sí
He aquí los valores que pueden usarse:
Cursores generales:
-
url: indica la ruta de acceso al archivo de imagen que reemplaza al cursor.
-
auto: el navegador escoge la apariencia del cursor.
-
default: cursor por defecto de la plataforma utilizada (con frecuencia es una flecha).
-
none: sin cursor.
Cursores de vínculo y estado:
-
content-menu: para mostrar el cursor por encima de un elemento.
-
help: el cursor puede tomar el aspecto de un signo de interrogación o un globo para indicar que el elemento señalado dispone de ayuda.
-
pointer: el cursor toma la apariencia de un dedo extendido.
-
progress: el cursor toma la apariencia de una rueda o de una flecha con un reloj para indicar que se está llevando a cabo un proceso.
-
wait: el cursor toma la apariencia de un reloj (que puede ser de arena) para indicar que hay que esperar.
Cursores para seleccionar:...
Las propiedades «de riesgo»
El módulo Basic User Interface Module Level 3 (CSS3 UI) ofrece otras propiedades que todavía no se pueden utilizar, ya que la W3C las califica de riesgosas (Features at risk). Deberá estar atento para comprobar si esas propiedades pueden usarse en un futuro o no.
