5 ms·

Each of these cards could probably be made with one element and some CSS3 pseudo-element selectors, as opposed to the four elements (wrapper element and three c

Each of these cards could probably be made with one element and some CSS3 pseudo-element selectors, as opposed to the four elements (wrapper element and three child elements) that are currently used per card. Additionally, with three elements (possible just one if you're crazily good at CSS), it'd be possible to have flippable cards. Still just using CSS3. Edit: Can someone explain these downvotes for me?

pakastin 11y ago
I suck at pseudo-elements – that's why.. :)
- pauly 11y ago
  Great work, I love this. Here is a quick playing card example with pseudo elemenets view-source:http://www.clarkeology.com/card.html http://www.clarkeology.com/card.html
  - indubitably 11y ago
    That’s nice CSS but the HTML is so borked… why not <div class=card data-value="A" data-suit="︎">︎</div> Or something?
    - pauly 11y ago
      I did have that originally, but <card /> worked in my browser so i ran with it... I'm sure card[suit=$] with a unicode character is not super widely supported css anyway...
    - femto113 11y ago
      On the "least amount of HTML possible" theme here's a version using only "class", e.g. <p class="2 ︎"/> http://codepen.io/femto113/pen/avzWJq http://codepen.io/femto113/pen/avzWJq Doesn't include the card centers, but does have top and bottom corners. EDIT: HN doesn't seem to like unicode characters? The class should include the suit symbol.
      - pakastin 11y ago
        I think I'll stick with good old elements :) Thanks anyway, and I really appreciate true CSS ::-wizards, don't get me wrong.. ;)
esprehn 11y ago
Browsers implement pseudo elements using actual elements internally, there's no difference in power from using ::before or just putting a <span> as a child. Pseudo elements will probably be a little bit slower though.
- pakastin 11y ago
  I agree. Some people rant about me using "value | 0" instead of "Math.floor(value)" and another would do "::before {content: attr(data-value..." -stuff instead of just using a good old elements.. Go figure :)

pakastin 11y ago

I suck at pseudo-elements – that's why.. :)

pauly 11y ago
Great work, I love this. Here is a quick playing card example with pseudo elemenets view-source:http://www.clarkeology.com/card.html http://www.clarkeology.com/card.html
- indubitably 11y ago
  That’s nice CSS but the HTML is so borked… why not <div class=card data-value="A" data-suit="︎">︎</div> Or something?
  - pauly 11y ago
    I did have that originally, but <card /> worked in my browser so i ran with it... I'm sure card[suit=$] with a unicode character is not super widely supported css anyway...
  - femto113 11y ago
    On the "least amount of HTML possible" theme here's a version using only "class", e.g. <p class="2 ︎"/> http://codepen.io/femto113/pen/avzWJq http://codepen.io/femto113/pen/avzWJq Doesn't include the card centers, but does have top and bottom corners. EDIT: HN doesn't seem to like unicode characters? The class should include the suit symbol.
    - pakastin 11y ago
      I think I'll stick with good old elements :) Thanks anyway, and I really appreciate true CSS ::-wizards, don't get me wrong.. ;)

esprehn 11y ago

Browsers implement pseudo elements using actual elements internally, there's no difference in power from using ::before or just putting a <span> as a child. Pseudo elements will probably be a little bit slower though.

pakastin 11y ago
I agree. Some people rant about me using "value | 0" instead of "Math.floor(value)" and another would do "::before {content: attr(data-value..." -stuff instead of just using a good old elements.. Go figure :)