CSS Drop Caps – M
See the Pen Drop M by Chris Lowe (@alltimelowe) on CodePen.
M is for Monolith. I’m a huge science fiction fan, especially 2001 A Space Odyssey. This drop cap is inspired by the monolith that appears throughout the film and books—a black obelisk that acts as a catalyst for evolution.
Set in Anton from Google Fonts, a typeface inspired by traditional advertising. The M specifically feels like it has physical weight. The effect achieved here is that of a rising sun. By animated three things I think I’ve pulled it off. The background colour animates from a soft yellow/blue gradient to pure blue sky, mimicking the sky in the early morning. The shadow cast by the M is a pseudo element skewed and positioned to get the right look, also animating in sync with the background. Finally, a soft highlight on the face of the M animates from the ground up following the sun.