Ne teistä, jotka ovat kirjoittaneet HTML: ää pitkään, saattavat muistaa elementin. Tämä oli selainkohtainen elementti, joka loi tekstirullan ruudun yli. Tätä elementtiä ei koskaan lisätty HTML sen määrittely ja tuki vaihtelivat suuresti eri selaimissa. Ihmisillä oli usein erittäin vahvat mielipiteet tämän elementin käytöstä - sekä positiivisia että negatiivisia. Mutta riippumatta siitä, rakastitko tai vihasit sitä, sen tarkoituksena oli tehdä sisällöstä, joka ylitti laatikkorajat.
Osa siitä, että selaimet eivät koskaan toteuttaneet sitä täysin, vahvan henkilökohtaisen mielipiteen lisäksi, oli se sitä pidetään visuaalisena vaikutuksena, eikä sitä sellaisenaan pitäisi määritellä HTML: llä, joka määrittää rakenne. Sen sijaan visuaalisten tai esitystehosteiden tulisi olla CSS: n hallinnassa. Ja CSS3 lisää telttamoduulin hallitsemaan, kuinka selaimet lisäävät telttakuvio elementteihin.
Uudet CSS3-ominaisuudet
CSS3 lisää viisi uusia ominaisuuksia auttaa hallitsemaan, miten sisältösi näkyy teltassa: ylivuototyyli, telttatyyli, telttaleikkien määrä, telttasuunta ja teltanopeus.
ylivuoto-tyyli
Ylivuototyylinen ominaisuus (josta keskustelimme myös artikkelissa CSS-ylivuoto) määrittelee ensisijaisen tyylin sisällölle, joka ylittää sisältöruudun. Jos asetat arvoksi telttaviivan tai telttatason, sisältösi liukuu sisään ja ulos vasemmalle / oikealle (telttaviiva) tai ylös / alas (telttaluokka).
telttatyyli
Tämä ominaisuus määrittää, miten sisältö siirtyy näkymään (ja ulos). Vaihtoehdot ovat vieritä, liu'uta ja vuorotellen. Vieritys alkaa sisällön ollessa kokonaan näytön ulkopuolella, ja sitten se liikkuu näkyvän alueen poikki, kunnes kaikki on jälleen kokonaan näytön ulkopuolella. Slide alkaa sisällön ollessa kokonaan pois ruudulta ja siirtyy sitten, kunnes sisältö on siirtynyt kokonaan ruudulle eikä näytöllä ole enää liukuvaa sisältöä. Viimeisenä vaihtoehtoinen palauttaa sisällön puolelta toiselle liu'uttamalla edestakaisin.
teltta-leikki-laskenta
Yksi MARQUEE-elementin käytön haittapuolista on, että teltta ei koskaan pysähdy. Mutta tyylin ominaisuus teltta-play-count-toiminnolla voit asettaa teltan kiertämään sisältöä päälle ja pois tietyn määrän kertoja.
teltta-suunta
Voit myös valita, mihin suuntaan sisältöä tulisi vierittää näytöllä. Arvot eteenpäin ja taaksepäin perustuvat tekstin suuntaukseen, kun ylivuototyyli on telttaviiva ja ylös tai alas, kun ylivuototyyli on telttaluokka.
Marquee-Direction-tiedot
ylivuoto-tyyli |
Kielen suunta | eteenpäin | käänteinen |
|---|---|---|---|
juhlateltta |
ltr | vasemmalle | oikein |
| rtl | oikein | vasemmalle | |
juhlateltta |
ylös | alas |
teltanopeus
Tämä ominaisuus määrittää, kuinka nopeasti sisältö vierittää näyttöä. Arvot ovat hitaita, normaaleja ja nopeita. Todellinen nopeus riippuu sisällöstä ja sitä näyttävästä selaimesta, mutta arvojen on oltava hitaita, normaalia hitaampia, hitaampia kuin nopeita.
Markiisiominaisuuksien selaintuki
Saatat joutua käyttämään toimittajan etuliitteet saadaksesi CSS-juhlatilat toimimaan. Ne ovat seuraavat:
| CSS3 | Toimittajan etuliite |
|---|---|
ylivuoto-x: telttaviiva; |
overflow-x: -webkit-teltta; |
telttatyyli |
-webkit-telttatyyli |
teltta-leikki-laskenta |
-webkit-teltta-toisto |
telttasuunta: eteenpäin | taaksepäin; |
-webkit-telttasuunta: eteenpäin | taaksepäin; |
teltanopeus |
-webkit-telttakiiri |
| ei vastaavaa | -webkit-teltta-inkrementti |
Viimeisen ominaisuuden avulla voit määrittää, kuinka suurien tai pienten vaiheiden tulisi olla, kun sisältö vierittää teltassa olevaa ruutua.
Jotta teltta toimisi, sinun on ensin asetettava toimittajan etuliitetyt arvot ja seurattava niitä sitten CSS3-määritysarvojen kanssa. Esimerkiksi tässä on teltan CSS, joka vierittää tekstiä viisi kertaa vasemmalta oikealle 200x50-laatikon sisällä.
{
leveys: 200px; korkeus: 50px; valkoinen tila: nowrap;
ylivuoto piilotettu;
overflow-x: -webkit-teltta;
-webkit-teltta-suunta: eteenpäin;
-webkit-telttatyyli: vieritä;
-webkit-teltanopeus: normaali;
-webkit-teltta-inkrementti: pieni;
-webkit-teltta-toisto: 5;
ylivuoto-x: telttaviiva;
teltta-suunta: eteenpäin;
telttatyyli: vieritä;
teltanopeus: normaali;
teltta-leikkimäärä: 5;
}