Ti z vás, kteří psali HTML na dlouhou dobu, si pamatují na prvek. Jednalo se o prvek specifický pro prohlížeč, který vytvořil banner procházení textu na obrazovce. Tento prvek nebyl nikdy přidán do specifikace HTML a jeho podpora se v různých prohlížečích značně lišila. Lidé měli často velmi silné názory na použití tohoto prvku - pozitivní i negativní. Ale zda jste ji milovali nebo nenáviděli, sloužilo tomu, aby se obsah, který překrýval hranice krabice, stal viditelným.
Důvodem, proč nebyly prohlížeči plně implementovány, kromě silného osobního názoru, je, že je považován za vizuální efekt a jako takový by neměl být definován pomocí HTML, který definuje strukturu. Místo toho by vizuální nebo prezentační efekty měly být spravovány CSS. A CSS3 přidává moduly výbavy pro ovládání toho, jak prohlížeče přidávají efekt výběrového efektu k prvkům.
Nové vlastnosti CSS3
CSS3 přidává pět nových vlastností, které vám pomohou řídit, jak se váš obsah zobrazuje ve scéně: přetečení, styl výbrusů, počet výhybek, směr náklonu a rychlost náběhu.
přetečení
Vlastnost stylu přetečení (kterou jsem také popsala v přetečení CSS článku) definuje preferovaný styl obsahu, který přetečuje obsahové pole. Nastavíte-li hodnotu na řádek nebo značku bloků, váš obsah se bude posunovat vlevo / vpravo (řádek vpravo) nebo nahoru / dolů (blok výbavy).
ve stylu marquee
Tato vlastnost definuje, jak se obsah přesune do zobrazení (a ven).
Možnosti jsou rolovací, posuvné a střídavé. Pohyb začíná tím, že obsah je úplně mimo obrazovku, a pak se pohybuje přes viditelnou oblast, dokud se znovu úplně nezobrazí obrazovka. Prezentace začne obsahem úplně mimo obrazovku a poté se přesune, dokud se obsah úplně nepřesune na obrazovku, a na obrazovce není žádný další obsah.
Nakonec střídavě skáče obsah ze strany na stranu a posune se tam a zpět.
marquee-play-count
Jednou z nevýhod použití prvku MARQUEE je to, že se markýza nikdy nezastaví. Ale ve vlastnostech vlastností stylu "marquee-play-count" můžete nastavit značku, která má určitý počet otáček zapnout a vypnout.
směr směru
Můžete také vybrat směr, kterým by se obsah měl pohybovat na obrazovce. Hodnoty vpřed a vzad jsou založeny na směrovosti textu, je-li přeplňovací styl řádek a nahoru nebo dolů, je-li přepychový styl blokový.
Podrobnosti o směru jízdy
| přetečení | Jazyková režie | vpřed | zvrátit |
|---|---|---|---|
| marquee-line | ltr | vlevo, odjet | že jo |
| rtl | že jo | vlevo, odjet | |
| markýzový blok | nahoru | dolů |
stoupání rychlosti
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ý je zobrazuje, ale hodnoty musí být pomalé, je pomalejší než běžné, což je pomalejší než rychle.
Podpora prohlížeče pro vlastnosti Marquee
Možná budete muset použít předpony dodavatelů, abyste mohli pracovat s prvky CSS. Jsou to následující:
| CSS3 | Předpona dodavatele |
|---|---|
| přetečení-x: marquee-line; | přetečení-x: -webkit-marquee; |
| ve stylu marquee | -webkit-marquee-styl |
| marquee-play-count | -webkit-marquee-repetition |
| směr směru: dopředu | | -webkit-směrový směr: dopředu | dozadu; |
| stoupání rychlosti | -webkit-marquee-speed |
| žádný ekvivalent | -webkit-marquee-přírůstek |
Poslední vlastnost umožňuje definovat, jak velké nebo malé by měly být kroky, jelikož se obsah posouvá na obrazovce ve stínu.
Chcete-li, aby vaše markýza fungovala, měli byste nejprve umístit předdefinované hodnoty dodavatele a následovat je podle specifikací CSS3. Například tu je CSS pro markýzu, která posouvá text pětkrát zleva doprava uvnitř pole 200x50.
{{
šířka: 200px; výška: 50px; white-space: nowrap;
přetečení: skryté;
přetečení-x: -webkit-marquee;
-webkit-směrový směr: dopředu;
-webkit-marquee-styl: rolovat;
-webkit-marquee-rychlost: normální;
-webkit-marquee-přírůstek: malý;
-webkit-marquee-opakování: 5;
přetečení-x: marquee-line;
směr směru: vpřed;
střih: styl;
stoupání rychlosti: normální;
počet hráčů: 5;
}}