Oni od vas koji dugo čitaju HTML, možda će zapamtiti element. To je bio element specifičan za preglednik koji je stvorio zastavicu pomicanja teksta na zaslonu. Ovaj element nikada nije dodan u HTML specifikaciju, a podrška za njega u širokom rasponu varira od preglednika. Ljudi su često imali vrlo jake stavove o korištenju tog elementa - pozitivnog i negativnog. No, bilo da ste ga voljeli ili ste ga mrzili, poslužili su se u svrhu stvaranja sadržaja koji je prenio granice okvira vidljivim.
Dio motiva koji nikada nije implementirao preglednici, osim snažnog osobnog mišljenja, bio je to da se smatra vizualnim efektom i kao takav ne bi trebao biti definiran HTML-om koji definira strukturu. Umjesto toga, CSS treba upravljati vizualnim ili prezentacijskim efektima. A CSS3 dodaje modul marquee kako bi kontrolirala kako preglednici dodaju efekt marquee elementima.
Novi CSS3 svojstva
CSS3 dodaje pet novih svojstava kako bi pomogla u kontroli načina prikazivanja vašeg sadržaja u okviru: stilu prelijevanja, stilu marquee, brojačima za reprodukciju, brojem okvira i brojem okvira.
preljev-stil
Značajka prelijevanja (koji sam također razgovarao u članku CSS Overflow) definira željeni stil sadržaja koji prelijeva okvir sadržaja. Ako postavite vrijednost na okvir za označavanje ili blokiranje okvira, sadržaj će se kliznuti ulijevo ili udesno ili prema gore ili dolje (blok za zaključavanje).
nadstrešnica stilu
Ovo svojstvo definira kako će se sadržaj premjestiti u prikaz (i van).
Opcije su pomicanje, klizanje i izmjena. Pomicanje počinje sa sadržajem potpuno isključenim zaslonom, a zatim se pomiče kroz vidljivo područje dok se ponovno ne isključi. Slide počinju sa sadržajem potpuno isključenog zaslona, a zatim se pomiče sve dok se sadržaj potpuno ne preseli na zaslon i više nema sadržaja koji bi se mogao pomaknuti na zaslonu.
Na kraju, alternativni odbija sadržaj s jedne na drugu, klizeći naprijed-natrag.
nadstrešnica-play-count
Jedan od nedostataka korištenja MARQUEE elementa je da šarki nikada ne prestaju. No, uz staničnu vrijednost marke-play-count možete postaviti okvir za zakretanje sadržaja i isključivanje određenog broja puta.
nadstrešnica-smjer
Također možete odabrati smjer kojim se sadržaj treba pomicati na zaslonu. Vrijednosti prema naprijed i natrag temelje se na smjeru teksta kada je stripa prelijevanja u nizu, a gore ili dolje kada je stil prelijevanja blok-okvira.
Pojedinosti o smjeru označavanja
| preljev-stil | Jezični smjer | naprijed | preokrenuti |
|---|---|---|---|
| nadstrešnica linija | ltr | lijevo | pravo |
| RTL | pravo | lijevo | |
| pomični blok | gore | dolje |
nadstrešnica brzine
Ovo svojstvo određuje brzinu pomicanja sadržaja na zaslonu. Vrijednosti su spore, normalne i brze. Stvarna brzina ovisi o sadržaju i pregledniku koji ga prikazuje, no vrijednosti moraju biti sporije usporene od normalne, što je sporiji od brzog.
Podrška preglednika svojstava oznake
Možda ćete morati upotrijebiti prefikse dobavljača kako biste dobili elemente CSS okvira koji rade. Oni su kako slijedi:
| CSS3 | Prefiks dobavljača |
|---|---|
| overflow-x: crtica; | overflow-x: -webkit-marquee; |
| nadstrešnica stilu | -webkit-nadstrešnica stilu |
| nadstrešnica-play-count | -webkit-nadstrešnica-ponavljanje |
| smjera kretanja: naprijed | preokrenuti; | -webkit-marquee-direction: naprijed | unatrag; |
| nadstrešnica brzine | -webkit-nadstrešnica brzine |
| nema ekvivalenta | -webkit-priraštaj nadstrešnica- |
Posljednja svojstva omogućuju vam da definirate kako bi trebali biti veliki ili mali koraci dok se sadržaj pomakne na zaslonu u okviru.
Da biste svoj marquee funkcionirali, najprije morate staviti predefinirane vrijednosti dobavljača, a zatim ih slijedite pomoću vrijednosti specifikacije CSS3. Na primjer, ovdje je CSS za okvir koji skenira tekst pet puta s lijeva na desno unutar okvira veličine 200 x 50.
{
širina: 200px; visina: 50px; bjelina: sada;
prelijevanje: skriveno;
preljev-x: -webkit-nadstrešnica;
-webkit-marquee-direction: naprijed;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: normalno;
-webkit-marquee-inkrement: mali;
-webkit-marquee-repetition: 5;
overflow-x: crtica;
smjera kretanja: naprijed;
širina stila: pomaknite se;
brzina okvira: normalno;
brojčanik-igra broj: 5;
}