„CSS“ - Pradedančiųjų vadovas
Marquee pirmą kartą buvo pristatyta „Internet Explorer“ ir buvo labai populiarus 90-ųjų dešimtmetyje, kol W3C galiausiai nusprendė jį pašalinti iš HTML standarto elemento dėl naudojimosi problemų. Interneto dizaineriai buvo skatinami nenaudoti žymos.
Vis dėlto stebėtina, kad dabar „marquee“ grįžta, o ne žyma kaip ir CSS modulyje. Šis modulis yra „Webkit CSS“ specifikacijos dalis, o W3C šiuo metu dirba ir panašiame modulyje. Tačiau kadangi W3C versija vis dar teikiama rekomendacijoje dėl kandidatų, ji dar netaikoma. Taigi šiuo metu mes apimsime tik vieną iš „Webkit“ specifikacijų.
Sintaksė
Visų pirma, vartotojas gali būti apibrėžtas naudojant šią trumpąją sintaksę.
-webkit-marquee: [kryptis] [prieaugis] [kartojimas] [stilius] [greitis]
Kiekviena iš pirmiau minėtos sintaksės reikalingų vertybių, manau, yra gana savaime suprantama, arba dar galite jas rasti pakankamai paaiškintus šiuose dokumentuose. Taigi, jei norite giliau įsisavinti, kaip ši sintaksė bus naudojama, visada galite remtis dokumentacija.
Tada prisijunkite prie mūsų, kai mes pradedame kurti keletą realių pavyzdžių ir pamatysite, kaip jis veikia.
1 pavyzdys: teksto slinkimas
Gerai, pirmame pavyzdyje mes sukursime klasikinį palapinės judėjimą, kurio tekstas pereina iš dešinės į kairę.
Kurkime teksto žymėjimą kaip žemiau:
Lollipop topping citrinos lašai jujubes aplikacijos vaisių pyragas saldymedis sezamo snaps.
Tada nustatykite marquee su tokia sintakse.
-webkit-marquee: automatinis vidutinis begalinis slinkimas normalus; overflow-x: -webkit-marquee;
Kai nustatoma „Marquee“ kryptimi automatinis, jis pagal nutylėjimą judės iš dešinės į kairę; galite pakeisti šią vertę į kairėje. Taip pat pastebėkite, kad perpildymas-x nuosavybė turi būti nustatyta -webkit-marquee kad turinys visada veiktų kaip vienas. Jei praleidote šią savybę, tekstas neperkels.
Žr. Demonstraciją.
2 pavyzdys: Bounce pirmyn ir atgal
Antrajame pavyzdyje bandysime suteikti kitokį stilių. Šį kartą mes naudojame Alternatyva vietoj slinkite ir pakeiskite krypties vertę į teisė. Tokiu būdu, palapinė judės iš kairės į dešinę, tada atsistoja pirmyn ir atgal.
-webkit-marquee: automatinė vidutinė begalinė pakaitinė; overflow-x: -webkit-marquee;
Žr. Demonstraciją
3 pavyzdys: Teksto perkėlimas į viršų
Ir paskutinis pavyzdys pakeisime „Marquee“ kryptį, kad galėtume judėti aukštyn. Yra du kryptis tai padaryti; galite pakeisti vertę į aukštyn arba priekyje.
Asmeniškai aš nežinau, kodėl „Webkit“ pateikė dvi vertybes, kurios iš esmės daro tą patį, nes manau, kad tai gali sukelti painiavą kai kuriems žmonėms.
-webkit-marquee: vidutinė begalinė slinktis įprasta; overflow-x: -webkit-marquee;
Žr. Demonstraciją
Be to, aš parengiau keletą pavyzdžių, tačiau jie bus didžiuliai, jei visi čia bus paaiškinti.
Tačiau galite peržiūrėti visą demonstraciją ir atsisiųsti šaltinius iš toliau pateiktų nuorodų.
- Demo
- Atsisiųsti šaltinį
Galutinė mintis ir nuorodos
Visų pirma buvau nustebęs, kad vis dar domina šventykla, kuri, mano manymu, buvo įvykdyta. Tai taip pat paskatino mane paklausti, kaip toks CSS modulis bus naudingas. Tiesą sakant, kiekviena naršyklė vis dar palaiko žyma.
Taigi, ką manote? Ar marquee vis dar aktualus šiame amžiuje ir ar jis būtų naudingas modernaus interneto dizaino?
Jei vis dar smalsu apie šį „marquee“ dalyką, galite aplankyti keletą šių nuorodų:
- „Safari CSS“ nuoroda
- „Webkit“ renginių generatorius
- Išsami senų dokumentų dokumentacija
žyma iš Sitepoint. - Ir beveik visada yra generatorius, įskaitant šį „Marquee Generator“.
