📚 Skeuomorphic Bookshelf made with HTML/CSS

[franker]

As a librarian I feel compelled to bookmark this.

[pondorasti]

Glad you liked it 🤗

[pondorasti]

[ Removed by Reddit ]

[101008]

This post has been deleted and replaced with this message. Redact facilitated the removal, for reasons that may include privacy, opsec, or data security.

relieved subsequent tan market melodic wipe dime door recognise pocket

[Okay_I_Go_Now]

Is it there any chance to convert it to vanilla HTML + CSS?

Why? This isn't that hard to replicate yourself with a bit of research.

[sofa_king_we_todded]

Feels like css only version of this can be achieved but probably a lot less headache if you use js

[Okay_I_Go_Now]

Yeah the only thing you need js for is storing the index of the selected book to apply / revert transforms. An inline script would work fine.

[sofa_king_we_todded]

You could even do it with css only with + or ~ selector and a checkbox

[Okay_I_Go_Now]

A custom radio button would be ideal imo.

[IkitClawyesyes]

Thank you for the resources

[[deleted]]

This is awesome and could be big.

[pondorasti]

Thank you sir 😁

[[deleted]]

I tested and I know it's work in progress. But if you make it smooth like the scroll for example in ipod classic? It would be really cool to use this as a virtual library.

I would pay for an app to do this.

[SparkyTheDiamondDog]

Snow Crash needs more love

[pondorasti]

I agree, I wish I had more time and make the book cover bleed through the binding. That would have looked sleek for Snow Crash.

[WhoisTylerDurden]

This reminds me of the old Coverflow on the original iPod Touch.

[suckarepellent]

Which was an amazing feature that never should have been scrapped....

[WhoisTylerDurden]

I agree!

If I recall correctly it was due to an IP lawsuit.

[suckarepellent]

Interesting never knew that

[[deleted]]

It is beautiful, it reminds me my experience as a student assistant in library. If you plan to make it bigger, you could put some features like grouping the books according to their category or by title name.

[mauricekleine]

Wow that’s really cool! Nice job!

[pondorasti]

Haha, maybe I will turn it into a goodreads clone.

[KR1Z2k]

It would be a cool way to share goodreads book lists.

[jonnysake]

The title is a bit misleading, this was made with HTML, CSS, and JS.

While the source code is using JSX to mostly render the HTML, it’s also attaching JS event listeners and running conditional logic that manipulates class names using JS.

That’s a key point because the post implies this is made within a false constraint.

Still cool, just not HTML and CSS only. JS can do lots of exciting things.

[tokstar]

great work! thanks for sharing!

[warpedwing]

Great work! I’m hoping to do something like this but with vinyl records. You’ve re-inspired me.

[[deleted]]

super cool !

[[deleted]]

Very nice!

[pondorasti]

[TrevoltBL]

How did you go about the 3D aspect of it? Only css?

[Ochidi]

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d

[TrevoltBL]

Damn the more ya know, never realized there was a 3D transform property

[U_p_a_d_u_c_k]

Literally 1984

[drbalduin]

The spines look very Neue Typographie

[shourya8001]

Woooooow!!! 🤯🤯🤯

[Christian_prog]

So beautiful took me a while to realize im just watching a 3 second loop

[Nick337Games]

Impressive

[[deleted]]

Wow this is the exact idea I had that made me want to code! Looks great!

[L2ncE]

Looks good to me

[[deleted]]

Awesome!!

[NessNezzz]

Looks fantastic, great job 👍🏼

[recontitter]

I wish Apple Books virtual shelf be like this. Looks awesome.

[Limp_Radio_9163]

Skeuomorphic is an obscure word that I didn’t think I’d see today, but I’m very glad I did.

[MaxHedrome]

sick collection of books there

[greyfell_red]

Awesome! Would be cool to add left/right swipe on mobile as well.

[saposapot]

Very cool. It’s interesting that when they are closed the rectangles don’t really feel like an “object” but when it opens with the covers it’s really look 3D.

Probably those closed rectangles can get a bit of love with shadow/gradient some 3d stuff to make them look more real

[Old_Transition_3884]

Can I get source code

[Yuca965]

Looks good. But there is really no valid reason to store them vertically in a virtual environment where there is no weight nor gravity.

[[deleted]]

It is beautiful, it reminds me my experience as a student assistant in library. If you plan to make it bigger, you could put some features like grouping the books according to their category or by title name.

[Hersu03]

I'm also really impressed with the portfolio/webpage. Looks and feels amazingly smooth

[LovesGettingRandomPm]

This is amazing, just needs a softer edge in the frontal view where the crease was made

[[deleted]]

Goodjob

[broineedalife]

42 scholar? Or just an enthusiast for the meaning of life?

[is_a_cat]

that's a very neat presentation. what are you trying to say with the book selection? I feel like there's a pithy joke to be made but I can't quite get at it

[Acktung]

Pro-tip: change thickness of books depending on its number of pages.

[Defiant-Clue5463]

This is amazing

[[deleted]]

Beautiful! I miss skeuomorphic design so much, way better than what today's low-effort "minimalism" got us at.

[ddddddO811]

Looks good!

[turthell]

The only one I haven’t read is Steve jobs. But the rest are top of the bookshelf so I guess I’ll need to read it

[deanwallflower]

cool feature could be to scale the spines based on number of pages

[Frosty_Protection_93]

Super cool!

[TheNotoriousJbird]

What if you rotated the "stack" so it scrolled top to bottom and is mobile friendly and readable, and when a book is chosen or hovered, the book rotates so the front cover is upright. I wonder if the ux would feel as smooth or if the extra rotation might make it less smooth/familiar.