virtual bookshelf

Rak buku virtual

Ini adalah visualisasi sederhana dari buku -buku di rak buku menggunakan beberapa transformasi CSS untuk memberikan efek memilih buku saat Anda melayang di atasnya.

Saya menggunakannya di situs pribadi saya untuk melacak buku apa yang saya baca. Ini terintegrasi dengan baik dengan generator situs statis, dan yah, apa saja karena semuanya vanilla JS, CSS dan HTML.

Bagaimana cara menambahkan lebih banyak buku?

Sebuah buku didefinisikan sebagai berikut:

 < 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 >

Cukup tambahkan cuplikan ini untuk setiap buku yang Anda inginkan di dalam <div class="bookshelf"> .

Mengapa menggunakan JS sama sekali?

Saya awalnya bertujuan untuk implementasi no-js tetapi tidak ada cara untuk menambahkan keacakan pada tinggi buku, warna dan pola tanpa itu. Anda tentu saja dapat menghapus JS dan mengimplementasikan barang -barang itu secara manual.

Apakah ini gratis untuk digunakan?

Ya, lakukan apapun yang Anda inginkan dengannya.

Jika Anda menemukan proyek ini berguna, Anda dapat menggunakan lencana berikut untuk menyebarkan berita:

Apakah itu sempurna?

Tidak. Tidak menangani judul panjang dengan baik. Saya yakin ada masalah penyelarasan lainnya. Saya menulis ini dalam sehari, jangan berharap banyak. Jangan ragu untuk mengirimkan perbaikan/perbaikan.