Expresando TI

Otro tut rápida. Aquí hay algo sencillo y agradable usar el poder del CSS ... pero era concibian difícil (y seguramente no era yo), para empezar. Adición de Sombra, podría ser un pedazo de pastel para muchos de nosotros, usando algunas herramientas de edición de imágenes como Photoshop ANF fuegos artificiales, etc
La razón por la cual, he optado por el uso de CSS sombra es que, por lo general, mientras que la creación de un diseño de página / HTML de una aplicación, los requisitos de mantener la iteración. Lo que quiero decir es, en un sitio web existente con muchas imágenes, como las que muestran la lista freinds o una galería de imágenes, que será difícil volver a procesar toda la carga de las imágenes que ya habían sido descargadas para agregar o quitar las sombras, para que materia.
Así que si usted ha hecho un poco de visión de futuro al crear los htmls para añadir estas divisiones adicionales o por lo general la situación es que usted tiene una lógica de bucle generación de estos iconos o imágenes en miniatura en XSL, PHP. Java o cualquier otro lenguaje de programación / scripting, se puede añadir en cualquier momento, entonces es sólo la cuestión de mostrar y ocultar las sombras mediante la propiedad CSS Display, de acuerdo con las cambiantes necesidades de los clientes cada vez ... yo no te has hecho este tipo de visión de futuro antes de esto ... pero ahev empieza ya!

En el siguiente ejemplo, la imagen original es libre de sombras y los dropshadows se aplican según sea necesario! Además, he ido un poco más, mediante el uso de los trucos de mi anterior Tut (bien! estos probablemente son las más cortas variedad de tutoriales, por lo que sólo se justifica que califica de "Tut" 's) sobre uso de la propiedad CSS clip para mostrar sólo

Imagen original

CSS Resultados DropShadow

Ver demo | Descargar SourceFiles