Re:HTML5 Deck of Cards
by kenbellows on Thursday September 03, 2015 @12:13PM
(#10165764)
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.
http://lea.verou.me/css3patterns/ could provide a pretty good source for patterned card backs.
Thanks, that's great source!
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_card...
https://upload.wikimedia.org/wikipedia/commons/d/d4/Card_bac...
Re:HTML5 Deck of Cards
by kenbellows on Friday September 04, 2015 @06:27AM
(#10169609)
It's not about difficulty, it's just fun to try and do it with only web elements, and bonus points for strictly CSS
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
Re:HTML5 Deck of Cards
by chrisseaton on Thursday September 03, 2015 @12:12PM
(#10165746)
He means drawing the complex decorative design on the back of most cards.
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 ); }