[HN Gopher] Show HN: 3D Book Image CSS Generator
___________________________________________________________________
Show HN: 3D Book Image CSS Generator
Author : scastiel
Score : 516 points
Date : 2020-07-20 11:51 UTC (11 hours ago)
(HTM) web link (3d-book-css.netlify.app)
(TXT) w3m dump (3d-book-css.netlify.app)
| vms20591 wrote:
| Wow, that's really cool, nice work!
| scastiel wrote:
| Thanks! :)
| atum47 wrote:
| seems to break when you fiddle with the width slider, but it's a
| nice work never the less
| iworkfromhome wrote:
| This is a WOW thing! Very cool. Easy to use. Success for you.
| scastiel wrote:
| Thanks :)
| arpitbatra123 wrote:
| looks impressive. could be a nice addition on my personal library
| page - https://arpit.tk/komura
| de6u99er wrote:
| 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 wrote:
| Good idea :)
| ChrisMarshallNY wrote:
| That's really nice!
|
| I have no idea how well it works on various browsers (the bugaboo
| for all CSS), but it's noice!
| dandigangi wrote:
| 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 wrote:
| Awesome! :)
| itcrowd wrote:
| 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 wrote:
| Very good idea, adding it to my to do list :)
| ARandomerDude wrote:
| Yes. Came here to say this.
| runawaybottle wrote:
| That looks good. You should combine it with a landing page
| generator for self published books or docs.
| scastiel wrote:
| I'll think about it, thanks :)
| dmcclurg wrote:
| Well done sir
| LoSboccacc wrote:
| radius only apply to the back cover in firfox
| https://i.imgur.com/nv6locC.png (works as expected in chrome)
|
| excellent work otherwise
| rgovostes wrote:
| Likewise on Safari. But it's really nice even with that small
| issue.
| slimsag wrote:
| Very nice, I shared this with my sister who will love this, is it
| possible to make the book have a paperback appearance?
| martyz wrote:
| I love this so hard. Love the ability to adjust width as well.
| Great work!
| scastiel wrote:
| Thank you :)
| bilinualcom wrote:
| Interesting, thank you so much. I am going to use it for the
| bilinual book library: http://www.bilinual.com
| YoungWeb wrote:
| Had a good time setting thickness to 1000 and width to 500.
| svl wrote:
| 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.
| kreetx wrote:
| Did you ever make it available as a library?
| scastiel wrote:
| The gradient is a fantastic idea, thanks!
| omarchowdhury wrote:
| Would we be able to adjust the drop shadow?
| chrismorgan wrote:
| What you've called transition delay is actually transition
| _duration_.
| scastiel wrote:
| Woops ;)
| staycoolboy wrote:
| odd, only the last two controls do anything. Firefox, Safari and
| Chrome on macOS 15.5.5.
| solrac9 wrote:
| Some of the other controls have to do with hover effects.
| vibesngrooves wrote:
| 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
| TheHideout wrote:
| 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 wrote:
| Good to know, thanks :)
| shahinrostami wrote:
| Very cool! Would be great as a WooCommerce plugin, I would love
| to use it for the books on here https://store.shahinrostami.com/
| lpellis wrote:
| Thats pretty cool, things go a bit crazy when you move the width
| too far right.
| scastiel wrote:
| True, it still needs some adjustments, but thanks!
| swyx wrote:
| 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.
| scastiel wrote:
| Haha believe me if you want, I used this website previously,
| but it was down yesterday, so I developed my own tool xD
| xwdv wrote:
| 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 wrote:
| 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.
| _Microft wrote:
| 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 wrote:
| Thanks, let me check!
| edent wrote:
| That's brilliant! Is there any way of downloading the resultant
| image?
| scastiel wrote:
| 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...).
| flareback wrote:
| 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 wrote:
| 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 ;))
| sharanm wrote:
| This is really impressive
| scastiel wrote:
| Thanks! :)
| shahinrostami wrote:
| Gave it a go - looks great
| https://codepen.io/StamiLabs/pen/wvMRpwp
| masukomi wrote:
| 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.
| codetrotter wrote:
| 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 wrote:
| Really cool! I can probably add this to my personal book app to
| make things look a bit nicer: https://books.j11g.com/
| lpellis wrote:
| Do you know the number of pages for each book? Then you could
| adjust the thickness automatically :)
| scastiel wrote:
| 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 :)
| SwiftyBug wrote:
| It would look very cool in the Book page:
|
| https://books.j11g.com/search.php?id=484
| gppk wrote:
| Agreed - https://imgur.com/qbVZUk8
| ocdtrekkie wrote:
| 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!
| __ka wrote:
| Very cool :) Feature request: can the thickness be a function of
| the number of pages?
| scastiel wrote:
| It has been suggested before, it's a very good idea :)
| dubcanada wrote:
| 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.
| njsubedi wrote:
| 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)
| Deukhoofd wrote:
| 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.
| scastiel wrote:
| Yes I handle big widths wrongly, I'll fix that soon! Thanks for
| the bug report :)
| XCSme wrote:
| Wow, uploading screenshot on 9gag!
|
| I usually just use the snipping tool and then paste on
| https://snag.gy
| BrandoElFollito wrote:
| You can use imgur.com without an account - this is often the
| to-go service to publish images to be shared (stack exchange,
| ShareX,...)
| exikyut wrote:
| 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 wrote:
| I love increasing size so book overlaps other page elements. It
| makes it more 3D
| scastiel wrote:
| Increase it again and it grows out of the screen ;)
|
| Seriously, this bug is one of my top priorities :)
| LeonB wrote:
| Very nicely done. Consider adding a slider that controls a neural
| net that generates the content of the book as well. ;)
| zxienin wrote:
| Using GPT-3 API (chuckle)
| scastiel wrote:
| Haha good idea ^^
| zxcvbn4038 wrote:
| Impressive! I know a number of people who self publish who will
| love this.
___________________________________________________________________
(page generated 2020-07-20 23:00 UTC)