11 ms·

Show HN: CSS Pokemon – created with clip-path and CSS variables

79 points by lukehaas 10y ago

datpuz 10y ago
Anyone notice how a website meant to showcase some CSS messed up the code display and gave it double scroll bars? Haha. The Pikachu looks great though ;)
odabaxok 10y ago
I am not sure what I am looking at. I see a big yellow rectangle. Should I be looking at the code only? Should I press a button?
- serg_chernata 10y ago
  I think it's supposed to look like a Pikachu made out of polygons. Seems to work as it should in latest version of Chrome over here. JS enabled.
- CM30 10y ago
  View it in Chrome. It appears as a Pikachu made out of shapes, like in the screenshot I took here: https://dl.dropboxusercontent.com/u/67216205/csspokemon.png https://dl.dropboxusercontent.com/u/67216205/csspokemon.png In Firefox or other browsers, it just appears as a yellow square.
  - odabaxok 10y ago
    Thanks for the screenshot.
- _ZeD_ 10y ago
  I think the old "Best Viewed With Internet Explorer" is back (only ... with chrome as the new ie)
  - taf2 10y ago
    Except chrome is open source and actually improves multiple times a year...
    - lucideer 10y ago
      Chrome is closed-source (though based on the open-source Chromium project so it can nicely claim the associated kudos of an open-source project). IE also "improved" rapidly back in the IE4/5/6 days, adding features such as CSS filters and AJAX. These "improvements" were considered much needed progress by developers at the time; later, with the wisdom of hindsight, rightly seen as proprietary extensions with little to no consideration for interoperability. And if you think the Blink team's membership of, and contributions to, WHATWG/W3C/&c. automatically ticks all the friendly interoperability boxes, you've clearly never encountered monstrosities such as https://compat.spec.whatwg.org/ https://compat.spec.whatwg.org/ (created and maintained by Mozilla)
      - taf2 10y ago
        IE 6 did not improve for many years (7?) until Firefox got them to do IE7- also comparing the parts of chrome to the parts of IE6.... I'm not sure I buy your quick dismal of the open source difference between the two engines. I can download and compile chromium which is almost identical to chrome. What equivalent did we have with IE from 2000 until today I still can't download IE and compile from source?
        lucideer 10y ago
        In terms of improvement, I was referring to IE4->IE5->IE6 I'm not really sure what you mean when you say "I'm not buying your quick dismissal": I never dismissed anything nor made out either that there is or isn't a large difference between the engines. I just corrected a statement that is definitely factually incorrect (and unfortunately believed by all too many). On the actual differences between them, Chrome may be "almost identical" to Chromium, but unless you're working for Google, or have very comprehensively disassembled it, the differences is not easy to measure. What could be tiny in binary size could still be a massive change in behaviour, particularly in terms of things like telemetry. Beyond that, they are of course not equivalent, they're just analogous. Finding a few tiny chinks in the comparison is not the same as invalidating it though. The primary analog is the approach to interop, and the resultant behaviour of the development community. Participation in standards bodies is an improvement over the IE6 days, but if you take a deeper look at Blink development, you quickly realise it's a pretty insignificant one in practice. Google controls the HTML5 spec. (the editor is a Google employee and the WHATWG is not a democratic body like the W3C), and outside of that the Blink team basically just implement what they want and specify later, rather than the reverse. The response of the development community: supporting the monopoly by ignoring interop - is pretty self-evident from links like this one.
slinger 10y ago
Awesome!
lucideer 10y ago
Edit: Major correction: it appears Firefox only supports clip-path behind a flag. Enabling this flag makes the experiment appear in Firefox. --- It's Webkit/Blink-only - no support for other browsers. It says it uses clip-path and variables, both supported in Firefox, so I see no compelling reason for this. Also viewing it in Chrome, I don't see anything that would actually require the use of clip-path or variables - arbitrary triangles have been possible in CSS since the beginning, and much more impressive drawings have been created[0][1] than this. The added animation doesn't add much. Why is this currently #6 on the HN front page? [0] http://www.subcide.com/experiments/fail-whale/ http://www.subcide.com/experiments/fail-whale/ [1] https://pattle.github.io/simpsons-in-css/ https://pattle.github.io/simpsons-in-css/
- taf2 10y ago
  Seems to work for me in mobile safari
  - lucideer 10y ago
    Edited, cheers.
  - mhurron 10y ago
    Safari is webkit.
- erlehmann_ 10y ago
  It seems to me that nowadays Webkit/Blink has replaced IE for developers not caring about interoperability – with some even going so far as to claim „IE? but nobody uses that!“.
  - Semaphor 10y ago
    Eh, it always only seems to be the case for experiments. Stuff that has no use case besides "looking fun" and probably being a fun challenge to work at. There are a few FF only, and many that are Chrome only.
  - 10y ago
6DM 10y ago
Should be called CSS pikachu unless you can somehow swap them. Good job though, better than I could do!
jaytaylor 10y ago
I found this very cool and surprisingly beautiful! I'd love to understand the techniques and processes @lukehaas used to create it.
gm-conspiracy 10y ago
Meh. This works in Firefox: http://pattle.github.io/simpsons-in-css/ http://pattle.github.io/simpsons-in-css/
blauditore 10y ago
I made another pokemon in CSS (view from behind): https://jsfiddle.net/t2mngvwn/show/ https://jsfiddle.net/t2mngvwn/show/
sauronlord 10y ago
I never realized they introduced a yellow rectangle as a Pokémon. Galaxy S7
marvindanig 10y ago
Damn cool, I just love polygon cuts! CSS has become quite powerful in the last few years. Guess we're not so far from being able to replace images/icons/logos with "design code" written in CSS in the coming ten years. Here's a book on ABCs for babies done entirely in CSS: https://bubbl.in/book/abcd-animal-book-by-judith-neumann/1 https://bubbl.in/book/abcd-animal-book-by-judith-neumann/1
- TheCoreh 10y ago
  We can sorta already do that by inlining SVGs inside CSS (but perhaps it's cheating)

79 points by lukehaas 10y ago

Anyone notice how a website meant to showcase some CSS messed up the code display and gave it double scroll bars? Haha. The Pikachu looks great though ;)

odabaxok 10y ago

I am not sure what I am looking at. I see a big yellow rectangle. Should I be looking at the code only? Should I press a button?

serg_chernata 10y ago
I think it's supposed to look like a Pikachu made out of polygons. Seems to work as it should in latest version of Chrome over here. JS enabled.
CM30 10y ago
View it in Chrome. It appears as a Pikachu made out of shapes, like in the screenshot I took here: https://dl.dropboxusercontent.com/u/67216205/csspokemon.png https://dl.dropboxusercontent.com/u/67216205/csspokemon.png In Firefox or other browsers, it just appears as a yellow square.
- odabaxok 10y ago
  Thanks for the screenshot.
_ZeD_ 10y ago
I think the old "Best Viewed With Internet Explorer" is back (only ... with chrome as the new ie)
- taf2 10y ago
  Except chrome is open source and actually improves multiple times a year...
  - lucideer 10y ago
    Chrome is closed-source (though based on the open-source Chromium project so it can nicely claim the associated kudos of an open-source project). IE also "improved" rapidly back in the IE4/5/6 days, adding features such as CSS filters and AJAX. These "improvements" were considered much needed progress by developers at the time; later, with the wisdom of hindsight, rightly seen as proprietary extensions with little to no consideration for interoperability. And if you think the Blink team's membership of, and contributions to, WHATWG/W3C/&c. automatically ticks all the friendly interoperability boxes, you've clearly never encountered monstrosities such as https://compat.spec.whatwg.org/ https://compat.spec.whatwg.org/ (created and maintained by Mozilla)
    - taf2 10y ago
      IE 6 did not improve for many years (7?) until Firefox got them to do IE7- also comparing the parts of chrome to the parts of IE6.... I'm not sure I buy your quick dismal of the open source difference between the two engines. I can download and compile chromium which is almost identical to chrome. What equivalent did we have with IE from 2000 until today I still can't download IE and compile from source?
      - lucideer 10y ago
        In terms of improvement, I was referring to IE4->IE5->IE6 I'm not really sure what you mean when you say "I'm not buying your quick dismissal": I never dismissed anything nor made out either that there is or isn't a large difference between the engines. I just corrected a statement that is definitely factually incorrect (and unfortunately believed by all too many). On the actual differences between them, Chrome may be "almost identical" to Chromium, but unless you're working for Google, or have very comprehensively disassembled it, the differences is not easy to measure. What could be tiny in binary size could still be a massive change in behaviour, particularly in terms of things like telemetry. Beyond that, they are of course not equivalent, they're just analogous. Finding a few tiny chinks in the comparison is not the same as invalidating it though. The primary analog is the approach to interop, and the resultant behaviour of the development community. Participation in standards bodies is an improvement over the IE6 days, but if you take a deeper look at Blink development, you quickly realise it's a pretty insignificant one in practice. Google controls the HTML5 spec. (the editor is a Google employee and the WHATWG is not a democratic body like the W3C), and outside of that the Blink team basically just implement what they want and specify later, rather than the reverse. The response of the development community: supporting the monopoly by ignoring interop - is pretty self-evident from links like this one.

slinger 10y ago

Awesome!

lucideer 10y ago

Edit: Major correction: it appears Firefox only supports clip-path behind a flag. Enabling this flag makes the experiment appear in Firefox. --- It's Webkit/Blink-only - no support for other browsers. It says it uses clip-path and variables, both supported in Firefox, so I see no compelling reason for this. Also viewing it in Chrome, I don't see anything that would actually require the use of clip-path or variables - arbitrary triangles have been possible in CSS since the beginning, and much more impressive drawings have been created[0][1] than this. The added animation doesn't add much. Why is this currently #6 on the HN front page? [0] http://www.subcide.com/experiments/fail-whale/ http://www.subcide.com/experiments/fail-whale/ [1] https://pattle.github.io/simpsons-in-css/ https://pattle.github.io/simpsons-in-css/

taf2 10y ago
Seems to work for me in mobile safari
- lucideer 10y ago
  Edited, cheers.
- mhurron 10y ago
  Safari is webkit.
erlehmann_ 10y ago
It seems to me that nowadays Webkit/Blink has replaced IE for developers not caring about interoperability – with some even going so far as to claim „IE? but nobody uses that!“.
- Semaphor 10y ago
  Eh, it always only seems to be the case for experiments. Stuff that has no use case besides "looking fun" and probably being a fun challenge to work at. There are a few FF only, and many that are Chrome only.
- 10y ago

6DM 10y ago

Should be called CSS pikachu unless you can somehow swap them. Good job though, better than I could do!

jaytaylor 10y ago

I found this very cool and surprisingly beautiful! I'd love to understand the techniques and processes @lukehaas used to create it.

gm-conspiracy 10y ago

Meh. This works in Firefox: http://pattle.github.io/simpsons-in-css/ http://pattle.github.io/simpsons-in-css/

blauditore 10y ago

I made another pokemon in CSS (view from behind): https://jsfiddle.net/t2mngvwn/show/ https://jsfiddle.net/t2mngvwn/show/

sauronlord 10y ago

I never realized they introduced a yellow rectangle as a Pokémon. Galaxy S7

marvindanig 10y ago

Damn cool, I just love polygon cuts! CSS has become quite powerful in the last few years. Guess we're not so far from being able to replace images/icons/logos with "design code" written in CSS in the coming ten years. Here's a book on ABCs for babies done entirely in CSS: https://bubbl.in/book/abcd-animal-book-by-judith-neumann/1 https://bubbl.in/book/abcd-animal-book-by-judith-neumann/1

TheCoreh 10y ago
We can sorta already do that by inlining SVGs inside CSS (but perhaps it's cheating)