Danielly D Aldana
Creating a Tint Preview
User who arrive at Zenni.com will eventually select a pair of glasses to purchase. When they land on a pair, there are limitless options to their lens, even being able to select a color tint and/or a mirror finish yet not with a preview. The plan was to implement a more realistic mirror and gradient look to be accommodate each available color swatch. The challenge was to accurately portray a finish/tint and NOT use any blending modes, as this is not supported by older browsers that are incompatible with newer CSS. But we did want to see the frames' temple arms to appear. In this project, I worked with the procurement team over a few iterations to execute this preview, to for color accuracy and reflective portrayal for each lens. The output to deliver would be just a simple code snippet with the css ready to go for development. This now live on the site at www.zenni.com.
More Updates
I worked meticulously with the merchandising team to color match so that the temple arms would appear through the lens, delivering a css text update for dev to update seamlessly.
/* Silver Mirror */
position: absolute;
width: 1499px;
height: 486px;
left: 0px;
top: 0px;
background: radial-gradient(30.95% 62.45% at 49.97% 21.3%, #B5B5B5 0%, rgba(119, 131, 134, 0) 100%), linear-gradient(181.91deg, #7A7A7A 9.32%, rgba(48, 48, 49, 0.93) 66.52%, rgba(73, 74, 74, 0.51) 98.15%);
/* Indigo Mirror */
position: absolute;
width: 1499px;
height: 486px;
left: 0px;
top: 0px;
background: radial-gradient(30.95% 62.45% at 49.97% 21.3%, #6A0FC5 0%, rgba(168, 171, 225, 0) 100%), linear-gradient(181.91deg, #2506A7 9.32%, #6E47DF 28.46%, #474DE1 46.22%, rgba(33, 86, 189, 0.83) 66.01%, rgba(76, 73, 185, 0.66) 76.16%, rgba(205, 158, 68, 0.62) 98.15%);
/* Gold Mirror */
position: absolute;
width: 1499px;
height: 486px;
left: 0px;
top: 0px;
background: radial-gradient(30.95% 62.45% at 49.97% 21.3%, #F4FF78 0%, rgba(186, 151, 61, 0.05) 100%), linear-gradient(181.91deg, #A37C32 30.72%, rgba(151, 122, 18, 0.96) 63.92%, rgba(103, 103, 103, 0.5) 98.15%);
/* Red Flame Mirror*/
position: absolute;
width: 1499px;
height: 486px;
left: 0px;
top: 0px;
background: radial-gradient(30.95% 62.45% at 49.97% 21.3%, #FCC536 0%, rgba(186, 99, 61, 0.05) 100%), linear-gradient(181.91deg, #71321D 30.72%, rgba(151, 56, 18, 0.96) 63.92%, rgba(103, 103, 103, 0.5) 98.15%);
border: 0.5px solid #B3B6BB;
box-sizing: border-box;
/* Rose gold Mirror */
position: absolute;
width: 1499px;
height: 486px;
left: 0px;
top: 0px;
background: radial-gradient(30.95% 62.45% at 49.97% 21.3%, #DABBA6 0%, rgba(186, 106, 61, 0.05) 100%), linear-gradient(181.91deg, #90776C 30.72%, rgba(138, 122, 122, 0.89) 63.92%, rgba(103, 103, 103, 0.5) 98.15%);
/* Moss Green Mirror*/
position: absolute;
width: 1499px;
height: 486px;
left: 0px;
top: 0px;
background: radial-gradient(30.95% 62.45% at 49.97% 21.3%, rgba(147, 212, 131, 0.9) 0%, rgba(67, 139, 55, 0) 100%), linear-gradient(181.91deg, #435D21 30.72%, rgba(41, 89, 33, 0.87) 63.92%, rgba(136, 139, 136, 0.5) 98.15%);
border: 0.5px solid #B3B6BB;
box-sizing: border-box;
/* Lavender Mirror */
position: absolute;
width: 1499px;
height: 486px;
left: 0px;
top: 0px;
background: radial-gradient(30.95% 62.45% at 49.97% 21.3%, #E8A8FF 0%, rgba(119, 131, 134, 0) 100%), linear-gradient(181.91deg, #433D74 30.72%, rgba(109, 94, 169, 0.87) 63.92%, rgba(136, 136, 139, 0.5) 98.15%);
border: 0.5px solid #B3B6BB;
box-sizing: border-box;
/* Sky Blue Mirror */
position: absolute;
width: 1499px;
height: 486px;
left: 0px;
top: 0px;
background: radial-gradient(30.95% 62.45% at 49.97% 21.3%, #36AEFC 0%, rgba(61, 126, 186, 0.05) 100%), linear-gradient(181.91deg, #215A5D 30.72%, rgba(34, 87, 137, 0.87) 63.92%, rgba(159, 149, 54, 0.5) 98.15%);
border: 0.5px solid #B3B6BB;
box-sizing: border-box;
background: linear-gradient(157.04deg, #337E9D 10.58%, #74D1E0 29.21%, rgba(67, 214, 234, 0.97) 38.53%, #39C0B8 65.71%, #6AB4C8 85.12%) !important;
}