virtual bookshelf

Livra virtual

Esta é uma visualização simples de livros em uma estante de livros usando algumas transformadas CSS para dar o efeito de escolher o livro quando você mouse sobre ele.

Eu o uso no meu site pessoal para rastrear quais livros já li. Ele se integra bem a geradores de sites estáticos e, bem, praticamente qualquer coisa, já que é tudo JS, CSS e HTML de baunilha.

Como faço para adicionar mais livros?

Um livro é definido da seguinte maneira:

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

Basta adicionar este trecho para cada livro que você deseja dentro <div class="bookshelf"> .

Por que usar o JS?

Originalmente, visava uma implementação de NO-JS, mas não havia como adicionar aleatoriedade à altura, cores e padrões do livro sem ele. É claro que você pode remover o JS e implementar essas coisas manualmente.

Isso é gratuito para usar?

Sim, faça o que quiser com ele.

Se você achou esse projeto útil, pode usar o seguinte crachá para espalhar a palavra:

É perfeito?

Não. Não lida bem com títulos longos. Tenho certeza de que existem outros problemas de alinhamento. Eu escrevi isso em um dia, não espere muito. Sinta -se à vontade para enviar correções/melhorias.