The Mad Magazine Fold-In Effect in CSS

Wed, 23 Aug 2023 11:51:47 +1000

Andrew Pam <xanni [at] glasswings.com.au>

Andrew Pam
https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/

"After 65 years at Mad Magazine, comic artist Al Jaffee announced his
retirement. Jaffee was best known for his Mad Fold-Ins, where folding the page
would reveal a hidden message in the artwork. Plenty of examples can be found
on the web. The problem is, they all show the before and after statically, side
by side, which diminishes the magic (see here and here). There’s a whole
generation who may have only seen the fold-ins in this format.

Of course I had to create the paper folding effect for the web. There’s many
different ways to achieve this, but this approach is nice because:

* It’s CSS only, relying on no JavaScript.
* Uses a single image instead of requiring the image to be sliced up in
Photoshop.
* Can be configured with just HTML by setting CSS variables in a style
attribute."

Via Diane A.

Share and enjoy,
               *** Xanni ***
--
mailto:xanni@xanadu.net               Andrew Pam
http://xanadu.com.au/                 Chief Scientist, Xanadu
https://glasswings.com.au/            Partner, Glass Wings
https://sericyb.com.au/               Manager, Serious Cybernetics

Comment via email

Home E-Mail Sponsors Index Search About Us