Penjelasan detail pintu geser CSS Pintu geser

Sebenarnya konsep pintu geser CSS sudah muncul beberapa tahun lalu, namun belakangan ini semakin sering disebutkan. Namun sering kali orang bingung dengan efek tab, terutama bagi sebagian sobat pemula, maka dari itu penjelasan detailnya akan saya tulis disini, semoga bermanfaat.

Ngomong-ngomong, pintu geser bukanlah teknologi canggih, melainkan hanya teknik CSS. Ini menggunakan tumpang tindih dan geser gambar latar belakang untuk mencapai beberapa efek. Yang paling umum adalah navigasi sudut membulat. Kita dapat membayangkan dua latar belakang sudut membulat, satu di kiri dan satu lagi di kanan, sebagai dua pintu geser. Keduanya dapat digeser bersamaan dan tumpang tindih untuk menampilkan lebih sedikit konten, atau dapat digeser berlawanan satu sama lain Lainnya. Buka untuk menampilkan lebih banyak konten, seperti yang ditunjukkan di bawah ini:

Dalam beberapa tutorial sebelumnya, saya suka memotong gambar latar belakang menjadi dua bagian, satu lebar dan satu lagi sempit, untuk penyambungan. Sebenarnya, satu gambar saja sudah cukup.

Di sini, kami hanya menggunakan dua tag "a" dan "span". Gaya tersebut dapat menentukan tiga keadaan, yang dapat dikatakan sebagai cara paling sederhana.