Introducción
Recientemente, nos enfrentamos al desafío de crear sombras fotorrealistas para el nuevo proyecto que estamos haciendo con Little Thai. Tras una exhaustiva investigación, descubrimos que no había mucha información disponible. Nos propusimos desarrollar nuestra propia técnica utilizando el comando drop-shadow en CSS, y los resultados han sido espectaculares. Hoy queremos compartir con la comunidad cómo lo logramos, para que todos puedan beneficiarse de este avance.
Los requisitos para esta parte del desarrollo eran claros; necesitábamos sombras fotorrealistas para los productos de la tienda de Little Thai. ¿Por qué? La idea era plantear un escaparáte digital para que los usuarios pudieran comprar los productos que esta empresa ofrece. La idea de la propuesta era que se vieran los productos con una perspectiva «top-view» como si estuvieran puestos sobre una mesa. Para hacerlo más realista necesitábamos que estos ingredientes tuvieran sombras fotorrealistas. En este punto había dos opciones. Por una parte, se podía hacer con photoshop. En este vídeo se explica cómo hacerlo de esta manera. Por otra parte, se podía hacer con CSS con el nuevo comando «drop-shadow».
Esto era un reto ya que, como hemos comentado, no había información sombre cómo hacer sombras realistas en photoshop. Sin embargo, con esto nos ahorrábamos editar por photoshop las decenas de productos que hay en la tienda y. además, no estar editando cada vez que se quisiera agregar un nuevo producto. ¿Cómo se hizo entonces?
La Técnica
El comando drop-shadow en CSS es una herramienta poderosa para añadir sombras a elementos gráficos. Sin embargo, su uso no siempre es sencillo cuando se busca un efecto fotorrealista. Nuestra solución se basa en la aplicación de múltiples sombras con diferentes parámetros para conseguir un efecto más profundo y realista.
Código CSS Utilizado
A continuación, presentamos el código CSS que utilizamos para crear las sombras fotorrealistas:
filter: drop-shadow(17px 17px 13px rgba(0, 0, 0, 0.3)) drop-shadow(7px 7px 4.5px rgba(0, 0, 0, 0.3));
Explicación del Código
- Primer
drop-shadow:17px 17px 13px rgba(0, 0, 0, 0.3): Esta sombra es la más grande y difusa. Los parámetros indican una sombra desplazada 17px tanto en el eje X como en el eje Y, con un desenfoque de 13px y una opacidad del 30%.
- Segundo
drop-shadow:7px 7px 4.5px rgba(0, 0, 0, 0.3): Esta sombra es más pequeña y menos difusa que la primera. Los parámetros indican una sombra desplazada 7px tanto en el eje X como en el eje Y, con un desenfoque de 4.5px y una opacidad del 30%.
La combinación de estas dos sombras crea una sensación de profundidad y realismo que es difícil de lograr con una sola sombra.
Ejemplo Visual
Aquí tienes un ejemplo visual de cómo se ve el resultado final utilizando nuestra técnica de sombras fotorrealistas:
Es importante destacar dos puntos:
- La sombra funciona mejor sobre un tono gris suave antes que con un blanco puro.
- En este caso, las sombras están pensadas para la perspectiva «top view». En otros ángulos de fotografía no funcionará bien.
Aplicaciones Prácticas
Esta técnica puede ser utilizada en una variedad de contextos, desde imágenes de productos en tiendas online hasta elementos gráficos en sitios web corporativos. La capacidad de crear sombras realistas puede mejorar significativamente la apariencia visual y la percepción de calidad en un proyecto.
Generador de sombras fotorrealistas en CSS Online
Código
Conclusión
Estamos muy emocionados de compartir esta técnica con la comunidad de desarrolladores y diseñadores. Creemos que puede ser una herramienta valiosa para cualquier profesional que busque mejorar la estética de sus proyectos web. Nos encantaría escuchar sus comentarios y ver cómo aplican esta técnica en sus propios trabajos.
