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.
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!
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.
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.
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…).
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 ;))
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.
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.
87 comments
[ 3.8 ms ] story [ 145 ms ] threadTest: 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.
Compare Infinite Jest (a big book) with other smaller books on my site. Looks pretty cool!
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!
https://books.j11g.com/search.php?id=484
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!
I usually just use the snipping tool and then paste on https://snag.gy
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).
* 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
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.
edit: please take this as a helpful suggestion and not a criticism. I still really like the work you've done.
I have no idea how well it works on various browsers (the bugaboo for all CSS), but it's noice!
That's excluding any cover page, which heavily depends on binding/hard cover/what ever else.
i love collecting little tools like this, lmk if anyone has one for mocking phones, tablets and desktops.
excellent work otherwise
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.