Ti z vás, kteří psali HTML dlouho, si ten prvek možná pamatují. Jednalo se o prvek specifický pro prohlížeč, který vytvořil banner posouvajícího se textu po obrazovce. Tento prvek nebyl nikdy přidán do souboru HTML specifikace a podpora se u různých prohlížečů značně lišily. Lidé měli často na používání tohoto prvku velmi silné názory - pozitivní i negativní. Ale ať už jste to milovali nebo nenáviděli, sloužilo to ke zviditelnění obsahu, který přesahoval hranice pole.
Jedním z důvodů, proč jej prohlížeče nikdy plně neprovedly, kromě silného osobního názoru, bylo to považuje se za vizuální efekt a jako takový by neměl být definován kódem HTML, který definuje struktura. Místo toho by vizuální nebo prezentační efekty měly být spravovány pomocí CSS. A CSS3 přidává výřezový modul, který řídí, jak prohlížeče přidávají efekt výřezu k prvkům.
Nové vlastnosti CSS3
CSS3 přidává pět nové vlastnosti aby vám pomohlo řídit, jak se váš obsah zobrazuje ve výřezu: styl přetečení, styl výřezu, počet výřezů ve hře, směr výřezu a rychlost výřezu.
styl přetečení
Vlastnost stylu přetečení (kterou jsme také popsali v článku Přetečení CSS) definuje upřednostňovaný styl pro obsah, který přetéká z pole obsahu. Pokud nastavíte hodnotu na rámeček nebo blok rámečku, bude se váš obsah posouvat dovnitř a ven doleva / doprava (rámeček) nebo nahoru / dolů (rámeček).
výřez
Tato vlastnost definuje, jak se obsah přesune do zobrazení (a ven). Možnosti jsou svitek, posuňte a střídejte. Posouvání začíná s obsahem zcela mimo obrazovku a poté se pohybuje přes viditelnou oblast, dokud není znovu úplně mimo obrazovku. Snímek začíná s obsahem zcela mimo obrazovku a poté se pohybuje napříč, dokud se obsah zcela nepohnul na obrazovku a na obrazovce nezůstane žádný další obsah. Nakonec alternativní odrazí obsah ze strany na stranu a posouvá se tam a zpět.
počet výběrů
Jednou z nevýhod použití prvku MARQUEE je to, že se rámeček nikdy nezastaví. Ale s vlastností stylu marquee-play-count můžete nastavit rámeček tak, aby obsah po určitou dobu otočil a zapnul.
směr výřezu
Můžete také zvolit směr, kterým se má obsah posouvat na obrazovce. Hodnoty vpřed a vzad jsou založeny na směrovosti textu, když je styl přetečení rámeček čáry a nahoru nebo dolů, když je styl přetečení rámeček rámečku.
Podrobnosti o směru výřezu
styl přetečení |
Směr jazyka | vpřed | zvrátit |
|---|---|---|---|
výřez |
ltr | vlevo, odjet | že jo |
| rtl | že jo | vlevo, odjet | |
blok výřezu |
nahoru | dolů |
rychlost stanu
Tato vlastnost určuje, jak rychle se obsah posouvá na obrazovce. Hodnoty jsou pomalé, normální a rychlé. Skutečná rychlost závisí na obsahu a prohlížeči, který jej zobrazuje, ale hodnoty musí být pomalé, pomalejší než normální, což je pomalejší než rychlé.
Podpora prohlížeče u vlastností rámečku
Možná budete muset použít prefixy dodavatele aby prvky výřezu CSS fungovaly. Jsou to následující:
| CSS3 | Předpona dodavatele |
|---|---|
overflow-x: marquee-line; |
overflow-x: -webkit-marquee; |
výřez |
-webkit-markýzový styl |
počet výběrů |
-webkit-markýza-opakování |
směr výřezu: vpřed | vzad; |
-webkit-markque-direction: vpřed | vzad; |
rychlost stanu |
-webkit-rychlost markýzy |
| žádný ekvivalent | -webkit-přírůstek |
Poslední vlastnost vám umožňuje definovat, jak velké nebo malé by měly být kroky, když se obsah posouvá na obrazovce ve výřezu.
Chcete-li, aby váš rámeček fungoval, měli byste nejprve umístit hodnoty s předponou dodavatele a poté je následovat hodnotami specifikace CSS3. Například zde je CSS pro rámeček, který posouvá text pětkrát zleva doprava uvnitř pole 200x50.
{
šířka: 200px; výška: 50px; prázdné znaky: nowrap;
přepad: skrytý;
overflow-x: -webkit-marquee;
-webkit-markque-direction: vpřed;
-webkit-marquee-style: svitek;
-webkit-marquee-speed: normální;
-webkit-marquee-přírůstek: malý;
-webkit-markýza-opakování: 5;
overflow-x: marquee-line;
směr výřezu: vpřed;
styl výřezu: svitek;
rychlost výřezu: normální;
počet výběrů: 5;
}