DEV Community

Cover image for Divtober Day 27: Film
Alvaro Montoro
Alvaro Montoro Subscriber

Posted on

12 2

Divtober Day 27: Film

Day of the word is "film", so here is a clapperboard (a.k.a. slate) needed in every film set to help with the audio/video synchronization. It animates a little on hover.

It uses perspective to simulate the 3D, but there's more to it: as the clapperboard is drawn with a single HTML tag we don't have enough elements to go "full 3D." The solution was using shadows and stacking them in a way that provides a fake sense of perspective (on top of the CSS perspective.)

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay