Anda yang sudah lama menulis HTML mungkin masih ingat elemen tersebut. Ini adalah elemen khusus browser yang membuat spanduk teks bergulir di layar. Elemen ini tidak pernah ditambahkan ke HTML spesifikasi dan dukungan untuk itu sangat bervariasi di seluruh browser. Orang sering memiliki pendapat yang sangat kuat tentang penggunaan elemen ini — baik positif maupun negatif. Tetapi apakah Anda menyukai atau membencinya, itu memang berfungsi untuk membuat konten yang melampaui batas kotak terlihat.
Sebagian alasan mengapa itu tidak pernah sepenuhnya diterapkan oleh browser, selain dari pendapat pribadi yang kuat, adalah karena itu dianggap sebagai efek visual dan karena itu, itu tidak boleh didefinisikan oleh HTML, yang mendefinisikan struktur. Sebaliknya, efek visual atau presentasi harus dikelola oleh CSS. Dan CSS3 menambahkan modul tenda untuk mengontrol bagaimana browser menambahkan efek tenda untuk elemen.
Properti CSS3 Baru
CSS3 menambahkan lima properti baru untuk membantu mengontrol bagaimana konten Anda ditampilkan di tenda: gaya luapan, gaya tenda, hitungan putar tenda, arah tenda, dan kecepatan tenda.
gaya melimpah
Properti overflow-style (yang juga kita bahas dalam artikel CSS Overflow) mendefinisikan gaya yang disukai untuk konten yang melebihi kotak konten. Jika Anda menetapkan nilai ke garis tenda atau blok tenda, konten Anda akan meluncur masuk dan keluar ke kiri/kanan (garis tenda) atau ke atas/bawah (blok tenda).
gaya tenda
Properti ini mendefinisikan bagaimana konten akan berpindah ke tampilan (dan keluar). Pilihannya adalah gulir, geser, dan bergantian. Gulir dimulai dengan konten sepenuhnya keluar dari layar, dan kemudian bergerak melintasi area yang terlihat hingga semuanya benar-benar keluar dari layar lagi. Slide dimulai dengan konten sepenuhnya keluar dari layar dan kemudian bergerak melintasi hingga konten sepenuhnya dipindahkan ke layar dan tidak ada lagi konten yang tersisa untuk digeser di layar. Terakhir, bergantian memantulkan konten dari sisi ke sisi, meluncur ke depan dan ke belakang.
marquee-play-count
Salah satu kelemahan menggunakan elemen MARQUEE adalah bahwa tenda tidak pernah berhenti. Tetapi dengan properti gaya marquee-play-count Anda dapat mengatur marquee untuk memutar konten dan mematikan untuk beberapa kali tertentu.
arah tenda
Anda juga dapat memilih arah yang akan digulirkan konten di layar. Nilai maju dan mundur didasarkan pada arah teks ketika gaya luapan adalah garis tenda dan naik atau turun ketika gaya luapan adalah blok tenda.
Detail Arah Tenda
gaya melimpah |
Arah Bahasa | meneruskan | balik |
|---|---|---|---|
garis tenda |
ltr | kiri | Baik |
| rtl | Baik | kiri | |
tenda-blok |
naik | turun |
kecepatan tenda
Properti ini menentukan seberapa cepat konten bergulir di layar. Nilainya lambat, normal, dan cepat. Kecepatan sebenarnya tergantung pada konten dan browser yang menampilkannya, tetapi nilainya harus lambat lebih lambat dari biasanya yang lebih lambat dari cepat.
Dukungan Browser dari Marquee Properties
Anda mungkin perlu menggunakan awalan vendor agar elemen tenda CSS berfungsi. Mereka adalah sebagai berikut:
| CSS3 | Awalan Vendor |
|---|---|
overflow-x: garis tenda; |
overflow-x: -webkit-marquee; |
gaya tenda |
-webkit-marquee-style |
marquee-play-count |
-webkit-marquee-pengulangan |
arah tenda: maju|mundur; |
-webkit-marquee-direction: maju|mundur; |
kecepatan tenda |
-webkit-marquee-speed |
| tidak setara | -webkit-marquee-increment |
Properti terakhir memungkinkan Anda untuk menentukan seberapa besar atau kecil langkah yang harus dilakukan saat konten bergulir di layar di tenda.
Agar tenda Anda berfungsi, Anda harus menempatkan nilai awalan vendor terlebih dahulu dan kemudian mengikutinya dengan nilai spesifikasi CSS3. Misalnya, berikut adalah CSS untuk tenda yang menggulir teks lima kali dari kiri ke kanan di dalam kotak 200x50.
{
lebar: 200 piksel; tinggi: 50 piksel; spasi putih: nowrap;
melimpah: tersembunyi;
overflow-x:-webkit-marquee;
-webkit-marquee-direction: ke depan;
-webkit-marquee-style: gulir;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: kecil;
-webkit-marquee-pengulangan: 5;
overflow-x: garis tenda;
arah tenda: maju;
gaya tenda: gulir;
kecepatan tenda: normal;
marquee-play-count: 5;
}