Personal Card v2

Tags

1. 7 card
2. 2 personal
3. 1 css3
4. 1 webkit

13 Responses

1. Pro Jonatan Castro

   I just uploaded a new version of my personal -digital- card with a bit of info about me and my networks. It's based on the demo from webkit "CardFlip". Only safari 4 compatible for now (yes, it's WIP and I know it can be optimized!). See the live version here: jonatancastro.com

   Btw, it should work great on iPhone/iPad

   over 1 year ago

2. Pro Rogie

   Dude, you are a stud! Way to get it to flip! I actually have a dev version of rogieking.com that does the same, but you beat me to it! Lovely site and awesome flip icon.

   The only thing I don't like is the "email me" inset text. Just doesn't seem to fit.

   over 1 year ago

3. Manolo Sañudo

   Saw it yesterday, it's awesome! Great job man!! :D

   over 1 year ago

4. Pro Rasmus Nielsen

   Works like a charm on my iPhone and fits perfectly. Glad you could use the cutout.

   over 1 year ago

5. Pro James Gill

   That is HAWT. Almost everything about this is beautiful, although I gotta agree with Rogie, the "email me" inset text looks a little out of place. I think the "flip" button makes up for it though.

   over 1 year ago

6. Pro Miro Keller

   Very beautiful! But what is supposed to happen when you click the "Safari" link?

   over 1 year ago

7. Michaël Villar

   Why is the text displayed even if we are on Safari? :)

   over 1 year ago

8. Rude

   Amazing! but it doesn't even work in Firefox, you should find a workaround for that :-P

   over 1 year ago

9. Pro Jonatan Castro

   @Miro, @Michael: it was just a div showing the alert, I need to add a script that will showing depending on the browser you're using!.

   @Rogie: yeah you're right I need to find something else to match the style. Thank you!

   @Rude: yep I know, I don't think the flip thing can be done in firefox yet, but I guess I could make degrade nicely. I'm learning!

   over 1 year ago

10. Buck

    Jonatan: Looks awesome. Loads of fun! Plus, I always love the 2 px panel gap button style on round buttons. So nice.

    It's actually relatively easy to get it to degrade nicely in Firefox:

    add
    
.card.flipped .face { z-index: 2; }
.card.flipped .back { z-index: 3; }

    to your base.css file. That should do the trick. You might need to add z-index: 3; to .face and z-index: 2; to .back as well, not sure.

    over 1 year ago

11. Pro Jonatan Castro

    Thanks a lot Buck! Will give it a try.

    over 1 year ago

12. Pro Dylan W.

    Candy on my iPad. Nice work!

    over 1 year ago

13. Malte Müller

    so beautiful and slick. love it.

    over 1 year ago