
Show HN: 3D Book Image CSS Generator - scastiel
https://3d-book-css.netlify.app/
======
svl
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...](https://www.bibliotheek.nl/catalogus/titel.263072924.html/the-
confusion/) \- 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.

~~~
kreetx
Did you ever make it available as a library?

~~~
coopsmgoops
Its available at the library

~~~
Gabriel_Martin
very clever :)

------
TheHideout
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.

~~~
scastiel
Good to know, thanks :)

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

~~~
zxienin
Using GPT-3 API (chuckle)

------
_Microft
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.

~~~
scastiel
Thanks, let me check!

------
njsubedi
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](https://9gag.com/gag/aLwvLY6) (because I don't
have accounts elsewhere)

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

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

------
itcrowd
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.

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

------
exikyut
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.

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

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

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

------
codetrotter
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.

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

~~~
SwiftyBug
It would look very cool in the Book page:

[https://books.j11g.com/search.php?id=484](https://books.j11g.com/search.php?id=484)

~~~
gppk
Agreed - [https://imgur.com/qbVZUk8](https://imgur.com/qbVZUk8)

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

------
ChrisMarshallNY
That's really nice!

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

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

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

~~~
dubcanada
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.

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

~~~
scastiel
True, it still needs some adjustments, but thanks!

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

excellent work otherwise

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

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

------
swyx
another in this category for multiple devices:
[https://diybookcovers.com/3Dmockups/](https://diybookcovers.com/3Dmockups/)

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

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

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

~~~
scastiel
I’ll think about it, thanks :)

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

~~~
scastiel
Thank you :)

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

~~~
scastiel
Good idea :)

------
xwdv
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.

~~~
scastiel
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.

------
flareback
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.

~~~
scastiel
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 ;))

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

------
andykais
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](https://andykais.com/moleskine)

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

------
chrismorgan
What you’ve called transition delay is actually transition _duration_.

~~~
scastiel
Woops ;)

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

~~~
scastiel
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…).

------
shahinrostami
Gave it a go - looks great
[https://codepen.io/StamiLabs/pen/wvMRpwp](https://codepen.io/StamiLabs/pen/wvMRpwp)

------
bilinualcom
Interesting, thank you so much. I am going to use it for the bilinual book
library: [http://www.bilinual.com](http://www.bilinual.com)

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

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

------
masukomi
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.

------
dandigangi
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!!

~~~
scastiel
Awesome! :)

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

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

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

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

------
sharanm
This is really impressive

~~~
scastiel
Thanks! :)

------
omarchowdhury
Would we be able to adjust the drop shadow?

------
vms20591
Wow, that's really cool, nice work!

~~~
scastiel
Thanks! :)

------
keithnz
radius on front cover doesn't work in firefox

------
dmcclurg
Well done sir

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

~~~
scastiel
Thanks :)

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

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

