Day 43 – Valentine

Happy Valentine’s Day!

Today’s page was all css… until I found out that the hover was not working for mobile! Oh no… so I added some jQuery to animate the card when clicking.

I saw this great example of a business card and wanted to make it into a Valentine’s Day card. I thought it would be some simple css transformations but wow, it was tricky! I struggled with making the shapes of the envelope, then with the changes in z-index so the outside of the envelope would cover the card then hide behind as it was opened. The z-index change would be too fast, and then it would be too slow. Then I would get confused thinking something was moving when it was actually something else causing it to look that way… eek! To the people who create animations purely in css… so much respect!

There’s still the problem of the envelope becoming ‘transparent’ once the card moves up, but overall I like my little Valentine heart card!
Screen Shot 2015-02-26 at 10.01.52 PMDay 43 – Valentine


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s