Helveticards - 100% CSS playing cards

http://zachwaugh.com/helveticards/index.html

by duck • 14 years ago

76 39 14 years ago

skrebbel• 14 years ago

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

Gurrewe• 14 years ago

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

tjohns• 14 years ago

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/

ChrisNorstrom2• 14 years ago

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.

icebraining2• 14 years ago

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).

aidenn0• 14 years ago

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

uberryan6• 14 years ago

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

julien_c2• 14 years ago

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

julien_c2• 14 years ago

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

antidaily• 14 years ago

Perhaps but those look like shit.

zachwaugh2• 14 years ago

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.

aclimatt• 14 years ago

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!

uberryan6• 14 years ago

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

k33n• 14 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.

zachinglis3• 14 years ago

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.

uberryan6• 14 years ago

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.

uberryan6• 14 years ago

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

Falling3• 14 years ago

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

tantalor2• 14 years ago

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

ChrisNorstrom2• 14 years ago

:( 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?

valnour• 14 years ago

Works for me in Firefox 15.0.1 on Linux.

akdetrick• 14 years ago

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.

icebraining2• 14 years ago

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

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

balac• 14 years ago

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

zachwaugh2• 14 years ago

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.

rootedbox• 14 years ago

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

tantalor2• 14 years ago

Where's the license file?

FlukeATX• 14 years ago

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

javajosh• 14 years ago

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!)

ck2• 14 years ago

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.

wanghq• 14 years ago

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

geon• 14 years ago

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

antihero• 14 years ago

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

Helveticards - 100% CSS playing cards

Related Stories