Hacker News Reader

Comment by anonfunction | Hacker News Reader

I got through the first 6 css pixel perfect challenges but got stuck on the last one where I couldn't get the gradients to match.

View on HN

It's possible to interpolate the correct values with a screenshot, the gimp and a calculator.

Nice work, that's exactly what I had in mind when I wrote it.

For anyone else reading this - The puzzle has been updated to remove the gradients and transform, so it should be much easier now.

Would you have any hints for puzzle 3? The power of CSS has far overtaken me in the last few years.

It involves a "border" style.

Thanks, those lines in the corners threw me off.

Funny I am stuck at the pink triangle, but my gradients are mostly matched. I used the Mac's color picker and what it gave me doesn't work, even though both target and result are showing exact same rgb value in that :(.

It's both that and the circle that I can't get past now :) Extending the circle's height to what should be correct screws up the whole diff and paints a load of stripes across it...

I found that `clip: rect(0px, 0px, 0px, 0px)` does not work, but fixes the stripes bug.

I got stuck on the 6th one -- I can get everything perfectly aligned, but I'm using border + border-radius which renders with a few pixels missing :(

Sorry about that, I made it too difficult! I've updated the last puzzle to remove any gradients and transforms, so it should be much easier now.

Reply on news.ycombinator.com