Tekstur kayu sempurna untuk mencapai tampilan yang bersahaja. Dan seperti rekan alami mereka, ada banyak variasi untuk dipilih.
Pertimbangkan rangkaian warna dan pola butiran yang hampir tak ada habisnya. Mereka memberi kami banyak ruang untuk penyesuaian. Selain itu, kita bahkan dapat melampaui apa yang kita lihat di alam.
Tapi kayu lebih dari sekedar pemain latar belakang. Desainer juga menggunakannya di bagian depan dan tengah dalam presentasi mereka. Benda-benda kayu bisa menjadi bintang pertunjukan. Dan jika digabungkan dengan CSS dan JavaScript, beberapa efek luar biasa dapat membawa banyak hal ke level berikutnya.
Hari ini, kami akan menunjukkan kepada Anda delapan cuplikan CSS dan JavaScript yang secara kreatif menggunakan tekstur kayu. Anda mungkin terkejut dengan apa yang Anda lihat. Mari kita mulai!
Kaca & Pasak Kayu WebGL Fragment Shader oleh byt3_m3chanic
Animasi interaktif trippy ini menggunakan shader yang didukung oleh WebGL. Tekstur kaca dan kayu dihasilkan melalui persamaan matematika. Hebatnya, tidak ada perpustakaan atau kerangka kerja eksternal yang digunakan di sini.
Lihat Pena Kaca dan Pasak Kayu / WebGL Fragment Shader oleh byt3_m3chanic
Gitar 3D CSS dengan Variasi Tekstur oleh S.Shahriar
Kami menyebutkan semua potensi variasi yang ditawarkan kayu. Gitar yang dapat disesuaikan ini berfungsi sebagai bukti. Gunakan kontrol untuk mengubah warna dan atur sudut pandang sesuai keinginan Anda. Tampilannya sangat detail, sementara animasinya sangat halus.
Lihat Pena Gitar 3D CSS dengan 5 variasi tekstur 🎸 oleh S.Shahriar
Tombol Radio Dengan Marmer & Kayu oleh Jon Kantner
Di permukaan, ini adalah bentuk yang agak sederhana menggunakan tombol radio bergaya. Tapi itu juga cara cerdas untuk memadukan UI formulir ke dalam latar belakang serat kayu. Saat Anda mengklik opsi yang berbeda, kelereng biru kecil “jatuh” ke tempatnya – mirip dengan permainan catur Cina.
Lihat Pena Tombol Radio Dengan Marmer dan Kayu oleh Jon Kantner
Kabinet Kolektor Kayu CSS oleh Lyn Fisher
Volume tekstur di sini sangat mengesankan. Rak pernak-pernik kayu ini menampilkan banyak benda – semuanya menggunakan tekstur yang unik. Seperti yang Anda duga, dibutuhkan sedikit CSS untuk memberi daya pada cuplikan ini. Kode sumber menunjukkan lebih dari 2.000 baris!
Lihat Pena Kabinet kolektor CSS oleh Lyn Fisher
Meja Biliar oleh Joshua van Boxtel
Peduli dengan permainan biliar? Meja biliar interaktif ini memanfaatkan kayu dengan sangat baik. Di antara tekstur di atas meja dan lantai, ini menciptakan tampilan yang autentik. Dan fakta bahwa Anda dapat memainkan permainan membuatnya semakin menyenangkan.
Lihat Pena Meja Biliar [CPC – Bump] oleh Joshua van Boxtel
Perangkat TV Lama CSS oleh Roque Ribeiro
Contoh ini menciptakan estetika ruangan penuh. Efek pencahayaannya luar biasa, dengan televisi jadul dan dudukan kayu membuat bayangan. Ini hampir seperti mundur selangkah ke masa lalu!
Lihat Pena TV LAMA CSS oleh Roque Ribeiro
Memutar Daftar Tugas oleh Mark Boots
Anda mungkin terkejut bahwa tanda berputar di cuplikan ini dibuat menggunakan unordered list (UL). Yang sama mengesankannya adalah ia menggunakan CSS murni – tidak perlu JavaScript. Tekstur kayu mengikat semuanya dengan tampilan yang realistis.
Lihat Pena bpk-daftar-gaya | arah UL oleh Mark Boots
Ubin Scrabble Kayu oleh Ryan Mulligan
Pemain Scrabble akan menyukai ubin huruf kayu ini. Presentasi menggunakan Memisahkan.js untuk menghidupkan animasi. Itu semua membuat pemandangan yang menyenangkan dan langsung dapat dikenali.
Lihat Pena Demo Pemisahan – Ubin Scrabble oleh Ryan Mulligan
Keajaiban Kayu Ditingkatkan Dengan Kode
Terlihat alami seperti kayu tidak mewakili tren besar dalam desain web. Tapi dengan cara yang membuat mereka lebih kuat. Saat Anda menemukan situs web yang menggunakannya, situs tersebut cenderung menonjol.
Contoh di atas semuanya menambahkan elemen kedalaman dan tekstur. Mereka juga mampu menciptakan suasana yang berbeda dari desain flat run-of-the-mill.
Mungkin mereka tidak cocok untuk setiap jenis situs web. Tetapi dalam contoh yang tepat, ini adalah pilihan yang sangat baik untuk melawan arus.
Ingin melihat lebih banyak contoh tekstur kayu beraction? Lihat kami Koleksi CodePen.
