Sebagai media penerbitan, buku adalah survivor. Mereka terus berkembang, bahkan ketika masyarakat kita menganut bentuk konsumsi konten berteknologi tinggi lainnya. Masih ada sesuatu tentang memegang satu di tangan Anda yang terasa benar.
Jadi, tidak mengherankan jika desainer web mengekspresikan fandom buku mereka melalui kode. Beberapa memberi penghormatan kepada judul favorit mereka. Yang lain berusaha membuat ulang bentuk dan fungsi media di layar.
Hari ini, kami akan memperkenalkan Anda pada beberapa cuplikan kode terkait buku yang mengesankan. Mereka menggunakan CSS dan JavaScript untuk menghidupkan literatur. Anda akan menemukan semuanya mulai dari objek 3D hingga pembalik halaman yang sepenuhnya interaktif. Ini dia!
Efek Buku Meja Kopi CSS oleh Lyn Fisher
Dengan bantuan CSS, gambar apapun bisa menjadi sebuah buku. Cuplikan ini memanfaatkan CSS transform dan clip-path properti untuk membuat rendering 3D. Sempurna untuk ditampilkan di meja kopi Anda (atau desktop virtual).
Lihat Pena Efek buku meja kopi CSS oleh Lynn Fisherhello
Pemuat Buku CSS Murni oleh Aaron Iker
Memuat grafik menawarkan cara sederhana untuk meningkatkan pengalaman pengguna (UX). Tetapi Anda tidak harus puas dengan sesuatu yang umum. Misalnya, situs web terkait buku dapat menambahkan sentuhan konteks ekstra dengan animasi yang menyenangkan ini.
Lihat Pena Pemuat Buku CSS Murni oleh Aaron Ikerhello
Buku Hilang 404 Halaman Animasi oleh Valeriia
Inilah cara yang menarik untuk menggunakan buku dalam desain web. Tata letak 404 halaman ini membuka lemari untuk memperlihatkan setumpuk buku. Setiap buku adalah elemen navigasi yang dapat diklik. Garis kosong mewakili halaman yang hilang yang tidak dapat ditemukan.
Lihat Pena Animasi 404 halaman – buku hilang oleh Valeriiahello
George Orwell tahun 1984 dalam CSS & SVG oleh Theahello
Menggunakan kombinasi CSS dan SVG, pena ini merayakan karya klasik George Orwell “Sembilan belas Delapan Puluh Empat“. Melayang di atas elemen mengubah perspektif, dengan punggung buku mulai terlihat. Efek ini akan sangat cocok untuk penjual buku atau blog ulasan.
Lihat Pena George Orwell #CodepenChallenge oleh Theahello
Kindle Paperwhite Simulator di CSS oleh Iah Bhello
Ya, buku telah bergabung dengan dunia teknologi tinggi – berkat perangkat seperti Kindle Paperwhite. Ini memungkinkan pembaca untuk membawa seluruh literatur senilai perpustakaan (coba lakukan itu dengan hardback jadul), sambil tetap menawarkan pengalaman seperti kertas. Klik di sekitar emulator ini untuk menjelajahi alam semesta.
Lihat Pena Kindle Paperwhite Simulator oleh Iah Bhello
Buku Kerja Catatan Lapangan dengan CSS oleh Tim Aronan
Replika cerdik buku kerja Catatan Lapangan ini benar-benar interaktif. Arahkan kursor ke sampul untuk membuka buku, ketik pesan langsung ke halaman, dan tahan halaman untuk membuka halaman baru. Hebatnya, ini semua dilakukan dengan bentuk CSS dan HTML.
Lihat Pena Catatan Lapangan Kerja dengan CSS oleh timaronanhello
Sebuah Generator Buku Terpisah oleh Dave Rupert
Jika Anda pernah ingin menulis buku, inilah kesempatan Anda untuk bermain pura-pura. Masukkan judul buku, penulis, dan nomor terbitan Anda. Anda juga dapat mengubah warna primer sampul. Kemudian unduh gambar SVG dan bagikan dengan teman!
Lihat Pena Sebuah Generator Buku Terpisah oleh Dave Ruperthello
Book Flip Page Turn dengan CSS & JavaScript oleh Anya Melnyk
Ide “membalik” halaman buku online sudah ada sejak lama. Efeknya kembali ke zaman Flash. Hari-hari ini, itu dapat dibangun dengan sedikit CSS dan JavaScript (file Turn.js perpustakaan, dalam hal ini). Ini cara yang menyenangkan untuk menambahkan interaktivitas ke situs web apa pun.
Lihat Pena membalik halaman membalik buku oleh Anya Melnykhello
Tambahkan Sentuhan Sastra ke Proyek Anda
Apakah Anda membuat penghargaan untuk Harry Potter atau hanya menyukai estetika buku, ada banyak cara untuk mengintegrasikannya ke dalam situs web Anda. Cuplikan di atas melayani berbagai tujuan. Namun, mereka hanya menggores permukaan dari apa yang mungkin.
Jika Anda sedang mencari lebih banyak inspirasi sastra, pastikan untuk memeriksa kami Koleksi CodePen!
