CSS
En muchos sitios web, suelen ponerse valoraciones (a los productos en las tiendas on line, a las noticias en los portales, etc.). La mayoria utilizan un diseño con números del 1 al 5 por ser lo más práctico, y cuando colocan un diseño con imagenes (estrellas por ejemplo), lo hacen con javaScript para darle el efecto.
Este tutorial te muestra como crear el diseño de un Raiting Star sólo con CSS, práctico, sencillo y con un código muy limpio.
Ver ejemplo y código fuente: CSS Raiting Selector
Ver tutorial (Ingles): Creating a Star Rater using CSS
Después de haber visto como diseñar un formulario de identificación, veamos ahora como darle vida a uno de registro, sin tablas, pero con unas pocas líneas de código css, y como siempre, muy fácil de personalizar.
Una de las potencialidades del navegador Firefox es el poder personalizar algunas páginas web, eso es lo que vamos a hacer ahora. Vamos a personalizar la página de Gmail con tan sólo 5 pasos...
ÂżA quiĂ©n nunca le ha intrigado como Comunnity MX creĂł el impresionante menĂş dropdown de su página web? Pues en este artĂculo, en una traducciĂłn más de A list Apart, les mostramos como crearse uno, usando CSS y algo de JavaScript para hacerlo accesible a la mayorĂa de navegadores.
<!--StartFragment -->TraducciĂłn con el permiso de A list Apart Magazine y su autor Eric Shepherd.
En nuestra lucha por reducir el número de pasos que los visitantes de un sitio web toman para lograr una meta, le hacemos frente a un sin número de desafíos. Uno de ellos es el proveer a los usuarios del mejor camino a elegir de una lista de elementos jerárquicos.
Nuestros Objetivos:
- Exhibir una lista jerárquica de opciones detallada y con muchos elementos.
- Ofrecer al visitante una opción llana por momentos y oculta en otros.
Traducción con el permiso de A list Apart Magazine y su autor Christian Heilmann.
Un mapa de imagen es crear zonas activas en la imagen misma, de tal manera que cuando uno pasa el mouse sobre una parte de la imagen, podamos ver una reseña de lo que esta área muestra. Ver un ejemplo.
Como se logra esto? Para este ejemplo, transformando una lista de definición html <dt></dt> en el mapa visto, usando nada más que CSS.
Pero la idea no es limitarse solamente a esto, sino entender como funcionan.
Los mapas de imagen utilizan el pseudoelemento :hover para definir un estilo diferente para cada enlace al pasar el ratón por encima. De esta manera logramos que nuevas imágenes floten encima del fondo, siempre que el usuario mueva su ratón sobre una de las áreas de enlaces invisibles.
En este enlace hay un tutorial (en ingles) que explica como se crea el mapa, paso a paso.
En este otro enlace, uno en español, que también trata, de una manera muy detallada, el tema.
