Oni koji ste pisali HTML dugo vremena mogu se setiti elementa. Ovo je bio element specifičan za pretraživač koji je kreirao baner skrolovanja teksta preko ekrana. Ovaj element nikada nije dodan u HTML specifikaciju, a podrška za njega variirala je široko u svim pretraživačima. Ljudi su često imali jako mišljenje o upotrebi ovog elementa - i pozitivnog i negativnog. Ali da li ste ga voleli ili mrzili, to je služilo svrsi stvaranja sadržaja koji je prekrivio granice kutije vidljivim.
Dio razloga zbog koga ga pretraživači nisu nikad u potpunosti sproveli, osim snažnog ličnog mišljenja, bio je to što se smatra vizuelnim efektom i kao takav ne bi trebalo definisati HTML-om, koji definiše strukturu. Umesto toga, vizuelne ili prezentacijske efekte treba upravljati CSS. CSS3 dodaje marquee modul kako bi kontrolisao kako pretraživači dodaju efekat marquee elementima.
Nove CSS3 svojstva
CSS3 dodaje pet novih osobina kako bi vam pomogao da kontrolišete kako se vaš sadržaj prikazuje u šarži: stil prelivanja, šareni stil, marquee-play-count, marquee-direction i marquee-speed.
stil prelivanja
Svojstvo prelivnog stila (o kojem sam takođe govorio u članku CSS Overflow) definiše željeni stil za sadržaj koji preliva kutiju sa sadržajem. Ako postavite vrednost na marque-line ili marquee-blok, vaš sadržaj će se pomerati i odlazi na levo / desno (marque-line) ili gore / dolje (marquee-block).
stil stila
Ova svojina definira kako će se sadržaj prebaciti u pogled (i izlaz).
Opcije su pomeranje, klizanje i alternativno. Skrolovanje počinje sa ekrana potpuno isključenim ekranom, a zatim se pomiče preko vidljivog područja sve dok se potpuno ne isključi ekran. Slajd počinje sa sadržajem potpuno isključenim ekranom, a zatim se pređe dok se sadržaj ne preseli na ekran i nema više sadržaja koji je ostavljen da se klizi na ekranu.
Na kraju, alternativa odbija sadržaj sa druge strane, klizanje napred i nazad.
marquee-play-count
Jedan od nedostataka korišćenja elementa MARQUEE jeste da se šalter nikad ne zaustavlja. Ali sa svojstvom marquee-play-count karakteristike stila možete postaviti šetnju da biste u određeno vreme vraćali i isključivali sadržaj.
marquee-direction
Takođe možete da izaberete pravac kojim se sadržaj treba pomerati na ekranu. Vrednosti napred i nazad su zasnovane na pravovremenosti teksta kada je prelivni stil marque-line i gore ili dolje kada je prelivni stil marquee-block.
Detalji o smernicama
| stil prelivanja | Language Direction | napred | unazad |
|---|---|---|---|
| marquee-line | ltr | levo | desno |
| rtl | desno | levo | |
| maratonac-blok | up | dole |
šina-brzina
Ova osobina određuje koliko brzo se sadržaj pomera na ekranu. Vrednosti su spore, normalne i brze. Stvarna brzina ovisi o sadržaju i pregledaču koji ga prikazuje, ali vrijednosti moraju biti spore je sporije od normalne, što je sporije nego brzo.
Browser podrška Marquee Properties
Možda ćete morati da koristite prefiksu proizvođača kako biste dobili elemente CSS marquee-a za rad. One su sledeće:
| CSS3 | Vendorski prefiks |
|---|---|
| preliv-x: marque-line; | overflow-x: -webkit-marquee; |
| stil stila | -webkit-marquee-style |
| marquee-play-count | -webkit-marquee-ponavljanje |
| pravac smera: napred | unazad; | -webkit-marquee-direction: forward | nazad; |
| šina-brzina | -webkit-marquee-brzina |
| bez ekvivalenta | -webkit-marquee-increment |
Posljednja osobina vam omogućava da definišete koliko će biti velikih ili malih koraka kako se sadržaj skrovi na ekranu u marquee-u.
Da bi vaši marati mogli da rade, trebalo bi prvo postaviti prefiksne vrijednosti proizvođača, a zatim ih pratiti vrijednostima specifikacije CSS3. Na primjer, ovdje je CSS za markicu koja pomjera tekst pet puta s lijeva na desno u okviru 200x50 kutije.
{
širina: 200px; visina: 50px; bijeli prostor: sada;
preliv: sakriven;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: forward;
-webkit-marquee-style: scroll;
-webkit-marquee-brzina: normalna;
-webkit-marquee-increment: mali;
-webkit-marquee-ponavljanje: 5;
preliv-x: marque-line;
pravac smera: napred;
marquee-style: scroll;
marquee-brzina: normalna;
marquee-play-count: 5;
}