Domovská » Kódování » Marquee v CSS - začátečnický průvodce

    Marquee v CSS - začátečnický průvodce

    Marquee byl poprvé představen v Internet Exploreru a byl velmi populární v 90. letech předtím, než se W3C nakonec rozhodl vyloučit ho z HTML standardního prvku kvůli problémům s použitelností. Weboví designéři byli vyzváni, aby značku nepoužívali.

    Překvapivě se však nyní objevuje comeback, ne ve značce ve formátu CSS. Tento modul je k dispozici jako součást specifikace Webkit CSS a W3C v současné době pracuje na podobném modulu. Vzhledem k tomu, že verze W3C je stále ve fázi doporučování kandidáta, ještě není použitelná. Takže v této době budeme pokrývat pouze ten z specifikace Webkit.

    Syntaxe

    Za prvé, markýza může být definována pomocí následující zkratkové syntaxe.

    -webkit-marquee: [směr] [přírůstek] [opakování] [styl] [rychlost]

    Věřím, že každá z hodnot potřebných ve výše uvedené syntaxi je zcela samozřejmá, jinak je můžete v této dokumentaci dostatečně vysvětlit. Pokud tedy chcete hlouběji pracovat na tom, jak tato syntaxe bude fungovat, vždy můžete nejprve nahlédnout do dokumentace.

    Pak se k nám připojte, když budeme pokračovat v tvorbě reálných příkladů a uvidíme, jak to funguje.

    Příklad 1: Posouvání textu

    V pořádku, v prvním příkladu vytvoříme klasický pohyb markýzu, který má pohyb textu zprava doleva.

    Vytvořme si náš textový značkovací kód jako níže:

    Lízátko polevou citronové kapky jujubes aplikovat ovocný koláč koláče lékořice sezamové snímky.

    Pak definujte markýzu s následující syntaxí.

     -webkit-marquee: auto medium nekonečný svitek normální; přetečení-x: -webkit-marquee;

    Když je nastaven směr markýzy auto, standardně se bude pohybovat zprava doleva; alternativně můžete tuto hodnotu změnit na vlevo, odjet. Všimněte si také, že přetečení-x vlastnost musí být nastavena na -webkit-marquee tak, aby obsah vždy fungoval jako jeden. Pokud tuto vlastnost vynecháte, text se nepohne.

    Viz demo.

    Příklad 2: Odskočit tam a zpět

    Ve druhém příkladu se pokusíme dát markýzu jiný styl. Tentokrát používáme střídat namísto svitek a změňte hodnotu směru na že jo. Tímto způsobem se bude markýz pohybovat zleva doprava a pak se odrazí dopředu a dozadu.

     -webkit-marquee: auto medium nekonečné střídavě normální; přetečení-x: -webkit-marquee;

    Viz demo

    Příklad 3: Posunutí textu nahoru

    A pro poslední příklad změníme směr markýz směrem nahoru. Existují dva směr hodnoty; můžete změnit hodnotu na nahoru nebo vpřed.

    Osobně nechápu, proč Webkit poskytl dvě hodnoty, které v podstatě dělají to samé, protože si myslím, že by to mohlo vést k záměně u některých lidí..

     -webkit-marquee: up středně nekonečný svitek normální; přetečení-x: -webkit-marquee;

    Viz demo

    Dále jsem zkompiloval několik dalších příkladů, ale budou-li zde všechny vysvětleny, budou ohromující.

    Můžete si však prohlédnout všechny ukázky a stáhnout zdroje z níže uvedených odkazů.

    • Demo
    • Stáhněte si zdroj

    Závěrečná myšlenka a odkazy

    Nejprve jsem byl překvapen, že stále existuje zájem o marquee, o kterém jsem si myslel, že potkal jeho konec. To mě také vedlo k otázce, jak bude tento modul CSS užitečný. Ve skutečnosti každý prohlížeč stále podporuje odkaz štítek.

    Tak co si myslíte? Je v tomto věku stále relevantní a bylo by to užitečné v moderním designu webu?

    Pokud jste stále zvědaví na toto téma, můžete navštívit některé z následujících odkazů: