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を削除して、そのようなものを手動で実装できます。

これは無料で使用できますか？

うん、あなたがそれでやりたいことは何でもしてください。

このプロジェクトが便利だと思った場合は、次のバッジを使用して単語を広めることができます。

完璧ですか？

いいえ。長いタイトルをうまく処理しません。他のアライメントの問題があると確信しています。私はこれを一日で書きました、あまり期待しないでください。修正/改善をお気軽に送信してください。