Kind of surprised to find this on here today. I made it about two years ago as a quick hack, and haven't touched it since. I used unicode glyphs because I didn't see any benefit of recreating those in CSS. Was planning on adding the backsides so you could flip them over, but never got around to it.

This looks like absolutely positioned bits of text with unicode glyphs inside divs with a box shadow and border radius. Am I missing something?

Not that the execution or idea are bad, but I don't understand why this is on the front of HN today.

With that said, I do think that the use of unicode characters is a much better move than using some crazy css tricks to draw the suit symbols.

Shame they didn't implement a Baraja[1]; now there's a challenge!

[1]: http://en.wikipedia.org/wiki/Baraja_(playing_cards)

That would be awesome, I started making a chinchon game a while back and a baraja set in CSS would be awesome to have.

This looks impressive, until you realise that the jack, clubs, spades and diamonds are simply unicode glyphs present in many system fonts.

At first, I thought this was a repost of the "Helveticards" physical card deck that was released a while ago. It's not, but worth a look if 're a typography fan (or just like good design):

http://helveticards.ryanmyers.me/

That is an example of terrible design, combining the two biggest no-nos in playing card design: Full Bleed and Asymmetric backs.

Yeah, Ryan (uberryan) the creator of those cards is kind of pissed about the OP using the same name. As you can tell from the comments below, he's doing some kind of weird passive-aggressive attack on the OP. And I'm eating popcorn & watching how the whole thing unfolds. Knowing HN's stance on ideas/IP/Patents I don't think HN is going to side with Ryan.

I don't think you can assert the stance on names from a stance on copyright or patents; they're very different issues. Trademarks can be abused, but they're much less problematic and create a direct, tangible benefit to the consumer (not getting defrauded by fakes).

Aw I was hoping for some intricate CSS version of the backs of the cards.

And the face cards. Where's my suicide king?

:( Why didn't you use border-radius and box-shadow? They would look much more realistic if you did.

EDIT: The rounded corners and box shadow aren't showing up in Firefox 15.0.1 for Windows 7 for me. Anyone else?

Works for me in Firefox 15.0.1 on Linux.

I think this could be improved by not using any classes on the spans and instead in the stylesheet using nth element rules to define each card?

It would reduce the html weight. Just plain spans or divs.

I guess it would be a problem for older browsers http://caniuse.com/css-sel3 darn IE always holding us back.

This would be awesome if the Jack/King/Queen/Ace etc had some neat playing-card style face design done with CSS.

More like 50/50 html and css. All the symbols are text. ♣♦♠♥

I only see 52 cards. Can you make the missing two?

I actually thought this was going to be a link to a card game that teaches people CSS!

(Which is a pretty nifty idea, if I do say so myself!)

This would actually be cool if the characters where made out of CSS-styling too. Now, it's not.

Where's the license file?

Here: https://github.com/zachwaugh/Helveticards

well it's helvetica on a mac.. should pay for a license so it works on all platforms.. just sayin.

Unfortunately, this is in licensing infringement with the actual Helveticards (helveticards.ryanmyers.me). I have contacted the creator and informed him of the conflict.

What? First, I'm pretty sure you're the creator so you don't have to be noble about it.

Second, the word "Helvetica" is trademarked in reference to a font or a software program relating to fonts. So unless he plans on selling a font called Helvetica, he can write the word as much as he pleases. It's the Latin name for Switzerland.

Third, until you trademark the term Helveticards and he starts offering a product in a similar likeness, this discussion is between him and Linotype. Stop trying to peddle your own product. Too bad, because I actually like your cards!

My goal wasn't to peddle my product. It was more to protect the existing brand that I've created around the product.

While you aren't completely correct in your second point (as I found out in my own dealings with LinoType), I do want to take a moment to apologize. I'm sorry for barging in a causing raucous that could have easily been handled privately.

To all, please accept my apology for lack of tact. You live, you learn, you do better next time.

Regards, Ryan Myers

> I have contacted the creator and informed him of the conflict.

Seriously, there's more than a lack of tact there.

I created this before I ever heard about the playing cards of the same name, and actually meant to change the name (check out the last line of the readme - https://github.com/zachwaugh/Helveticards/blob/master/readme...).

Happy to change the name though, this was just a quick, weekend hack about two years ago.

I'm not sure why you reacted this way. You're the creator, and the designs are wildly different. There's no licensing infringement with you because you aren't Linotype, and this project is not for profit.

I'm sure you're a nice enough guy in the real world, but you certainly came off badly here.

Licensing infringement over what? A possible Helveticards trademark? (The designs don't look similar at all)

At least in the US, there is no trademark over name Helveticards (http://www.uspto.gov/trademarks/process/search/#heading-1)

To use any version of the 'Helvetica' name in a product or object, LinoType must issue a license. I, myself, received a cease-and-desist from their legal team if I didn't acquire a licensing agreement, which I did. I didn't say I had a trademark. All that would do is disallow usage of the Helveticards mark that I designed.

That isnt a licensing agreement with helveticards, that is a possible licence issue with linotype

Erm. Wow.

This is CSS demo that was purely meant to be a learning/teaching exercise. There is absolutely no competition.

But how about rather than complaining that someone else 'took your name', though yours is obviously equally inspired from LinoType you work on building a better business?

I know I personally bought your cards a few years ago and still have yet to receive them despite emails/Tweets and the like.

You're doing yourself absolutely no favours with behaviour like this. This sort of behaviour only works with giant companies, and still then it often creates bad blood for the consumer.

Absolutely agree. If you continue to read down in the thread, I apologized for addressing it at all.

Regarding your purchase, based on my records, your cards were shipped on Nov 22, 2011.

Glad to see you've apologised. I respect that. (Not often I see people do that, rather than burying themselves deeper.)

And as the 4 emails and one tweet I have sent you over the years, I never received them.

I'd be happy to refund your purchase if you'd like to email me directly.

Which email?

You can go to my website and contact me through there.

Perhaps but those look like shit.