Introducción

Recientemente, nos enfrentamos al desafío de crear sombras fotorrealistas para el nuevo proyecto que estamos haciendo con Little Thai. Después de una extensa investigación, descubrimos que no había mucha información disponible. Nos propusimos desarrollar nuestra propia técnica utilizando el comando de sombra paralela 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 Little Thai. ¿Por qué? La idea era crear una vitrina digital para que los usuarios pudieran adquirir los productos que ofrece esta empresa. La idea de la propuesta era mostrar los productos desde una perspectiva superior, como si estuvieran colocados sobre una mesa. Para hacerlo más realista, necesitábamos estos ingredientes para tener sombras fotorrealistas. En este punto, había dos opciones. Por un lado se podría hacer con Photoshop. Este vídeo explica cómo hacerlo de esa manera. Por otro lado, se podría hacer con CSS usando el nuevo comando de sombra paralela.

Esto fue un desafío porque, como mencionamos, no había información sobre cómo hacer sombras realistas en Photoshop. Sin embargo, esto nos ahorraba editar las decenas de productos de la tienda en Photoshop y, además, no tener que editar cada vez que se añadía un nuevo producto. ¿Cómo se hizo entonces?

La técnica

El comando de sombra paralela en CSS es una herramienta poderosa para agregar 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 aplicar múltiples sombras con diferentes parámetros para lograr un efecto más profundo y realista.

Código CSS utilizado

Aquí está el código CSS que utilizamos para crear las sombras fotorrealistas:

filtro: sombra paralela(17px 17px 13px rgba(0, 0, 0, 0.3)) sombra paralela(7px 7px 4.5px rgba(0, 0, 0, 0.3));

Explicación del código

Primera sombra paralela: 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 Y, con un desenfoque de 13px y una opacidad del 30%.

Segunda sombra paralela: 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 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í hay un ejemplo visual de cómo se ve el resultado final usando nuestra técnica de sombra fotorrealista:

Es importante resaltar dos puntos:

— La sombra funciona mejor en un tono gris suave que en un blanco puro.

— En este caso, las sombras están diseñadas para la perspectiva de la vista superior. En otros ángulos fotográficos, no funcionará bien.

Aplicaciones prácticas

Esta técnica se puede utilizar 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 calidad percibida de un proyecto.

Generador de sombras fotorrealistas en línea en CSS

Puedes encontrar el generador en línea en el sitio web de MandarinaWebs

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 tus comentarios y ver cómo aplicas esta técnica en tu propio trabajo.