/// DESIGN-ROOT /// Diseño, usabilidad y animación web

El siguiente estilo nos permite cambiar la opacidad de una imagen tras un evento (onMouseDown, onMouseOver,...).

style="filter:alpha(opacity=100)" onMouseDown="this.filters.alpha.opacity=50"

Un caso práctico de aplicación podría ser una galería de fotografías compuesta por imágenes thumb en miniatura. Al hacer clic sobre una imagen thumb se abre en un pop-up la imagen a gran tamaño. Si aplicamos este estilo dentro de la etiqueta <img> de la imagen, al pulsar sobre ella bajará la opacidad indicando que ya se ha pulsado.

Cada navegador es un mundo, y eso lo sabe mejor que nadie los diseñadores, quienes tienen que estar constamente comprobando cómo se ve el diseño y/o la maquetación de una web en Mozilla o Explorer (por mencionar los exploradores más estandarizados entre los usuarios).

Así, nos puede interesar que dependiendo del navegador que tenga el usuario se carge una u otra hoja de estilos CSS, creada teniendo en cuenta las peculiaridades del navegador, asegurándonos de este modo que el contenido se ve siempre correctamente sin sorpresas desagradables.

Para ello tenemos que crear un script que primero compruebe qué navegador tiene el usuario y, dependiendo de la respuesta, carge la hoja de estilos CSS correspondiente.

<script LANGUAGE="JavaScript">
if (document.layers) {
    document.write("<LINK REL='stylesheet' HREF='estilo_mz.css' TYPE='text/css'>"); }
else {
    document.write("<LINK REL='stylesheet' HREF='estilo_ie.css' TYPE='text/css'>"); }
</script>


Donde 'estilo_mz.css' es la hoja de estilos que se cargará si el usuario tiene Mozilla, y 'estilo_ie.css' si tiene Explorer.

La web StyleGala ofrece un completo listado por orden alfabético de la sintaxis CSS y sus propiedades.

Al pulsar sobre una de las propiedades del listado (background, border, margin, etc...) puedes ver un ejemplo de su aplicación, soporte y posibles valores para dicha propiedad.

http://www.stylegala.com/features/css-reference/

Esta herramienta te permite generar la hoja de estilos CSS rellenando un formulario.

Puedes escoger un SELECTOR o escribir el nombre de la .clase para definir el estilo y asignar las PROPIEDADES y VALORES correspondientes.

Una vez tengas compuestos los estilos puedes GENERAR la hoja CSS o TESTEARLA para compronar errores de sintaxis.

http://www.ignside.net/man/misc/csstest.html

Las hojas de estilo nos permiten cambiar la apariencia de un sitio web sin tener que programarlo y/o maquetarlo de nuevo. La web http://www.csszengarden.com/ es el mejor ejemplo para comprenderlo mejor. Vemos que dependiendo del estilo que se seleccione en la columna derecha, la web tiene una apariencia u otra. El contenido es siempre el mismo, sólo cambiamos la hoja de estilos.

En el siguiente ejemplo veremos cómo cambiar la hoja de estilos CSS de un sitio web con sólo pulsar un enlace (como en la web de ejemplo). El proceso es bastante sencillo para lo que utilizaremos javascript.

1.- Declaramos la hoja de estilos principal, añadiendole un id (identificador) para poder cambiar el valor href por medio de un javascript.

2.- Añadimos la función que intercambiará una hoja de estilo por otra, utilizando la propiedad getElementById() para identificar el objeto:

function estilo(cambio) {
document.getElementById('estilo').href=cambio;
}

3.- Añadimos la siguiente linea al enlace que cambiará la hoja de estilo principal.css por la secundaria.css

onClick="estilo('secundaria.css');

Y listo! Aplicaciones varias… Dar al usuario la opción de elegir el diseño que más le guste para presentar los contenidos de nuestro sitio web o hacer varios diseños para un mismo weblog, por ejemplo.

¿Cansad@ de los típicos cursores de flecha? En la siguiente web tienes varios estilos css para cambiar el cursor.

http://www.w3schools.com/css/tryit.asp?filename=trycss_cursor