Fun CSS effects for web maps
Last year I started playing around with CSS filters in my 3D mapping projects. I realized that with just a few lines of CSS you can create some really cool effects, so I decided to share them in this blog post.
Vintage photo style
The vintage photo style on a real-time 3D map is neat because we’re only used to this type of filter in static images. The fact that you can interact with the map is what makes this effect pretty cool. Explore Berlin in this vintage style and see for yourself: https://ralucanicola.github.io/css-3d-maps/berlin-palace/.
Taking a web scene and turning it into a vintage style is a few lines of CSS code away: first set a sepia() filter on the canvas (I also make it a bit darker with the brightness() filter, otherwise it looks overexposed). Additionally I added a vignette using an inset box-shadow .
Let it snow!
Snow effects are pretty cool and easy to fake with CSS animations. By changing the size of the snow-flakes it even creates a depth effect. I followed this tutorial and added some snow to a 3D map of a mountain region:
In CSS I added a div.snow element that covers the map. I set pointer-events:none because I don’t want this element to intercept mouse events and prevent the user from navigating in the map.
Next I use 3 div elements with background set to snowflake images. The snowflakes have different sizes and they are animated with different speeds to create the depth effect. A keyframe animation with 2 steps is created to move the image to the bottom of the screen.
Rotate the hue for an Andy Warhol style
Last year I had some fun creating a visualization of four globes in an Andy Warhol style…what better feature to do that than the hue-rotation() CSS filter? This is what came out:
This time I am changing the filter value with JavaScript by setting the hue-rotate(angle) to the angle that the user sets in the slider:
Fake shadows till you make it
The drop-shadow() CSS filter is really cool because it casts a shadow of the shape of the image element and not of the bounding box of the element (like box-shadow). It does that by creating a blurred, offset copy of the image alpha channel. So if we combine it with a web scene with a transparent background…magic happens: we get shadows cast by the map features 😍
In the scene below I have a view with a transparent background and then I’m setting the drop-filter directly on the canvas:
And that’s about it, I hope you found some inspiration and now you’ll start playing with CSS effects in your own mapping projects 🙂
Have fun 3D mapping!
