Live data from Hacker News

Show HN: 3D Book Image CSS Generator

3d-book-css.netlify.app

61–70 of 88 posts

Re: Show HN: 3D Book Image CSS Generator

#61

Nice work. It looks like the book thickness isn't corrected for rotation angle. If you made the horizontal width of the inside pages = thickness * sin(rotation angle) it'll be zero when laying flat and full thickness when rotated 90 degrees.

Good to know, thanks :)

Re: Show HN: 3D Book Image CSS Generator

#63
Nicely done! We've been using a very similar setup at the Dutch public library for the last many years - e.g. https://www.bibliotheek.nl/catalogus/titel.263072924.html/th... - complete with thickness based on number of pages (though only in three steps) - but it took a lot of tinkering to get the CSS down to something relatively clean. Great job making something like this accessible to everyone with a handy tool like this!

One trick we're using which you might care to copy over (and improve upon) is a linear gradient to fake the pages. I think for thin books, I prefer your white version, but for thick books, it feels pretty sterile.

Re: Show HN: 3D Book Image CSS Generator

#65
post #63

Nicely done! We've been using a very similar setup at the Dutch public library for the last many years - e.g. https://www.bibliotheek.nl/catalogus/titel.263072924.html/th... - complete with thickness based on number of pages (though only in three steps) - but it took a lot of tinkering to get the CSS down to something relatively clean. Great job making something like this accessible to everyone with a handy tool like…

The gradient is a fantastic idea, thanks!

Re: Show HN: 3D Book Image CSS Generator

#66
post #60

My current favorite feature: you can manually override the maximum thickness :] 160px thick book ftw The only comment I have is that the width slider tends to make an aggressively flickery mess of my screen anywhere above 250px.

I love increasing size so book overlaps other page elements. It makes it more 3D

Re: Show HN: 3D Book Image CSS Generator

#67
post #66
post #60

My current favorite feature: you can manually override the maximum thickness :] 160px thick book ftw The only comment I have is that the width slider tends to make an aggressively flickery mess of my screen anywhere above 250px.

I love increasing size so book overlaps other page elements. It makes it more 3D

Increase it again and it grows out of the screen ;)

Seriously, this bug is one of my top priorities :)

Re: Show HN: 3D Book Image CSS Generator

#68
post #63

Nicely done! We've been using a very similar setup at the Dutch public library for the last many years - e.g. https://www.bibliotheek.nl/catalogus/titel.263072924.html/th... - complete with thickness based on number of pages (though only in three steps) - but it took a lot of tinkering to get the CSS down to something relatively clean. Great job making something like this accessible to everyone with a handy tool like…

Did you ever make it available as a library?

Re: Show HN: 3D Book Image CSS Generator

#69
post #7

For some reason the Width parameter is working weirdly in Firefox on Android. Dragging the slider halfway resizes the book to become larger than the whole screen. Screenshot: https://9gag.com/gag/aLwvLY6 (because I don't have accounts elsewhere)

You can use imgur.com without an account - this is often the to-go service to publish images to be shared (stack exchange, ShareX,...)
Post reply on HN