Show HN: 3D Book Image CSS Generator

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.

The gradient is a fantastic idea, thanks!

Did you ever make it available as a library?

Its available at the library

very clever :)

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 :)

Very nicely done. Consider adding a slider that controls a neural net that generates the content of the book as well. ;)

Haha good idea ^^

Using GPT-3 API (chuckle)

Very cool. The rule for class "book" is missing a border-radius as far as I can tell.

Test: set color to e.g. pink, increase radius to maximum value, see that the front image gets cropped but the pink area behind it is not. The backside of the book has a border-radius by the way.

Edit: might be nice to only apply it to the right-hand side as the side with the spine is unlikely to have rounded corners.

Thanks, let me check!

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)

Same for Firefox on desktop. The book gets too wide to fit in its row, and moves down. This causes the controls to change their size as well, which then starts breaking things.

Yes I handle big widths wrongly, I’ll fix that soon! Thanks for the bug report :)

Wow, uploading screenshot on 9gag!

I usually just use the snipping tool and then paste on https://snag.gy

What's wrong with 9gag? It's a YC company to begin with, and works just like Imgur.

This: https://i.snipboard.io/31nbcm.jpg

Instead of just having the screenshot as the link I posted with the site I mentioned (and it's also easier for you, you just paste the screenshot).

Just a few points, in case it's not clear from the screenshot:

* First I have to handle the cookie policy

* I see A TON of content instead of only the screenshot, very distracting

* A lot more data downloaded

* A lot more tracking

* A lot slower to load

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

I'll try that the next time I need it.

Cool, very nicely done.

Would it be possible to add a different set of parameters that describe the physical book instead? What I mean is specifying the page size in some standard way (e.g. A3 or letter size) and the number of pages and let the algorithm decide the parameters of book thickness (in pixels) automatically.

Very good idea, adding it to my to do list :)

Yes. Came here to say this.

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 :)

This is nice work and furthermore I would also like to commend the author for the elegant way of integrating marketing of their own book that they are writing into it.

Really cool! I can probably add this to my personal book app to make things look a bit nicer: https://books.j11g.com/

Do you know the number of pages for each book? Then you could adjust the thickness automatically :)

I do! And I did implement it like this :)

Compare Infinite Jest (a big book) with other smaller books on my site. Looks pretty cool!

Your app is very cool! I agree, having 3D book images could make it look nice, tell me if you need any help for that :)

Ha! That was easy to implement.

This looks really cool: https://books.j11g.com/search.php?id=218

I made it so that the more pages a book has the thicker it will appear.

Thanks so much for this code!

It would look very cool in the Book page:

https://books.j11g.com/search.php?id=484

Agreed - https://imgur.com/qbVZUk8

This is really nice. I have a personal book library app too, also in PHP/MySQL, though as a former library employee I ended up focusing more on cataloguing and checkout. (I import from the Library of Congress API rather than Amazon, for example.)

Also, I wrote a bunch of me-specific hacks and am still working on patching all those out (ten years later, lol) with the intention of making it usable to others and publishable as a Sandstorm app.

I'm also still in the process of open sourcing it, mostly for some of the same reasons you mentioned. Right now my library-specific code is open sourced but the core framework I built it on top of is not yet: I've only recently begun modernizing the security code.

I would love to see your code someday if you ever get around to sharing it though!

Impressive! I know a number of people who self publish who will love this.

That's really nice!

I have no idea how well it works on various browsers (the bugaboo for all CSS), but it's noice!

Very cool :) Feature request: can the thickness be a function of the number of pages?

It has been suggested before, it’s a very good idea :)

Well each page is 100mic roughly for 80gsm paper which is pretty standard. So if you did something like a 200 page book that is 20mm's which at 72 dpi roughly 54px's or roughly 27px's for a 100 page book.

That's excluding any cover page, which heavily depends on binding/hard cover/what ever else.

Thats pretty cool, things go a bit crazy when you move the width too far right.

True, it still needs some adjustments, but thanks!

radius only apply to the back cover in firfox https://i.imgur.com/nv6locC.png (works as expected in chrome)

excellent work otherwise

Likewise on Safari. But it's really nice even with that small issue.

Very nice, I shared this with my sister who will love this, is it possible to make the book have a paperback appearance?

another in this category for multiple devices: https://diybookcovers.com/3Dmockups/

i love collecting little tools like this, lmk if anyone has one for mocking phones, tablets and desktops.

Haha believe me if you want, I used this website previously, but it was down yesterday, so I developed my own tool xD

That looks good. You should combine it with a landing page generator for self published books or docs.

I’ll think about it, thanks :)

I love this so hard. Love the ability to adjust width as well. Great work!

Thank you :)

Just as an idea, adding overlay stamps to it. Something like "Recommended by developers", "Only for limited time", or just a lens flare effect.

Good idea :)

What would really blow me away is if you could set the text on the cover with CSS too, and then just drop in a background image behind it.

It’s totally feasible, but cover generator is a lot of complexity to add: you want to be able to move the text, resize it, change the color, add some other text, etc.

Many websites are doing it a lot better than I can (in a weekend), but it’s definitely something that I would do in the future.

That is quite impressive. Setting the perspective to 0 made the cover look like it was a front on shot but I could still see the side of the book which looks strange to me. Still nice though.

edit: please take this as a helpful suggestion and not a criticism. I still really like the work you've done.

Thanks! Yes in CSS the perspective set to 0 basically removes all perspective (but for the pages it’s a different element in perspective, this is why you can still see it ;))

This is awesome, thanks for sharing! Would've been great for my latest release, https://music101.press/, but I'll definitely use it for the next book I release

This might just be tangentially related, but I recently built a css booklet that has turnable pages for my personal website https://andykais.com/moleskine

Very cool! Would be great as a WooCommerce plugin, I would love to use it for the books on here https://store.shahinrostami.com/

What you’ve called transition delay is actually transition duration.

Woops ;)

That's brilliant! Is there any way of downloading the resultant image?

Thanks! That’s on my to do list! For now the best I can suggest is to make a screenshot (not ideal, especially because you don’t get a transparent background…).

Gave it a go - looks great https://codepen.io/StamiLabs/pen/wvMRpwp

Interesting, thank you so much. I am going to use it for the bilinual book library: http://www.bilinual.com

looks impressive. could be a nice addition on my personal library page - https://arpit.tk/komura

Had a good time setting thickness to 1000 and width to 500.

as the thickness of the book grows the cover doesn't also grow. towards the end of the scale the contents are taller than the cover.

My mom runs an e-book company in the health space. She's love this! I have to put it on her website by tonight. Haha Great tool!!

Awesome! :)

I can see someone like Amazon or Chapters wanting to use this on their site. You should try contacting them!

seems to break when you fiddle with the width slider, but it's a nice work never the less

This is pretty cool. I sent the link to a professional author friend with a dated website.

I'd like to make the book facing right. In Japan, books are bound right side.

This is really impressive

Thanks! :)

Would we be able to adjust the drop shadow?

Wow, that's really cool, nice work!

Thanks! :)

radius on front cover doesn't work in firefox

Well done sir

This is a WOW thing! Very cool. Easy to use. Success for you.

Thanks :)

odd, only the last two controls do anything. Firefox, Safari and Chrome on macOS 15.5.5.

Some of the other controls have to do with hover effects.