Cei dintre voi care ați scris HTML de mult timp s-ar putea să-și amintească elementul. Acesta a fost un element specific browserului care a creat un banner de text care derulează pe ecran. Acest element nu a fost adăugat niciodată la HTML specificațiile și suportul pentru acesta au variat foarte mult de la un browser la altul. Oamenii au avut adesea păreri foarte puternice despre utilizarea acestui element - atât pozitiv cât și negativ. Dar, indiferent dacă l-ați iubit sau l-ați urât, acesta a servit scopului de a face vizibil conținut care a depășit limitele cutiei.
O parte din motivul pentru care nu a fost niciodată complet implementată de browsere, în afară de o opinie personală puternică, a fost aceea este considerat un efect vizual și, ca atare, nu ar trebui definit prin HTML, care definește structura. În schimb, efectele vizuale sau de prezentare ar trebui gestionate de CSS. Și CSS3 adaugă modulul de marcare pentru a controla modul în care browserele adaugă efect marca la elemente.
Proprietăți CSS3 noi
CSS3 adaugă cinci proprietăți noi pentru a ajuta la controlul modului în care conținutul dvs. se afișează în cadru: stil de depășire, stil de cadru, număr de joc-cadru, direcție-cadru și viteză-cadru.
overflow-style
Proprietatea de tip overflow (despre care am discutat și în articolul CSS Overflow) definește stilul preferat pentru conținutul care revarsă caseta de conținut. Dacă setați valoarea la linia de tip marcaj sau bloc de tip marcaj, conținutul dvs. va aluneca în și la stânga / dreapta (linia de marcaj) sau sus / jos (bloc de tip marcaj).
în stil de marcă
Această proprietate definește modul în care conținutul va trece în vizualizare (și în afară). Opțiunile sunt sul, glisați și alternativ. Derularea începe cu conținutul complet dezactivat de pe ecran și apoi se deplasează pe zona vizibilă până când totul este complet dezactivat din nou de pe ecran. Diapozitivul începe cu conținutul complet de pe ecran și apoi se deplasează până când conținutul s-a deplasat complet pe ecran și nu mai este conținut care să rămână pe ecran. În cele din urmă, alternativul ricoșează conținutul dintr-o parte în alta, alunecând înainte și înapoi.
marcaj-joc-contor
Unul dintre dezavantajele utilizării elementului MARQUEE este acela că markerul nu se oprește niciodată. Dar, cu proprietatea de tip „marquee-play-count”, puteți seta tinda pentru a roti și dezactiva conținutul de un anumit număr de ori.
direcție de marcaj
De asemenea, puteți alege direcția pe care conținutul trebuie să o deruleze pe ecran. Valorile înainte și invers se bazează pe direcționalitatea textului atunci când stilul de revărsare este linie de marcaj și sus sau jos când stilul de revărsare este bloc de marcaj.
Detalii Marquee-Direction
overflow-style |
Direcția de limbă | redirecţiona | verso |
|---|---|---|---|
linie de marcaj |
ltr | stânga | dreapta |
| rtl | dreapta | stânga | |
bloc-cadru |
sus | jos |
viteza de marcă
Această proprietate determină cât de rapid 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 lente, este mai lent decât în mod normal, care este mai lent decât rapid.
Suport pentru browser al proprietăților Marquee
Este posibil să trebuiască să utilizați prefixele furnizorului pentru a face ca elementele de marcaj CSS să funcționeze. Acestea sunt după cum urmează:
| CSS3 | Prefixul furnizorului |
|---|---|
overflow-x: linie de marcaj; |
overflow-x: -webkit-marquee; |
în stil de marcă |
-webkit-marquee-style |
marcaj-joc-contor |
-webkit-marquee-repetare |
direcție marcaj: înainte | invers; |
-webkit-marquee-direction: înainte | înapoi; |
viteza de marcă |
-webkit-marquee-speed |
| fără 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 cadrul marcajului.
Pentru a face ca marcajul să funcționeze, ar trebui să plasați mai întâi valorile prefixate de furnizor și apoi să le urmați cu valorile specificațiilor CSS3. De exemplu, iată CSS-ul pentru un marcaj care derulează textul de cinci ori de la stânga la dreapta într-o casetă de 200x50.
{
lățime: 200px; înălțime: 50px; spațiu alb: nowrap;
overflow: ascuns;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: înainte;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normal;
-webkit-marquee-increment: mic;
-webkit-marquee-repetare: 5;
overflow-x: linie de marcaj;
direcție de marcaj: înainte;
stil-cadru: scroll;
viteza-cadru: normal;
marcaj-joc-număr: 5;
}