Integración de interfaz en CSS

¿Siempre has soñado con un sitio web que sea amigable con todos sus visitantes respetando colores y fuentes predefinidas por ellos mismos?. Gracias a CSS ese sueño puede ser realidad…

CSS ofrece una solución para que nuestro sitio se adapte al diseño de interfaz del sistema operativo del usuario; sin la necesidad de optar por un color u otro y dudar con el tipo de fuente a utilizar.

A continuación verás una lista detallada con los colores específicos del sistema que podemos utilizar en las propiedades background y color de nuestras hojas de estilo:

ActiveBorder: borde de la ventana activa

    ActiveCaption: fondo de la barra de títulos activa

    AppWorkspace:

    Background: fondo del escritorio

    ButtonFace:

    ButtonHighlight: elementos en 3 dimensiones seleccionados

    ButtonShadow: sombra de elementos en 3 dimensiones

    ButtonText: texto de los botones

    CaptionText: texto de la barra de títulos inactiva

    GrayText: elementos desactivados

    Highlight: elementos seleccionados

    HighlightText: texto seleccionados 

    InactiveBorder: borde de la ventana inactiva

    InactiveCaption: fondo de la barra de títulos inactiva

    InactiveCaptionText: texto de la barra de títulos inactiva

    InfoBackground: fondo de la información (tooltips)

    InfoText: texto de la información (tooltips)

    Menu: fondo de menús

    MenuText: texto de menús

    Scrollbar: barra de desplazamiento

    ThreeDDarkShadow: sombra oscura para elementos en 3 dimensiones 

    ThreeDFace: 

    ThreeDHighlight: elementos en 3 dimensiones seleccionados

    ThreeDLightShadow: sombra clara para elementos en 3 dimensiones

    ThreeDShadow: sombra clara para elementos en 3 dimensiones

    Window: fondo ventana

    WindowFrame: marco de la ventana

    WindowText: texto de la ventana

También podemos utilizar las fuentes activas del sistema operativo del usuario:

Caption

    Icon

    Menu

    Message-box

    Small-caption

    Status-bar

Autor: Federico Javier Elgarte
http://www.cssboulevar.com.ar/leer.php/articulo/8

Usuarios que han visto este tema también han visto...

- Cómo quitar subrayado de los enlaces
- Puertas deslizantes con CSS
- Cómo utilizar el Opacity con CSS
- Centrado Dinámico de Columnas mediante CSS
- Superposición de imágenes con CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento