Oni od vas koji već dugo pišu HTML možda se sjećaju tog elementa. Ovo je element specifičan za preglednik koji je stvorio natpis za pomicanje teksta preko zaslona. Ovaj element nikada nije dodan u HTML specifikacija i podrška za nju varirali su u različitim preglednicima. Ljudi su često imali vrlo čvrsta mišljenja o upotrebi ovog elementa - i pozitivna i negativna. Bez obzira jeste li ga voljeli ili mrzili, poslužio je tome da sadržaj koji prelazi granice okvira učini vidljivim.
Dio razloga što ga preglednici nikad nisu u potpunosti implementirali, osim snažnog osobnog mišljenja, bio je taj smatra se vizualnim efektom i kao takav, ne bi ga trebao definirati HTML, koji definira struktura. Umjesto toga, vizualnim ili prezentacijskim efektima trebao bi upravljati CSS. A CSS3 dodaje modul za označavanje kako bi kontrolirao kako preglednici dodaju efekt marquee elementima.
Nova svojstva CSS3
CSS3 dodaje pet nova svojstva za pomoć u kontroli načina prikazivanja vašeg sadržaja u marquee: preljevnom stilu, marquee stilu, marquee-play-count, marquee-direction i marquee-speed.
preljevni stil
Svojstvo stila prelijevanja (o čemu smo također raspravljali u članku CSS Overflow) definira preferirani stil za sadržaje koji prelaze okvir za sadržaj. Ako vrijednost postavite na marquee-line ili marquee-block, vaš će sadržaj klizati prema van i lijevo / desno (marquee-line) ili gore / dolje (marquee-block).
šatorskom stilu
Ovo svojstvo definira kako će se sadržaj premjestiti u prikaz (i van njega). Opcije su svitak, klizati i izmjenjivati. Pomicanje započinje sa sadržajem koji je potpuno izvan zaslona, a zatim se kreće po vidljivom području sve dok ponovno ne bude potpuno izvan zaslona. Dijapozitiv započinje sa sadržajem koji je potpuno izvan zaslona, a zatim se pomiče sve dok se sadržaj u potpunosti ne preseli na zaslon i više nema sadržaja za klizanje po zaslonu. I na kraju, alternativno odbija sadržaj s jedne na drugu stranu, klizeći naprijed-natrag.
marquee-play-count
Jedan od nedostataka korištenja elementa MARQUEE je taj što se šator nikad ne zaustavlja. Ali sa svojstvom stila marquee-play-count možete postaviti marquee da okreće i uključuje sadržaj određeni broj puta.
šetnja-smjer
Također možete odabrati smjer u kojem bi se sadržaj trebao pomicati na zaslonu. Vrijednosti prema naprijed i natrag temelje se na usmjerenosti teksta kada je stil preljeva označena crta i prema gore ili dolje kada je stil preljeva označen blok.
Pojedinosti o marquee-smjeru
preljevni stil |
Jezični smjer | naprijed | obrnuti |
|---|---|---|---|
marketa-crta |
ltr | lijevo | pravo |
| rtl | pravo | lijevo | |
marketa-blok |
gore | dolje |
marketa-brzina
Ovo svojstvo određuje koliko će se brzo sadržaj pomicati po zaslonu. Vrijednosti su spore, normalne i brze. Stvarna brzina ovisi o sadržaju i pregledniku koji ga prikazuje, ali vrijednosti moraju biti sporije, sporije je nego normalno, a sporije je od brzih.
Podrška preglednika za svojstva oznake u pregledniku
Možda ćete trebati koristiti prefiksi dobavljača kako bi elementi CSS oznake radili. Oni su sljedeći:
| CSS3 | Prefiks dobavljača |
|---|---|
preljev-x: marquee-line; |
preljev-x: -webkit-marquee; |
šatorskom stilu |
-webkit-marquee-style |
marquee-play-count |
-webkit-marquee-ponavljanje |
smjer kretanja: naprijed | natrag; |
-webkit-smjer kretanja: naprijed | natrag; |
marketa-brzina |
-webkit-marquee-speed |
| nema ekvivalenta | -webkit-marquee-prirast |
Posljednje svojstvo omogućuje vam definiranje kolika bi trebala biti veličina ili veličina koraka dok se sadržaj pomiče na zaslonu u markizi.
Da bi vaša marquee funkcionirala, prvo trebate postaviti prefiksirane vrijednosti dobavljača, a zatim ih slijediti s vrijednostima specifikacije CSS3. Na primjer, ovdje je CSS za oznaku koja pet puta pomiče tekst s lijeva na desno unutar okvira 200x50.
{
širina: 200px; visina: 50px; razmak: sadako;
preljev: skriven;
preljev-x: -webkit-marquee;
-webkit-marquee-smjer: naprijed;
-webkit-marquee-style: pomicanje;
-webkit-marquee-speed: normalno;
-webkit-marquee-prirast: mali;
-webkit-marquee-ponavljanje: 5;
preljev-x: marquee-line;
šarkasti smjer: naprijed;
šatorski stil: pomicanje;
brzina trčanja: normalna;
brojanje predstava: 5;
}