A couple of months ago we shipped the new version of Abduzeedo to our readers - a new post detailing the impetus and features of the new site is forthcoming. In a nutshell, our main goal was to simplify and reduce as much as we could. One of the areas we decided to invest our time was in subtle little effects like night mode with a dark theme and CSS rollover effects over images. The latter one has been praised by a number of our readers and we have received quite a few requests asking how we did it, so I will try to lay it all out here in this post.
The image shadow rollover effect is quite straightforward. It was inspired by the new Apple TV visual language in which they use long and colorful shadows for selected items as well as a lot of Dribbble references. The visual design community has embraced that and I love the effect so I decided to recreate it.
The outcome is pretty much CSS box-shadow and Javascript to extract colors of the images.
Design
When I was designing the site in Sketch I started playing with some ideas of using dramatic shadows that I used when I was designing my personal site. Here’s an example (http://fabiosasso.com/labs/newsite/) of long shadows for text.
The cool thing about Sketch is that the shadow property is pretty much the same as in CSS. That gives us the opportunity to try several variations until we got the result wanted. I played with tons of shadows, different opacities like you can see in the image above. My final CSS was something as simple as:
box-shadow:
0 4px 4px rgba(0, 0, 0, .1),
0 8px 8px rgba(0, 0, 0, .1),
0 16px 16px rgba(0, 0, 0, .1),
0 32px 32px rgba(0, 0, 0, .15),
0 64px 64px rgba(0, 0, 0, .15);
That CSS creates the shadow effect, now I just needed to put it on the “hover” state and that’s it. But in order to make it smooth I also used the CSS transition just for the box-shadow.
transition: box-shadow .3s ease-out;
For a regular black shadow that was enough, but I wanted to use some color extracted from the image to use as the CSS box color. To do that I used Javascript and a library called Vibrant.js.
“Vibrant.js is a javascript port of the awesome Palette class in the Android support library.”
The library extract up to 6 colors:
- Vibrant
- Muted
- DarkVibrant
- DarkMuted
- LightVibrant
- LightMuted
The final thing to do was to select all images and extract the colors, then replace the RGBA() from the css to the one from the image. If the process is done in the client it might take a little longer depending on the image size, because of that we render a small image to use for the color extraction. Also, the fact that the effect only shows during rollover helped us to have a bit more time to do everything in the background.
Of course nothing is perfect. We are still trying to fix some bugs. The script returns 'undefined' when the image doesn’t provide the specific color. That becomes quite difficult to predict because we never know the outcome, so sometimes you might see some weird colors.
We are also fine-tuning the best configuration to improve the speed, one of the goals is to move from client to server so the colors are extracted and stored in the DB. That would significantly reduce the time of the extraction. We just need to learn how to do that :)
