Dec
9
2010

Order Tara's Bicycle Touring Cookbook Today!

Postcards from Paradise

by Going Slowly

This is the first entry in a series of e-postcards for our friends and family. Hovering on the cards makes them flip over, showing the picture on the other side. It'll work, but it won't look cool in Internet Explorer (the worst browser ever), so get Google's Chrome or Mozilla's Firefox or Apple's Safari if needed!



Hi Mom & Dad! :-)

I wish you could see this place. You would love the empty beach, the warm, meditative waters, and all the fresh fruit available here. Dad, they have the best papaya I've ever tasted!!! Oh and I think you would like this sweet, soulful doggie who was flopped out on the floor while we ate our lunch today.

We miss you. We love you! – Tara & Tyler

Lazy Phú Quốc Doggie

Dad & Sarah,

I really think you guys should come here someday! I mean look at it, THERE IS NO ONE ELSE ON THIS BEACH. When we get home (only a few more months to go!), we'll watch the kids so you two can go on vacation. Please give everyone a huge hug from us!

lots of love,

            T & T

Sunset on Phú Quốc

Hi Mama!

We hope this note finds you warm and comfortable, maybe snuggled up with Eli, on what is sure to be a snowy, frigid day in Minnesota. If you ever decide to get out of dodge, as you often threaten to do… you could come here instead! The chairs are comfy and the view is great. We miss you!

love and hugs, Tyler & Tara

Beach Chairs & Shell Garland
Previous Entry
-
Next Entry
-
G
Topics:

6 comments

This is a really awesome technique. Creative coding or an add on? Thanks for sharing, as usual
Posted by Carole on January 25th, 2011 at 4:44 PM
Super fun, what's the secret?
Posted by Magalie on January 25th, 2011 at 4:52 PM
Creative coding, I suppose!

The flipping effect uses jQuery to control a CSS transform. This is made easy with rotate3Di.

When the postcard reaches the halfway point of its rotation, it is effectively invisible (imagine trying to look at the profile of a piece of paper). At that point, the postcard content is swapped for the image "behind" it. As the second half of the rotation happens, the image appears in the same manner the postcard disappeared, giving the effect of a flip.

The text on the postcards is a font from Font Squirrel. In the last year or so, the CSS spec for @font-face support (embedding fonts in browsers) has matured enough to be used in production. Rather than creating a unique image for each postcard, I am using a background image (the postcard) with fancy text on top.
Posted by Tyler on January 26th, 2011 at 3:50 AM
It's quite amazing what can be done with CSS these days! Great job combining it all together :)
Posted by Magalie on January 26th, 2011 at 3:53 AM
beautiful!
Posted by Emily B on January 26th, 2011 at 12:02 PM
This is really, really cool, I love it! You guys never fail to impress : )
Posted by Kris on January 26th, 2011 at 1:34 PM