Aceia dintre voi care scriu HTML pentru o lungă perioadă de timp pot aminti elementul. Acesta a fost un element specific browserului care a creat un banner de derulare a textului pe ecran. Acest element nu a fost adăugat niciodată în specificația HTML, iar suportul pentru acesta a variat foarte mult între browsere. Oamenii aveau adesea opinii foarte puternice despre utilizarea acestui element - atât pozitiv, cât și negativ. Dar dacă l-ați iubit sau l-ați urât, acesta a servit scopului de a face conținutul care a depășit limitele casetei vizibile.
O parte din motivul pentru care nu a fost niciodată implementat pe deplin de browsere, în afară de opinia personală puternică, a fost că este considerat un efect vizual și ca atare nu ar trebui să fie definit de codul HTML, care definește structura. În schimb, efectele vizuale sau de prezentare ar trebui să fie gestionate de CSS. Și CSS3 adaugă modulul marquee pentru a controla modul în care browserele adaugă efectul de marquee elementelor.
Noi proprietăți CSS3
CSS3 adaugă cinci proprietăți noi pentru a vă ajuta să controlați modul în care conținutul dvs. se afișează în marquee: stilul de suprapunere, stilul marquee, marquee-play-count, direcția marquee și viteza marquee.
preaplin stil
Proprietatea de tip overflow (pe care am discutat-o și în articolul Overflow CSS) definește stilul preferat pentru conținutul care depășește caseta de conținut. Dacă setați valoarea la linia de marcaj sau la blocarea marcajului, conținutul dvs. va aluneca și se va alinia la stânga / la dreapta (linia de marcaj) sau în sus / în jos (bloc de marcaj).
stil Marquee
Această proprietate definește modul în care conținutul se va muta în vizualizare (și ieșire).
Opțiunile sunt derulare, glisare și alternativă. Derulați începe cu conținutul complet în afara ecranului și apoi se deplasează în zona vizibilă până când ecranul este complet oprit din nou. Diapozitivul începe cu conținutul complet dezactivat pe ecran și apoi se mișcă până când conținutul se mișcă complet pe ecran și nu mai rămâne conținut pentru alunecare pe ecran.
În cele din urmă, alternativul bate conținutul dintr-o parte în alta, alunecând înainte și înapoi.
Marquee-play-count
Unul dintre dezavantajele utilizării elementului MARQUEE este că marca nu se oprește niciodată. Dar, cu proprietatea de stil marquee-play-count puteți seta marquee pentru a roti conținutul pe și de pe un anumit număr de ori.
marquee-direcție
De asemenea, puteți alege direcția în care conținutul să fie derulat pe ecran. Valorile înainte și înapoi se bazează pe direcționalitatea textului atunci când stilul de depășire este linia de marcaj și în sus sau în jos atunci când stilul de depășire este un bloc de marcaj.
Marquee-Direction Detalii
| preaplin stil | Direcția de limbă | redirecţiona | verso |
|---|---|---|---|
| Marquee-line | LTR | stânga | dreapta |
| rtl | dreapta | stânga | |
| marquee-bloc | sus | jos |
Marquee viteză
Această proprietate determină cât de repede se derulează conținutul pe ecran. Valorile sunt lente, normale și rapide. Viteza reală depinde de conținut și de browserul care îl afișează, dar valorile trebuie să fie lentă este mai lent decât în mod normal, care este mai lent decât rapid.
Sprijinul browserului pentru proprietățile Marquee
Este posibil să fie necesar să utilizați prefixele furnizorilor pentru a obține elementele de marcă CSS să funcționeze. Ele sunt după cum urmează:
| CSS3 | Prefixul furnizorului |
|---|---|
| overflow-x: marquee-line; | overflow-x: -webkit-marquee; |
| Stil Marquee | -webkit-Marquee stil |
| Marquee-play-count | -webkit-marquee-repetiție |
| direcția marcajului: înainte | înapoi; | -webkit-marquee-direction: forward | înapoi; |
| Marquee viteză | -webkit-Marquee-viteză |
| niciun echivalent | -webkit-marquee-increment |
Ultima proprietate vă permite să definiți cât de mari sau mici ar trebui să fie pașii pe măsură ce conținutul se derulează pe ecran în marcă.
Pentru ca marcheta dvs. să funcționeze, ar trebui să plasați mai întâi valorile prefixate ale furnizorului și apoi să le urmați cu valorile specificațiilor CSS3. De exemplu, aici este CSS pentru un marquee care derulează textul de cinci ori de la stânga la dreapta într-o cutie de 200x50.
{
lățime: 200px; înălțime: 50px; spațiu alb: acum;
overflow: ascuns;
overflow-x: -webkit-cadru de selecție;
-webkit-marquee-direction: forwards;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: mic;
-webkit-marquee-repetiție: 5;
overflow-x: marquee-line;
direcția marcajului: înainte;
marquee-style: scroll;
marquee-speed: normal;
marquee-play-count: 5;
}