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!
Day 43 – Valentine