Show HN: 3D Book Image CSS Generator

#1

Post by scastiel » Mon, Jul 20, 2020, 11:51 AM UTC

Show HN: 3D Book Image CSS Generator
3d-book-css.netlify.app

Re: Show HN: 3D Book Image CSS Generator

#2

Post by lpellis » Mon, Jul 20, 2020, 12:16 PM UTC

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

Re: Show HN: 3D Book Image CSS Generator

#3

Post by scastiel » Mon, Jul 20, 2020, 12:17 PM UTC

lpellis wrote: post #2

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

True, it still needs some adjustments, but thanks!

Re: Show HN: 3D Book Image CSS Generator

#4

Post by _Microft » Mon, Jul 20, 2020, 12:20 PM UTC

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.

Re: Show HN: 3D Book Image CSS Generator

#5

Post by scastiel » Mon, Jul 20, 2020, 12:22 PM UTC

_Microft wrote: post #4

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!

Re: Show HN: 3D Book Image CSS Generator

#6

Post by janvdberg » Mon, Jul 20, 2020, 12:26 PM UTC

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

Re: Show HN: 3D Book Image CSS Generator

#7

Post by njsubedi » Mon, Jul 20, 2020, 12:27 PM UTC

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)

Re: Show HN: 3D Book Image CSS Generator

#8

Post by vms20591 » Mon, Jul 20, 2020, 12:31 PM UTC

Wow, that's really cool, nice work!

Re: Show HN: 3D Book Image CSS Generator

#9

Post by iworkfromhome » Mon, Jul 20, 2020, 12:36 PM UTC

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

Re: Show HN: 3D Book Image CSS Generator

#10

Post by scastiel » Mon, Jul 20, 2020, 12:37 PM UTC

iworkfromhome wrote: post #9

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

Thanks :)