Marquee CSS - algaja juhendis
Marquee tutvustati esmakordselt Internet Exploreris ja oli 90ndatel väga populaarne, enne kui W3C otsustas selle kasutusvõimaluste tõttu HTML-standardelemendist välja jätta. Veebi disainereid julgustati sildi mitte kasutama.
Üllataval kombel teeb telk siiski tagasilöögi, mitte sildi formaadis nagu CSS-moodulis. See moodul on saadaval osana Webkit CSS spetsifikatsioonist ja W3C töötab praegu sarnase mooduli juures. Kuna W3C versioon on ikka veel kandidaadi soovitusjärgus, ei ole see veel kohaldatav. Niisiis, praegu katame me ainult Webkiti spetsifikatsioonist.
Süntaks
Kõigepealt saab telki määratleda järgmise stenogrammi süntaksiga.
-webkit-telk: [suund] [juurdekasv] [kordus] [stiil] [kiirus]
Kõik ülaltoodud süntaksit vajavad väärtused, ma usun, on üsna iseenesestmõistetavad või muidu võite neid dokumentatsioonis piisavalt selgitada. Niisiis, kui sa tahad kaevata sügavamalt, kuidas see süntaks hakkab töötama, võite kõigepealt alati viidata dokumentatsioonile.
Seejärel liitu meiega, kui me loome tõelisi näiteid ja näeme, kuidas see toimib.
Näide 1: Teksti kerimine
Olgu, esimeses näites loome klassikaline liikumine telgile, kus tekst liigub paremalt vasakule.
Looge oma tekstimärk, nagu allpool:
Lollipopi lisandiks sidrunipudjad jujubes applake fruitcake hapukas lagrits sesame klõpsatus.
Seejärel määrake telg järgmise süntaksiga.
-webkit-marquee: automaatne keskmise lõputu kerimine normaalseks; ülevoolu-x: -webkit-telk;
Kui teleri suund on seatud automaatne, see liigub vaikimisi vasakult paremale; Teise võimalusena saate seda väärtust muuta vasakule. Pange tähele, et ülevoolu-x vara tuleb seadistada -webkit-telk nii, et sisu toimib alati nagu üks. Kui see omadus jäetakse välja, ei liigu tekst edasi.
Vaadake demot.
Näide 2: Põrge edasi-tagasi
Teises näites püüame pakkuda telerile erinevat stiili. Seekord me kasutame vaheldumisi selle asemel kerige ja muutke suuna väärtust õigus. Sel viisil liigub telk vasakult paremale ja põrkuvad edasi-tagasi.
-webkit-marquee: automaatne keskmine lõpmatu alternatiiv; ülevoolu-x: -webkit-telk;
Vaadake demot
Näide 3: teksti liigutamine ülespoole
Ja viimase näite puhul muudame telje suunda ülespoole liikumiseks. On kaks suunas väärtused; saate väärtust muuta üles või ees.
Isiklikult ei saa ma seda, miks Webkit andis kaks väärtust, mis sisuliselt teevad sama asja, kuna arvan, et see võib tekitada segadust mõnede inimeste jaoks.
-webkit-marquee: kuni keskmise lõputu kerimise normaalne; ülevoolu-x: -webkit-telk;
Vaadake demot
Veelgi enam, ma olen koostanud veel mõned näited, kuid need on ülimalt suured, kui neid kõiki siin selgitatakse.
Kuid saate vaadata kõiki demo alla ja allikaid allolevatest linkidest alla laadida.
- Demo
- Allalaadimise allikas
Lõplik mõte ja viited
Ma olin kõigepealt üllatunud, et telkide vastu on ikka veel huvi, mida ma arvasin, et see on lõppenud. See viis ka mind kahtluse alla, kuidas selline CSS-moodul on kasulik. Tegelikult toetab iga brauser ikka veel pärandit silt.
Nii et mida sa arvad? Kas telk on selles eas veel asjakohane ja kas see oleks kasulik tänapäeva veebidisainis?
Kui olete endiselt selle uudishimulikuga, võite külastada mõningaid järgnevaid viiteid:
- Safari CSS viide
- Webkiti telje generaator
- Vanade põhjalik dokumentatsioon
silt Sitepointist. - Ja peaaegu alati on olemas generaator, kaasa arvatud see Marquee generaator.
