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를 제거하고 수동으로 해당 재료를 구현할 수 있습니다.

이것은 무료로 사용할 수 있습니까?

네, 원하는대로 해보세요.

이 프로젝트가 유용하다고 생각되면 다음 배지를 사용하여 단어를 전파 할 수 있습니다.

완벽합니까?

아니요. 긴 타이틀을 잘 처리하지 않습니다. 다른 정렬 문제가 있다고 확신합니다. 나는 하루에 이것을 썼다. 수정/개선 사항을 자유롭게 제출하십시오.