Ukážka v CSS - Príručka pre začiatočníkov
Marquee bol prvýkrát predstavený v programe Internet Explorer a bol veľmi populárny v 90-tych rokoch predtým, než sa W3C nakoniec rozhodol vylúčiť ho zo štandardného prvku HTML kvôli problémom použiteľnosti. Web dizajnéri boli vyzvaní, aby tag nepoužívali.
Prekvapivo však, markýz teraz robí návrat, nie v značke ako to urobil, ale v CSS module. Tento modul je k dispozícii ako súčasť špecifikácie Webkit CSS a W3C práve pracuje na podobnom module. Vzhľadom na to, že verzia W3C je stále v štádiu odporúčania pre kandidátov, ešte nie je aplikovateľná. Takže v tomto okamihu budeme pokrývať iba ten z špecifikácie Webkit.
Syntax
Najskôr je možné definovať markant pomocou nasledujúcej syntaxe skrátenej steny.
-webkit-marquee: [smer] [prírastok] [opakovanie] [štýl] [rýchlosť]
Každá z hodnôt potrebných v syntaxe vyššie je podľa môjho názoru celkom samozrejmá, inak ich nájdete v tejto dokumentácii dostatočne vysvetlené. Takže ak chcete hlbšie do toho, ako táto syntax funguje, môžete sa vždy obrátiť na dokumentáciu.
Potom sa pripojte k nám, keď pokračujeme v tvorbe niekoľkých skutočných príkladov a uvidíme, ako to v akcii.
Príklad 1: Posúvanie textu
V poriadku, v prvom príklade vytvoríme klasický pohyb markýzy, ktorý má text presunúť sprava doľava.
Vytvorme našu textovú značku ako nižšie:
Lollipop topping citrón kvapky jujubes applicake ovocné koláče koláč sladké sezamové snaps.
Potom definujte markant s nasledujúcou syntaxou.
-webkit-marquee: auto médium nekonečné posúvanie normálne; pretekanie-x: -webkit-marquee;
Keď je smer posunu nastavený na auto, predvolene sa presunie z pravej doľava; alternatívne môžete túto hodnotu zmeniť ľavý. Všimnite si tiež, že pretečeniu-x Vlastnosť musí byť nastavená na -WebKit-stan takže obsah bude vždy fungovať ako jeden. Ak vynecháte túto vlastnosť, text nebude pokračovať.
Pozrite si demo.
Príklad 2: Odskočiť tam a späť
V druhom príklade sa pokúsime dať štýlu iný štýl. Tentokrát používame striedavý namiesto zvitok a zmeňte smerovú hodnotu na správny. Týmto spôsobom sa markýza presunie zľava doprava a odskočí tam a späť.
-webkit-marquee: auto médium nekonečné alternatívne normálne; pretekanie-x: -webkit-marquee;
Pozrite si demo
Príklad 3: Presun textu smerom nahor
A na posledný príklad zmeníme smer stúpania smerom hore. Existujú dva smer hodnoty; môžete hodnotu zmeniť hore alebo vpred.
Osobne sa neviem, prečo Webkit poskytol dve hodnoty, ktoré v podstate robia to isté, pretože si myslím, že by to mohlo viesť k nejasnostiam pre niektorých ľudí.
-webkit-marquee: hore stredne nekonečné posúvanie normálne; pretekanie-x: -webkit-marquee;
Pozrite si demo
Okrem toho som zostavil ešte niekoľko príkladov, ale budú to ohromujúce, ak to všetko vysvetlíme tu.
Môžete si však prezrieť všetky demo a prevziať zdroje z nižšie uvedených odkazov.
- demonštrácie
- Stiahnuť zdroj
Konečné myslenie a odkazy
Bol som prvýkrát prekvapený, že stále existuje záujem o markízu, o ktorej som si myslel, že sa jej podarilo skončiť. To ma tiež priviedlo k otázke, ako by bol tento modul CSS užitočný. V skutočnosti každý prehliadač stále podporuje dedičstvo štítok.
Tak čo si myslíte? Je tento markýz stále relevantný v tomto veku a bol by užitočný v modernom dizajne?
Ak ste ešte stále zvedaví túto záležitosť, môžete navštíviť niektoré z nasledujúcich odkazov:
- Safari CSS Reference
- Webkit generátor
- Komplexná dokumentácia starých
tag od lokality Sitepoint. - A vždy existuje generátor pre takmer všetko, vrátane generátora Marquee.
