Biblioteca Online : ¡La Suscripción ENI por 9,90 € el primer mes!, con el código PRIMER9. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. CSS3
  3. La interfaz de usuario
Extrait - CSS3 Domine los estándares web con las hojas de estilo
Extractos del libro
CSS3 Domine los estándares web con las hojas de estilo Volver a la página de compra del libro

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.