Marquee CSS - iesācēju ceļvedis
Marquee pirmo reizi tika ieviests Internet Explorer un bija ļoti populārs 90-tajos gados, pirms W3C galu galā nolēma izslēgt to no HTML standarta elementa lietojamības problēmu dēļ. Tīmekļa dizaineri tika mudināti neizmantot tagu.
Tomēr pārsteidzoši, telts tagad veic atriebību, nevis tagu tāpat kā CSS modulī. Šis modulis ir pieejams kā daļa no Webkit CSS specifikācijas, un W3C pašlaik strādā pie līdzīga moduļa. Tomēr, tā kā W3C versija vēl ir kandidātu ieteikumu stadijā, tā vēl nav piemērojama. Tātad, šobrīd mēs aptversim tikai vienu no Webkit specifikācijām.
Sintakse
Pirmkārt, maršruts var tikt definēts, izmantojot šādu stenogrammu.
-webkit-telts: [virziens] [pieaugums] [atkārtojums] [stils] [ātrums]
Katra no iepriekšminētajā sintaksei nepieciešamajām vērtībām, manuprāt, ir diezgan pašsaprotama, vai arī jūs tos varat pietiekami izskaidrot šajā dokumentācijā. Tātad, ja jūs vēlaties dziļāk izvērsties, kā šī sintakse strādās, jūs vienmēr varat atsaukties uz dokumentāciju.
Tad pievienojieties mums, jo mēs turpinām veidot reālus piemērus un redzēt, kā tā darbojas.
1. piemērs: teksta ritināšana
Labi, pirmajā piemērā mēs izveidosim klasiskās kustības kustību, kurā teksts pārvietojas no labās uz kreiso pusi.
Izveidosim mūsu teksta atzīmi, piemēram:
Lollipop topping citrona pilieni jujubes applake fruitcake torte lakrica sezama snaps.
Pēc tam definējiet laukumu ar šādu sintaksi.
-webkit-marquee: automātiska vidēja bezgalīga ritināšana; pārplūdes-x: -webkit-telts;
Kad ir iestatīts maršruta virziens auto, tas pēc noklusējuma pārvietojas no labās puses uz kreiso pusi; Jūs varat mainīt šo vērtību uz pa kreisi. Ņemiet vērā arī to, ka pārplūdes-x īpašums ir jāiestata uz -webkit-telts tā, lai saturs vienmēr rīkotos kā viens. Ja šī īpašība netiek izlaista, teksts turpinās.
Skatiet demo.
2. piemērs: Atlekšana uz priekšu un atpakaļ
Otrajā piemērā mēs centīsimies citā stilā piešķirt stilu. Šoreiz mēs izmantojam aizstājējs tā vietā ritiniet un mainiet virziena vērtību uz pa labi. Tādā veidā telts pārvietosies no kreisās uz labo pusi, tad piepeši uz priekšu un atpakaļ.
-webkit-marquee: automātiska vidēja bezgalīga alternatīva; pārplūdes-x: -webkit-telts;
Skatiet demo
3. piemērs: Teksta pārvietošana uz augšu
Pēdējā piemērā mēs mainīsim maršruta virzienu, lai virzītos uz augšu. Ir divi virzienā vērtības; jūs varat mainīt vērtību uz uz augšu vai uz priekšu.
Personīgi es nesaprotu, kāpēc Webkit sniedza divas vērtības, kas būtībā dara to pašu, jo es domāju, ka tas varētu radīt neskaidrības dažiem cilvēkiem..
-webkit-marquee: vidēji bezgalīga ritināšana normāli; pārplūdes-x: -webkit-telts;
Skatiet demo
Turklāt es esmu apkopojis vairākus piemērus, bet tie būs milzīgi, ja tie visi ir izskaidroti šeit.
Bet, jūs varat apskatīt visu demonstrāciju un lejupielādēt avotus no tālāk norādītajām saitēm.
- Demo
- Lejupielādēt avotu
Galīgā doma un atsauces
Vispirms es biju pārsteigts, ka vēl aizvien ir interese par telti, ko es domāju, ka tā bija galā. Tas arī lika man apšaubīt, kā tāds CSS modulis būs noderīgs. Faktiski katrs pārlūks joprojām atbalsta tag.
Tātad, ko jūs domājat? Vai telts šajā vecumā joprojām ir svarīgs, un vai tas būtu noderīgs mūsdienu tīmekļa dizainā?
Ja joprojām vēlaties ziņot par šo pasākumu, varat apmeklēt dažas no šādām norādēm:
- Safari CSS atsauce
- Webkit telekomunikāciju ģenerators
- Visaptveroša vecā dokumentācija
no Sitepoint. - Un gandrīz vienmēr ir ģenerators, tostarp šis Marquee ģenerators.
