7 ms·

There's one card face missing. That's the back! A nice card back might be a more difficult challenge to do in HTML5.

adam12 11y ago
It's done in CSS3 + JS, so it should be pretty easy. https://desandro.github.io/3dtransforms/examples/card-01.html https://desandro.github.io/3dtransforms/examples/card-01.htm... #card.flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); }
- chrisseaton 11y ago
  He means drawing the complex decorative design on the back of most cards.
- kenbellows 11y ago
  Sure but implementing the card back image is more difficult, which is what I think the parent post was getting at, rather than the flipping itself. The rest of the page is implemented without any images, which is neat; you'd have to work some SVG magic or something to create e.g. a Bicycle-esque card back without loading an image.
  - jameshart 11y ago
    http://lea.verou.me/css3patterns/ http://lea.verou.me/css3patterns/ could provide a pretty good source for patterned card backs.
    - adam12 11y ago
      Nice http://lea.verou.me/css3patterns/#marrakesh http://lea.verou.me/css3patterns/#marrakesh
    - pakastin 11y ago
      Thanks, that's great source!
  - adam12 11y ago
    Displaying an image on a web page shouldn't be that difficult. I like the svg suggestion. https://commons.wikimedia.org/wiki/Category:SVG_playing_cards https://commons.wikimedia.org/wiki/Category:SVG_playing_card... https://upload.wikimedia.org/wikipedia/commons/d/d4/Card_back_01.svg https://upload.wikimedia.org/wikipedia/commons/d/d4/Card_bac...
    - kenbellows 11y ago
      It's not about difficulty, it's just fun to try and do it with only web elements, and bonus points for strictly CSS
  - pkstn 11y ago
    I don't see any problem using couple of SVG image files for example.. The problem is that I'm not such a great drawer myself. In the first version I just used big J, Q, K like this: http://pakastin.fi/cards_2006 http://pakastin.fi/cards_2006
teddyh 11y ago
The two joker card are also missing for it to be a complete deck.
- pkstn 11y ago
  :D
- pakastin 11y ago
  Try clicking all kings in a row.. ;)
ricket 11y ago
I had the same thought. You could practice magic tricks if you could flip over the deck and then shuffle and fan it! "Pick a card, any card!"
- derrickdirge 11y ago
  This would only work for a very small subset of card tricks. It would be difficult to practice sleight of hand.
- pakastin 11y ago
  I will add flipping ;) Only thing about is that it easily looks like crap. I mean if you don't curl & flip the card looks too solid..but I'll check it out.
pakastin 11y ago
Backside added! https://deck-of-cards.js.org/ https://deck-of-cards.js.org/

It's done in CSS3 + JS, so it should be pretty easy. https://desandro.github.io/3dtransforms/examples/card-01.html https://desandro.github.io/3dtransforms/examples/card-01.htm... #card.flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); }

chrisseaton 11y ago
He means drawing the complex decorative design on the back of most cards.
kenbellows 11y ago
Sure but implementing the card back image is more difficult, which is what I think the parent post was getting at, rather than the flipping itself. The rest of the page is implemented without any images, which is neat; you'd have to work some SVG magic or something to create e.g. a Bicycle-esque card back without loading an image.
- jameshart 11y ago
  http://lea.verou.me/css3patterns/ http://lea.verou.me/css3patterns/ could provide a pretty good source for patterned card backs.
  - adam12 11y ago
    Nice http://lea.verou.me/css3patterns/#marrakesh http://lea.verou.me/css3patterns/#marrakesh
  - pakastin 11y ago
    Thanks, that's great source!
- adam12 11y ago
  Displaying an image on a web page shouldn't be that difficult. I like the svg suggestion. https://commons.wikimedia.org/wiki/Category:SVG_playing_cards https://commons.wikimedia.org/wiki/Category:SVG_playing_card... https://upload.wikimedia.org/wikipedia/commons/d/d4/Card_back_01.svg https://upload.wikimedia.org/wikipedia/commons/d/d4/Card_bac...
  - kenbellows 11y ago
    It's not about difficulty, it's just fun to try and do it with only web elements, and bonus points for strictly CSS
- pkstn 11y ago
  I don't see any problem using couple of SVG image files for example.. The problem is that I'm not such a great drawer myself. In the first version I just used big J, Q, K like this: http://pakastin.fi/cards_2006 http://pakastin.fi/cards_2006

teddyh 11y ago

The two joker card are also missing for it to be a complete deck.

pkstn 11y ago
:D
pakastin 11y ago
Try clicking all kings in a row.. ;)

ricket 11y ago

I had the same thought. You could practice magic tricks if you could flip over the deck and then shuffle and fan it! "Pick a card, any card!"

derrickdirge 11y ago
This would only work for a very small subset of card tricks. It would be difficult to practice sleight of hand.
pakastin 11y ago
I will add flipping ;) Only thing about is that it easily looks like crap. I mean if you don't curl & flip the card looks too solid..but I'll check it out.

pakastin 11y ago

Backside added! https://deck-of-cards.js.org/ https://deck-of-cards.js.org/