Teknologi pintu geser di CSS

Kemajuan yang sering dibahas dalam CSS adalah kemampuan untuk menumpuk gambar latar belakang, memungkinkan gambar tersebut digeser di atas satu sama lain untuk menciptakan efek khusus. Menurut aturan CSS 2.0 saat ini, setiap gambar latar memerlukan elemen HTMLnya sendiri. Dalam banyak kasus, markup tipikal sudah menyediakan berbagai elemen untuk kita gunakan sebagai komponen antarmuka umum.

Dengan desain yang sederhana, kita bisa melakukannya.

Inovasinya dari mana?

Banyak tag navigasi berbasis CSS yang saya lihat sebagian besar memiliki karakteristik yang sama: blok warna persegi panjang, mungkin hanya garis luar, tidak ada batas untuk tag yang dipilih saat ini, dan tag berubah warna saat penunjuk tetikus bergerak di atasnya. Apakah hanya ini yang bisa diberikan CSS kepada kita? Serangkaian kotak kecil dan warna menjemukan?

Sebelum CSS diadopsi secara luas, kita telah melihat banyak inovasi dalam desain navigasi tab. Bentuk asli, ahli pencampuran warna, dan tiruan dari banyak antarmuka fisik di dunia nyata. Namun desain ini sering kali terlalu bergantung pada gambar yang dibuat rumit dengan teks, atau dikemas ke dalam tabel bertingkat. Memodifikasi teks atau mengubah urutan label memerlukan proses yang rumit. Bahkan teks tidak mungkin diregangkan, atau akan sangat mempengaruhi tata letak halaman.

Bilah navigasi hanya teks lebih tahan lama dan memuat lebih cepat dibandingkan bilah navigasi teks sebagai gambar. Demikian pula, kita bahkan dapat menambahkan atribut alt ke setiap gambar. Bagi mereka yang memiliki gangguan penglihatan, teks biasa dapat diubah ukurannya dengan bebas. Tidak mengherankan, bilah navigasi berbasis teks biasa, ditata dengan CSS, kembali hadir dalam desain web. Namun, sebagian besar desain bilah navigasi berbasis CSS sejauh ini masih tidak ada artinya. Teknologi yang baru diadopsi (seperti CSS) memungkinkan kita melakukan yang lebih baik, tanpa kehilangan efek dari tag tabel dan gambar yang disebutkan sebelumnya.

teknologi pintu geser

Keahlian yang indah, komponen antarmuka yang benar-benar fleksibel, dan ukuran adaptif berdasarkan teks, kita dapat membuatnya dengan dua gambar latar belakang yang independen. Satu di kiri dan satu lagi di kanan. Anggaplah kedua gambar ini sebagai dua pintu geser yang dapat digeser bersamaan dan saling tumpang tindih untuk menempati ruang yang lebih sempit, atau digeser terpisah satu sama lain untuk menempati ruang yang lebih luas, seperti yang ditunjukkan pada gambar berikut:

Dalam model ini, satu gambar menutupi sebagian gambar lainnya. Misalkan kita menempatkan beberapa konten unik di sekitar setiap gambar, seperti sudut membulat untuk label. Kita tidak ingin gambar atas mengaburkan gambar bawah sepenuhnya. Untuk mencegah hal ini terjadi, kita dapat membuat gambar di atas (gambar di sebelah kiri pada contoh ini) sesempit mungkin. Namun tetap pastikan lebar tertentu untuk menunjukkan keunikan salah satu sisi label. Jika sudut luarnya membulat, kita harus mengontrol gambar di atas agar memiliki lebar yang sama dengan bagian busurnya.

Jika ukuran target bertambah dan melebihi lebar yang ditunjukkan di atas, gambar akan melebar karena perubahan ukuran teks dan font, sehingga menciptakan celah yang tidak sedap dipandang. Yang perlu kita nilai adalah memperkirakan seberapa besar skalabilitasnya. Jika saya mengubah ukuran font di browser, apakah targetnya akan bertambah? Secara praktis, kita setidaknya harus memperkirakan ukuran font meningkat hingga 300%. Gambar latar belakang juga harus mengakomodasi pertumbuhan ini. Untuk contoh di atas, kami mengatur gambar bawah (kanan) menjadi 400*150 piksel dan gambar atas menjadi 9*150 piksel.

Jika label diregangkan, gambar akan bergeser, pintu menjadi lebih lebar, dan lebih banyak gambar yang terlihat:

Dalam contoh ini, saya membuat dua gambar label 3D yang halus dan tipis di Photoshop, seperti yang ditunjukkan di awal artikel. Pertama, interiornya terang dan pinggirannya lebih gelap untuk mewakili label yang dipilih saat ini. Untuk menerapkan model trik ini pada gambar kiri dan kanan, kita perlu memperluas area yang dicakup oleh gambar label dan memotongnya menjadi dua bagian:

Pendekatan yang sama akan diterapkan pada label yang disebut "saat ini". Setelah kita memiliki keempat gambar ini (1, 2, 3, 4) kita dapat mulai membuat label dengan markup dan CSS.

pembuatan label

Saat Anda mempertimbangkan penggunaan CSS untuk membuat daftar horizontal, Anda akan menemukan bahwa setidaknya ada dua cara untuk menyusun item daftar pada baris yang sama. Kedua metode tersebut memiliki kelebihannya masing-masing, namun keduanya memerlukan CSS untuk mengatasi kebingungan yang disebabkan oleh tata letak. Satu metode menggunakan kotak sebaris, metode lainnya menggunakan pelampung.

Metode pertama, yang mungkin lebih umum, adalah menampilkan semua item daftar sebaris. Keindahan pendekatan inline terletak pada kesederhanaannya. Namun, untuk teknologi pintu geser yang akan kita bahas, metode inline memiliki beberapa masalah interpretasi pada browser tertentu. Metode kedua, yang akan kita fokuskan, adalah menggunakan float untuk menyusun item daftar di baris yang sama. Yang membuat frustrasi, perilaku pelampung yang tampaknya kontradiktif ternyata menghindari logika alam. Namun, pemahaman dasar tentang cara menangani beberapa elemen mengambang, dan apa arti mengambang yang andal, masih layak untuk didiskusikan.

Kami akan menggunakan jenis elemen mengambang lain untuk menyelesaikan masalah susunan elemen mengambang. Dengan cara ini, elemen induk mencakup seluruh elemen anak. Oleh karena itu, kita dapat menambahkan warna latar belakang dan gambar latar belakang pada label. Sangat penting untuk diingat bahwa elemen teks yang mengikuti label menggunakan fungsi clear di CSS untuk menghapus objek mengambang. Hal ini mencegah label mengambang mempengaruhi posisi elemen lain pada halaman.

Kami mulai dengan markup berikut:

<div id="tajuk">
<ul>
<li><a href="#">Beranda</a></li>
<li id="saat ini"><a href="#">Berita</a></li>
<li><a href="#">Produk</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>

Pada kenyataannya, div #header mungkin juga berisi logo dan kotak pencarian. Sebagai contoh, kami ingin memperpendek nilai setiap hyperlink di rantai jangkar. Jelasnya, nilai-nilai ini harus berisi lokasi file atau direktori dengan benar.

Kita mulai mendesain daftar dengan memposisikan wadah #header. Hal ini memastikan bahwa kontainer benar-benar bertindak sebagai kontainer untuk menampung item daftar yang mengambang di dalamnya. Karena elemennya mengambang, kita juga perlu mendeklarasikan lebarnya menjadi 100%. Tambahkan latar belakang kuning sementara untuk memastikan wadah induk memenuhi seluruh area di belakang label. Demikian pula, atur properti teks default untuk memastikan gaya seragam:

#tajuk {
mengapung:kiri;
lebar:100%;
latar belakang:kuning;
ukuran font:93%;
tinggi garis: normal;
}

Sekarang, kita juga perlu mengatur nilai margin/padding default untuk daftar tidak berurutan ke 0, dan menghilangkan tanda di depan item daftar. Setiap item daftar melayang ke kiri:

#header ul {
margin:0;
bantalan:0;
gaya daftar: tidak ada;
}
#header li {
mengapung:kiri;
margin:0;
bantalan:0;
}Atur rantai jangkar untuk memaksa rendering sebagai objek blok, dan kita dapat mengontrol semua gaya tanpa khawatir:

#tajuk sebuah {
tampilan:blok;
}

Selanjutnya, kita menambahkan gambar latar belakang di sebelah kanan ke item daftar (perubahan ditampilkan dalam huruf tebal):

Sekarang kita dapat memposisikan gambar kiri di sebelah kiri rantai jangkar (elemen di dalam wadah). Kami juga menambahkan padding, yang memperbesar label dan menjauhkan teks dari tepi label:

#tajuk sebuah {
tampilan:blok;
latar belakang:url("norm_left.gif")
tidak ada pengulangan kiri atas;
bantalan:5px 15px;
}

Dengan cara ini kita mendapatkan efek 2. Perhatikan bagaimana label kita dibentuk. Di sini, pengguna IE5/Mac akan langsung terkejut, "Ya Tuhan, tab saya ditumpuk secara vertikal dan meluas ke seluruh layar!" Untuk saat ini, coba ikuti langkah-langkah di bawah ini, atau jika nyaman, beralihlah ke browser lain untuk sementara, dan masalah dengan versi IE5/Mac akan segera teratasi.

Sekarang gambar latar belakang untuk label umum sudah lengkap, kita perlu mengganti gambar untuk label "saat ini". Kita mencapainya dengan menambahkan id="current" dan rantai jangkar ke item daftar target. Karena tidak perlu mengubah tampilan latar belakang selain gambar, kami menggunakan fitur gambar latar:

Kami menempatkan gambar ke latar belakang wadah #header (menggantikan latar belakang kuning asli), memindahkan gambar latar belakang ke bawah, dan menambahkan warna latar belakang yang sesuai ke ruang kosong di atas gambar. Pada saat yang sama, hapus padding yang diwarisi dari body dan tambahkan 10 piksel padding ke sisi atas, kiri dan kanan ul:

#tajuk {
mengapung:kiri;
lebar:100%;
latar belakang:#DAE0D2 url("bg.gif")
ulangi-x bawah;
ukuran font:93%;
tinggi garis: normal;
}
#header ul {
margin:0;
bantalan:10px 10px 0;
gaya daftar: tidak ada;
}

Kita melakukan ini dengan mengurangi nilai padding bawah dari rantai jangkar normal sebesar 1 piksel (5px-1px=4px), dan kemudian menambahkan padding yang dikurangi ke rantai jangkar "saat ini".

sentuhan akhir

Pengamat yang cermat mungkin telah memperhatikan sudut label putih pada contoh sebelumnya. Sudut buram ini digunakan untuk mencegah gambar di bawah terlihat sama dengan gambar di atas. Secara teori, kita dapat mencoba menggunakan bagian gambar latar belakang agar sesuai dengan latar belakang label. Namun label kita akan bertambah tinggi. Jika kita mencoba memindahkan warna latar belakang, gambar latar belakang akan menjadi lebih pendek. Sebaliknya, ubah gambar sehingga sudut label menjadi transparan. Jika busurnya anti-alias, kami menggunakan warna latar belakang yang lebih merata di sekitar tepinya.

Sekarang sudut-sudutnya telah menjadi transparan, gambar di sebelah kiri akan terlihat melalui sudut-sudut gambar di sebelah kanan. Untuk mengimbanginya, kami menambahkan padding (9px) ke item formulir yang sesuai dengan lebar gambar di sebelah kiri. Sekarang kita telah menambahkan padding ke item formulir, kita perlu menghapus lebar yang sama untuk memusatkan teks (15px-9px=6px):

#header li {
mengapung:kiri;
latar belakang:url("kanan.gif")
jangan ulangi kanan atas;
margin:0;
bantalan:0 0 0 9 piksel;
}
#tajuk sebuah {
tampilan:blok;
latar belakang:url("kiri.gif")
tidak ada pengulangan kiri atas;
bantalan:5px 15px 4px 6px;
}

Ini belum berakhir, karena penambahan padding sebesar 9 piksel menciptakan celah antara gambar kiri dan sisi kiri label. Sekarang tepi kiri dan kanan dari "pintu" yang terlihat telah terhubung, kita tidak perlu lagi membiarkan gambar kiri berada di atas. Jadi, tukar urutan kedua gambar latar belakang dan balikkan. Tukar juga dua gambar yang digunakan dalam tag "saat ini":

#header li {
mengapung:kiri;
latar belakang:url("kiri.gif")
tidak ada pengulangan kiri atas;
margin:0;
bantalan:0 0 0 9 piksel;
}
#header a, #header kuat, #header span {
tampilan:blok;
latar belakang:url("kanan.gif")
jangan ulangi kanan atas;
bantalan:5px 15px 4px 6px;
}
#header #saat ini {
gambar-latar belakang:url("left_on.gif");
}
#header #saat ini a {
gambar-latar belakang:url("kanan_di.gif");
bantalan-bawah:5px;
}

Setelah menyelesaikan ini, kita sampai pada Efek 4. Perhatikan bahwa sudut transparan membuat area yang tidak dapat diklik di sisi kiri label. Area ini berada di luar teks, namun masih terlihat jelas. Tidak perlu menggunakan gambar transparan pada kedua sisi label. Jika kita tidak ingin membuat area tidak valid ini, maka kita harus menggunakan warna di belakang label lalu mengganti gambar transparan di sudut label dengan warna tersebut. Sekarang kita simpan saja sudut transparan ini.

Untuk masalah selanjutnya, kita akan melakukan semua perubahan sekaligus: membuat teks label lebih berat, mengubah teks pada label normal menjadi coklat, mengubah teks label "saat ini" menjadi abu-abu tua, menghilangkan garis bawah pada tautan , dan terakhir ubah warna teks hover Berubah menjadi warna abu-abu tua yang sama. Setelah serangkaian perubahan, kita akan melihat efeknya sejauh ini5.

Solusi yang konsisten
Setelah Effect 2, satu masalah yang kami kenali adalah bahwa dalam mode penjelajahan IE5/Mac, setiap tab meluas dan menempati seluruh lebar browser, sehingga tab-tab ditumpuk secara vertikal. Ini bukan yang kami inginkan.

Di sebagian besar browser, elemen mengambang menyusut ke ukuran minimum dari konten yang memuatnya. Jika elemen melayang berisi gambar atau berupa gambar, elemen tersebut akan menyusut sesuai lebar gambar. Jika hanya berisi teks, maka akan menyusut menjadi lebar teks terpanjang dan tidak memiliki bagian atas.

Masalah terjadi pada gambar di IE5/Mac ketika elemen objek blok lebar otomatis dimasukkan ke dalam elemen mengambang. Browser lain masih meminimalkan float dan mengabaikan elemen blok di dalam container. Namun IE5/Mac tidak mengikuti perilaku ini, melainkan memperluas elemen objek float dan block seluas mungkin. Untuk mengatasi masalah ini, kami akan menerapkan rantai jangkar pada saat yang sama, tetapi hanya untuk IE5/Mac, agar tidak menyerah pada browser lain. Pertama, kita menetapkan aturan mengambang untuk rantai jangkar. Kemudian, kami menggunakan metode komentar garis miring terbalik untuk menyembunyikan aturan ini sehingga hanya berlaku untuk IE5/Mac dan mengabaikan browser lain:

Menarik kesimpulan dari satu contoh Kami baru saja mempraktikkan teknik pintu geser, menggunakan teks biasa dan daftar tak berurutan untuk membuat label navigasi, dengan sedikit gaya. Ini dimuat dengan cepat, mudah dikelola, dan ukuran teks dapat diperluas secara signifikan tanpa merusak tampilannya. Kita tidak perlu mengulangi fleksibilitas teknologi pintu geser dalam menciptakan gaya bilah navigasi yang rumit.

Tidak ada yang tidak dapat Anda pikirkan dan tidak ada yang tidak dapat Anda lakukan. Efek akhir menunjukkan kepada kita sebuah contoh, namun desain kita tidak dapat dibatasi oleh ini.

Dalam beberapa kasus, label belum tentu simetris. Saya segera membuat versi kedua dari label ini, juga dengan gaya 3D berbayang, tepi bersudut, dan bagian kiri yang khas. Menurut versi kedua, kita bahkan bisa menukar posisi gambar kiri dan kanan. Dengan tata letak detail dan kontrol gambar cerdas ini, kita dapat menghapus batas bawah tombol sehingga gambar label lebih pas dengan latar belakang, seperti yang ditunjukkan pada versi ketiga. Jika browser Anda mendukung peralihan di antara beberapa lembar gaya, Anda bahkan dapat menggunakannya untuk beralih secara bebas di antara beberapa versi bilah navigasi.

Masih banyak dampak lainnya yang belum kami sebutkan. Catatan singkat, saya mengubah warna teks saat mouseover, namun keseluruhan gambar dapat diganti untuk menciptakan efek transformasi yang lebih menarik. Meskipun ada dua elemen HTML bersarang di markup, CSS dapat digunakan untuk mencapai beberapa efek yang belum terpikirkan oleh kita. Apa yang kami buat dalam contoh ini hanyalah tab bar horizontal, namun pintu geser dapat digunakan dalam banyak situasi lainnya. Bagaimana menurutmu?