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

Cambiar la opacidad de una imagen con estilos

noreply@blogspirit.com (Patricia Campuzano) — Fri, 26 May 2006 15:55:00 +0200

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.

Estilos CSS diferentes dependiendo del navegador

noreply@blogspirit.com (Patricia Campuzano) — Wed, 17 May 2006 17:25:00 +0200

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.

CSS Reference

noreply@blogspirit.com (Patricia Campuzano) — Wed, 17 May 2006 13:42:29 +0200

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/