Divilicious Flipper – A CSS 3D Flipbox

November 22, 2015

This all started out with the idea of turning a Divi module into a 3D css flipcard (flipper, flipbox or whatever you call it). After figuring out how do code up a flipcard at codepen with great and easy success, I tried to apply the lesson to various Divi modules without success. Giving up early after somebody suggested to use a shortcode, I decided to create a Divi  Licious Flipper shortcode.

This exercise went pretty well until I started over complicating it by adding in various options one would expect users to want/need. Take size for example. Not everybody is going to want a pre-set flipper size. Then consider whether to use a graphic or solid color for the front and or back of the flipbox. Then comes text, both title and content text sizes and color.

Does it need a read more link or not. I decided yes, and hard coded it it. Later I decided no and made it an option, discovering in the process that I lost the ability to exactly position it at the bottom of the content, so I put it back in. a better developer would have made it optional and I was going to go that direction until I took a peek at codecanyon and found these:

And more! Those cost money. This is free to do whatever you feel like with it.

Knute Rockne

Baseball

We count on winning. And if we lose, don’t beef. And the best way to prevent beefing is – don’t lose.

Read More

Knute Rockne

Usage:
Use shortcode:

“Make My Day”

From the movie Dirty Harry

Read More

Clint Eastwood

Lau Tzu

Being deeply loved by someone gives you strength,

while loving someone deeply gives you courage.

Read More

© all rights reserved

“Mustard Man”

Coming to a town plaza near you

Flash Buddy

Read More

Flash Buddy

Learn to Cook

Have you always wanted to know how to cook fabulous meals? My cooking classes offer you the opportunity to learn how to prepare some of your foods and favorite menus with less fat, sodium and preservatives.

Read More

2 Week Course!

Usage:
Use shortcode:

Nature

The woods are lovely, dark and deep. But I have promises to keep, and miles to go before I sleep.

Read More

Robert Frost

Usage:
Use shortcode:

Los Angeles

L.A., it’s nice, but I think of sunshine and people on rollerblades eating sushi. New York, I think of nighttime, I think of Times Square and Broadway and nightlife and the city that never sleeps.

Read More

Jimmy Fallon

Usage:
Use shortcode:

mailbox email subscribe

Subscribe for Divi Freebies

Plugin update notifications :: stay abreast of new and or updated items by opting in to my very occasional email newsletter. I swear by all that is right and holy your email address will never be shared, sold, traded or otherwise abused and I seriously doubt you'll see anything more than plugin/code update notifications when they are of the utmost importance.

 

Tip Jar

Send a Gratuity

Your generosity is greatly appreciated 🙂


Credit Cards


Loading...

Give a Shout Out

7 + 3 =

Pin It on Pinterest