back
87 comments
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.

Did you ever make it available as a library?
The gradient is a fantastic idea, thanks!
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. ;)
Using GPT-3 API (chuckle)
Haha good idea ^^
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)
Yes I handle big widths wrongly, I’ll fix that soon! Thanks for the bug report :)
You can use imgur.com without an account - this is often the to-go service to publish images to be shared (stack exchange, ShareX,...)
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.
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.

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.

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/
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?
Thats pretty cool, things go a bit crazy when you move the width too far right.
radius only apply to the back cover in firfox https://i.imgur.com/nv6locC.png (works as expected in chrome)

excellent work otherwise

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.

That looks good. You should combine it with a landing page generator for self published books or docs.
I love this so hard. Love the ability to adjust width as well. Great work!
Just as an idea, adding overlay stamps to it. Something like "Recommended by developers", "Only for limited time", or just a lens flare effect.
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.
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.

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.
That's brilliant! Is there any way of downloading the resultant image?
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!!
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
Would we be able to adjust the drop shadow?
Wow, that's really cool, nice work!
radius on front cover doesn't work in firefox