8 ms·
Show HN: 3D Book Image CSS Generator
- lpellis 6y agoThats pretty cool, things go a bit crazy when you move the width too far right.
- scastiel 6y agoTrue, it still needs some adjustments, but thanks!
- _Microft 6y agoVery 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 6y agoThanks, let me check!
- janvdberg 6y agoReally 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/
- lpellis 6y agoDo you know the number of pages for each book? Then you could adjust the thickness automatically :)
- janvdberg 6y agoI do! And I did implement it like this :) Compare Infinite Jest (a big book) with other smaller books on my site. Looks pretty cool!
- scastiel 6y agoYour app is very cool! I agree, having 3D book images could make it look nice, tell me if you need any help for that :)
- janvdberg 6y agoHa! That was easy to implement. This looks really cool: https://books.j11g.com/search.php?id=218 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!
- SwiftyBug 6y agoIt 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 6y agoAgreed - https://imgur.com/qbVZUk8 https://imgur.com/qbVZUk8
- ocdtrekkie 6y agoThis 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!
- njsubedi 6y agoFor 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)
- Deukhoofd 6y agoSame 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.
- scastiel 6y agoYes I handle big widths wrongly, I’ll fix that soon! Thanks for the bug report :)
- XCSme 6y agoWow, uploading screenshot on 9gag! I usually just use the snipping tool and then paste on https://snag.gy https://snag.gy
- njsubedi 6y agoWhat's wrong with 9gag? It's a YC company to begin with, and works just like Imgur.
- XCSme 6y agoThis: https://i.snipboard.io/31nbcm.jpg 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).
- XCSme 6y agoJust 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
- vms20591 6y agoWow, that's really cool, nice work!
- scastiel 6y agoThanks! :)
- iworkfromhome 6y agoThis is a WOW thing! Very cool. Easy to use. Success for you.
- scastiel 6y agoThanks :)
- itcrowd 6y agoCool, 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 6y agoVery good idea, adding it to my to do list :)
- ARandomerDude 6y agoYes. Came here to say this.
- edent 6y agoThat's brilliant! Is there any way of downloading the resultant image?
- scastiel 6y agoThanks! 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…).
- flareback 6y agoThat 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 6y agoThanks! 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 ;))
- zxcvbn4038 6y agoImpressive! I know a number of people who self publish who will love this.
- arpitbatra123 6y agolooks impressive. could be a nice addition on my personal library page - https://arpit.tk/komura https://arpit.tk/komura
- ChrisMarshallNY 6y agoThat's really nice! I have no idea how well it works on various browsers (the bugaboo for all CSS), but it's noice!
- runawaybottle 6y agoThat looks good. You should combine it with a landing page generator for self published books or docs.
- scastiel 6y agoI’ll think about it, thanks :)
- sharanm 6y agoThis is really impressive
- scastiel 6y agoThanks! :)
- __ka 6y agoVery cool :) Feature request: can the thickness be a function of the number of pages?
- scastiel 6y agoIt has been suggested before, it’s a very good idea :)
- dubcanada 6y agoWell 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.
- YoungWeb 6y agoHad a good time setting thickness to 1000 and width to 500.
- martyz 6y agoI love this so hard. Love the ability to adjust width as well. Great work!
- scastiel 6y agoThank you :)
- swyx 6y agoanother 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 6y agoHaha believe me if you want, I used this website previously, but it was down yesterday, so I developed my own tool xD
- LeonB 6y agoVery nicely done. Consider adding a slider that controls a neural net that generates the content of the book as well. ;)
- de6u99er 6y agoJust as an idea, adding overlay stamps to it. Something like "Recommended by developers", "Only for limited time", or just a lens flare effect.
- scastiel 6y agoGood idea :)
- LoSboccacc 6y agoradius 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 6y agoLikewise on Safari. But it's really nice even with that small issue.
- xwdv 6y agoWhat 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 6y agoIt’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.
- masukomi 6y agoas 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 6y agoMy 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 6y agoAwesome! :)
- dmcclurg 6y agoWell done sir
- slimsag 6y agoVery nice, I shared this with my sister who will love this, is it possible to make the book have a paperback appearance?
- chrismorgan 6y agoWhat you’ve called transition delay is actually transition duration.
- scastiel 6y agoWoops ;)
- atum47 6y agoseems to break when you fiddle with the width slider, but it's a nice work never the less
- staycoolboy 6y agoodd, only the last two controls do anything. Firefox, Safari and Chrome on macOS 15.5.5.
- solrac9 6y agoSome of the other controls have to do with hover effects.
- TheHideout 6y agoNice 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 6y agoGood to know, thanks :)
- exikyut 6y agoMy 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.
- svl 6y agoNicely 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/the-confusion/ 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.
- scastiel 6y agoThe gradient is a fantastic idea, thanks!
- kreetx 6y agoDid you ever make it available as a library?
- coopsmgoops 6y agoIts available at the library
- Gabriel_Martin 6y agovery clever :)
- vibesngrooves 6y agoThis 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
- bilinualcom 6y agoInteresting, thank you so much. I am going to use it for the bilinual book library: http://www.bilinual.com http://www.bilinual.com
- shahinrostami 6y agoVery 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/
- shahinrostami 6y agoGave it a go - looks great https://codepen.io/StamiLabs/pen/wvMRpwp https://codepen.io/StamiLabs/pen/wvMRpwp
- omarchowdhury 6y agoWould we be able to adjust the drop shadow?
- codetrotter 6y agoThis 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.
- keithnz 6y agoradius on front cover doesn't work in firefox
- blisseyGo 6y agoI can see someone like Amazon or Chapters wanting to use this on their site. You should try contacting them!
- neetrain 6y agoI'd like to make the book facing right. In Japan, books are bound right side.
- andykais 6y agoThis 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
- kalbfled 6y agoThis is pretty cool. I sent the link to a professional author friend with a dated website.