Search

ABDZ CSS box-shadow rollover effect

Ad

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:

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 :)

Written by

I'm a Brazilian product designer based in Oakland, California currently working for Google as a Staff Designer. I am also the founder of Abduzeedo, an award-winning digital publication about design and a personal project that has become the source of inspiration for millions of designers and enthusiasts.

Ad

Related

We all know that hyperrealist icons are over, the new trend now is flat and either hard shadows or super soft and subtle ones. You can also try to mix both styles, there are a lot of people actually doing that and the results are quite beautiful. With that in mind I decided to give it a try in Illustrator and recreate this effect.
So in this tutorial I will show you how to create a simple soft shadow effect uing the Blend Tool in Illustrator. We will also use the 3D features to create some sublte 3D effects.

Back to my image a week after a short vacation, much needed. I have also been spending my time with the new Abduzeedo which is looking much sleeker and soon will be going live. This week I decided to recreate an effect I saw a couple of weeks ago and I saved the screenshot because I thought it would be awesome to know how to do it. After a few tries I think I got a good result, at least worth sharing with you guys.
Step 1
Starting with the simple path of the Abduzeedo logo in Illustrator.

The last tutorial I wrote was back in January, it's been quite a long time and boy I missed it. I have been trying to organize myself to start playing more with not only Photoshop and Illustrator but also Sketch and other tools so I can share some new things with you. It's always a challenge due to my day to day job but it makes me feel so good when I finish something that went from my head to the final design in a very short period of time. Quite refreshing.