Lain hari, tren desain lain! Tata letak kotak bento menjadi topik kali ini. Mereka berani dan cantik. Selain itu, mereka memuaskan mereka yang membutuhkan simetri.
Jadi, apa sebenarnya tata letak Bento itu? Anggap saja sebagai teka-teki. Wadah dengan ukuran berbeda dipadukan untuk menciptakan tampilan yang mulus. Terinspirasi menurut budaya Jepang, hal ini bermunculan di seluruh web.
Ada alasan bagus mengapa Bento semakin populer. Anda dapat menggunakan tata letak ini dalam banyak cara. Segala sesuatu mulai dari daftar postingan blog hingga fitur produk dimungkinkan. Mereka juga cocok untuk layar dasbor.
Kami juga harus menyebutkan peran evolusi CSS. CSS Grid dan Flexbox membuat tata letak ini lebih mudah dibuat. Tidak diperlukan peretasan atau solusi!
Dengan itu, inilah 8 tata letak kotak Bento yang indah.
Tata Letak Kotak Bento CSS yang Kompleks
CSS Grid mengemas banyak kekuatan ke dalam sedikit kode. Misalnya, tata letak grid yang rumit ini hanya membutuhkan 43 baris CSS. Tata letaknya efisien dan responsif secara alami. Oleh karena itu, Anda tidak perlu bermain-main dengan pertanyaan media.
Lihat Pena Tata Letak Bento yang Kompleks
Dasbor Responsif Bergaya Bento
Berikut tata letak dasbor cantik yang memanfaatkan Bento. Tata letaknya menawarkan cara terbaik untuk menampilkan konten yang relevan. Semuanya tertata rapi dan mudah diikuti. Penggunaan fotografi dan warna menjadikan contoh ini menonjol.
Lihat Pena Dasbor Responsif | Gaya Bento oleh Ecem Gokdogan
Tata Letak Konsep Desain Bento
Tata letak halaman ini berbeda dengan estetika Bento. Ada sidebar yang menampilkan navigasi dalam halaman. Mengklik tombol akan memperluasnya. Sementara itu, wadah isi mempertahankan ketinggian yang konsisten.
Lihat Pena konsep desain bento oleh Abhishek Bhardwaj
Kotak Bento-V1.0.1
Tata letak Bento juga mendapat manfaat dari minimalis. Tata letak ini menampilkan lebih sedikit fitur menarik. Perhatikan penggunaan spasi dan tipografi yang mudah dibaca. Grafik animasi menarik perhatian Anda tanpa berlebihan.
Lihat Pena Kotak Bento-V1.0.1 oleh Gwenaël Guiraud
Bento Lengket di Gulir
Presentasi yang “lengket” ini menambahkan efek khusus pada campurannya. Perhatikan bagaimana elemen tertentu menempel saat Anda menggulir. Idenya adalah Anda dapat melampaui jaringan statis. Bento juga bisa menyenangkan!
Lihat Pena Bento Lengket di Scroll ✨ oleh Jhey
Kotak Bento Menggunakan CSS Flexbox
Mari kita lihat contoh menyenangkan lainnya menggunakan Flexbox. Kisi ini memiliki tampilan neon dan menyertakan efek hover yang keren. Poin bonus di sini untuk menjaga keterbacaan dan daya tanggap.
Lihat Pena kotak bento – tantangan (Chrome +111) oleh EaterUsr
Tata Letak Berbasis Kartu dengan Batas Gradien
Berikut adalah contoh bagi mereka yang ingin menonjol dari yang lain. Tata letak berbasis kartu ini menampilkan batas animasi, efek “wipe”, dan gaya hover yang indah. Tata letaknya tetap bersih – bahkan dengan semua fasilitas tersebut.
Lihat Pena Kartu (batas gradien) oleh Dan
Kotak CSS & :has() Tata Letak Kotak
Kita bisa mencapai banyak hal dengan CSS :has() kelas semu. Contoh ini menggunakannya untuk menyesuaikan tata letak saat kotak ditambahkan dan dikurangi. Perhatikan saat tata letaknya mempertahankan simetri sempurna di seluruh bagiannya.
Lihat Pena Grid selalu bagus – CSS grid + :has() + transisi tampilan oleh Adam Argyle
Gunakan Kotak Bento untuk Menjaga Tata Letak Anda Tetap Bagus dan Rapi
Ide menggunakan estetika Bento dalam desain web bukanlah hal baru. Namun, teknik tata letak CSS yang lama membuatnya sulit untuk dibuat. Hal itu tidak lagi terjadi.
Mungkin bagian terbaiknya adalah CSS modern melakukan semua pekerjaan kotor. Kita tidak perlu menghitung perhitungan yang rumit. CSS Grid dan Flexbox dapat melakukan ini untuk kita.
Itu membuat kita bebas bereksperimen. Contoh di atas menunjukkan apa yang mungkin terjadi. Dan Anda bisa menjadi sekreatif yang Anda suka.
Ingin melihat lebih banyak contoh kotak Bento? Lihat kami Koleksi CodePen!
Atas
