virtual bookshelf

ชั้นวางหนังสือเสมือนจริง

นี่คือการสร้างภาพหนังสืออย่างง่าย ๆ ในชั้นวางหนังสือโดยใช้ CSS บางส่วนที่แปลงเพื่อให้ผลของการเลือกหนังสือเมื่อคุณโฮเวอร์เหนือมัน

ฉันใช้มันบนเว็บไซต์ส่วนตัวของฉันเพื่อติดตามหนังสือที่ฉันอ่าน มันรวมเข้ากับเครื่องกำเนิดไซต์แบบคงที่และก็เกี่ยวกับอะไรก็ได้เพราะมันคือวานิลลา JS, CSS และ HTML ทั้งหมด

ฉันจะเพิ่มหนังสือเพิ่มเติมได้อย่างไร?

หนังสือถูกกำหนดดังนี้:

 < div class =" book " >
    < div class =" side spine " >
        < span class =" spine-title " > Book Title </ span >
        < span class =" spine-author " > PG </ span >
    </ div >
    < div class =" side top " > </ div >
    < div class =" side cover " > </ div >
</ div >

เพียงเพิ่มตัวอย่างนี้สำหรับหนังสือแต่ละเล่มที่คุณต้องการภายใน <div class="bookshelf">

ทำไมต้องใช้ JS เลย?

เดิมทีฉันมุ่งเป้าไปที่การใช้งาน NO-JS แต่ไม่มีวิธีเพิ่มการสุ่มลงในความสูงของหนังสือสีและลวดลายโดยไม่ต้องใช้ แน่นอนว่าคุณสามารถลบ JS และใช้สิ่งนั้นได้ด้วยตนเอง

ใช้ฟรีหรือไม่?

ใช่ทำทุกอย่างที่คุณต้องการ

หากคุณพบว่าโครงการนี้มีประโยชน์คุณสามารถใช้ตราสัญลักษณ์ต่อไปนี้เพื่อกระจายคำ:

มันสมบูรณ์แบบ?

ไม่. ไม่สามารถจัดการชื่อเรื่องยาวได้ดี ฉันแน่ใจว่ามีปัญหาการจัดตำแหน่งอื่น ๆ ฉันเขียนสิ่งนี้ในหนึ่งวันอย่าคาดหวังอะไรมาก อย่าลังเลที่จะส่งการแก้ไข/การปรับปรุง