Show HN: CSS Pokemon – created with clip-path and CSS variables
projects.lukehaas.me
Show HN: CSS Pokemon – created with clip-path and CSS variables
1–10 of 45 posts
Re: Show HN: CSS Pokemon – created with clip-path and CSS variables
#2I 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?
Re: Show HN: CSS Pokemon – created with clip-path and CSS variables
#3I 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?
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.
Re: Show HN: CSS Pokemon – created with clip-path and CSS variables
#4I 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?
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
In Firefox or other browsers, it just appears as a yellow square.
Re: Show HN: CSS Pokemon – created with clip-path and CSS variables
#5I 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?
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 In Firefox or other browsers, it just appears as a yellow square.
Thanks for the screenshot.
Re: Show HN: CSS Pokemon – created with clip-path and CSS variables
#6Anyone 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 ;)
Re: Show HN: CSS Pokemon – created with clip-path and CSS variables
#7Awesome!
Re: Show HN: CSS Pokemon – created with clip-path and CSS variables
#8I 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?
I think the old "Best Viewed With Internet Explorer" is back (only ... with chrome as the new ie)
Re: Show HN: CSS Pokemon – created with clip-path and CSS variables
#9Edit: 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?
Re: Show HN: CSS Pokemon – created with clip-path and CSS variables
#10Edit: 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 -…
Seems to work for me in mobile safari