Ne teistä, jotka ovat jo pitkään kirjoittamassa HTML-koodia , voivat muistaa elementin. Tämä oli selainkohtainen elementti, joka loi rullan tekstin bannerin näytön yli. Tätä elementtiä ei ole koskaan lisätty HTML-määritykseen, ja sen tuki vaihteli laajasti eri selaimissa. Ihmisillä oli usein vahvoja mielipiteitä tämän elementin käytöstä - sekä myönteisiä että kielteisiä. Mutta olitpa rakastanut tai vihannut sitä, se palvelee tarkoitusta tehdä sisältöä, joka ylitti laatikon rajat näkyviksi.
Osa selityksestä, jota selaimet eivät ole koskaan toteuttaneet, lukuunottamatta vahvaa henkilökohtaista mielipidettä, oli se, että sitä pidettiin visuaalisena vaikutuksena ja sellaisena sitä ei pitäisi määritellä HTML: llä, joka määrittelee rakenteen. Sen sijaan visuaalisia tai esitystehosteita pitäisi hallita CSS: llä. Ja CSS3 lisää varmentamismoduulin hallitsemaan selainten lisäämistä elementteihin.
Uudet CSS3-ominaisuudet
CSS3 lisää viisi uutta ominaisuutta, jotka auttavat hallitsemaan, miten sisältösi näkyy teltan päällä: ylivuototyyli, viivakooditekniikka, telttailupelien määrä, teltan suunta ja teltan nopeus.
ylivuoto-tyyli
Ylivuototyyppinen ominaisuus (jota käsittelin myös artikkelissa CSS ylivuoto) määrittää sisältötyyppisen sisällön edullisen tyylin sisällölle. Jos asetat arvoksi vierityspalkin tai sommittelun estävän sisällön, liukuu sisään ja ulos vasemmalle / oikealle (ristikytkentä) tai ylös / alas (vyöhyke).
teltta-style
Tämä ominaisuus määrittää, miten sisältö siirtyy näkymään (ja ulos).
Vaihtoehdot ovat vieritys, liukusäädin ja vuorottelevat. Vieritys alkaa sisällön ollessa kokonaan pois päältä ja sitten se liikkuu näkyvän alueen läpi, kunnes se on kokonaan pois näytöltä. Liukusäädin alkaa sisällön kokonaan pois näytöstä ja siirtyy sitten, kunnes sisältö on siirtynyt kokonaan näytölle, eikä näytöllä ole enää sisältöä.
Lopuksi vaihtoehtoinen napauttaa sisällön puolelta toiselle, liukumista edestakaisin.
teltta-play-count
Yksi haittapuolista käyttää MARQUEE-elementtiä on, että teltta ei koskaan pysähdy. Mutta tyyliominaisuuden marquee-play-count -näytöllä voit asettaa teltta pyörittää sisällön päälle ja pois tietyn määrän kertoja.
teltta-suunnassa
Voit myös valita, mihin suuntaan sisältö pitäisi vierittää näytössä. Arvot eteen- ja taaksepäin perustuvat tekstin suuntiin, kun ylivuoto-tyyli on viivakuvio ja ylös tai alas, kun ylivuoto-tyyli on ristikkopalkki.
Merkkivalon tiedot
| ylivuoto-tyyli | Kielisuunta | eteenpäin | käänteinen |
|---|---|---|---|
| teltta-line | ltr | vasen | oikea |
| RTL | oikea | vasen | |
| teltta-lohko | ylös | alas |
teltta-nopeus
Tämä ominaisuus määrittää, kuinka nopeasti sisältö rullataan ruudulla. Arvot ovat hitaita, normaaleja ja nopeita. Todellinen nopeus riippuu sisällöstä ja selaimesta, mutta arvojen on oltava hitaita normaalia hitaampaa, mikä on hitaampaa kuin nopea.
Selaimen tuki Marquee-ominaisuuksista
Voit joutua käyttämään myyjän etuliitteitä, jotta CSS-navetan elementit toimisivat. Ne ovat seuraavat:
| CSS3 | Toimittajan etuliite |
|---|---|
| ylivuoto-x: päällystetty linja; | ylivuoto-x: -webkit-marquee; |
| teltta-style | -webkit-teltta-tyylin |
| teltta-play-count | -webkit-teltta-toistoa |
| suuntaviiva: eteenpäin | kääntöpuolella; | -webkit-telttakulma: eteenpäin | taaksepäin; |
| teltta-nopeus | -webkit-teltta-nopeus |
| ei vastaavaa | -webkit-teltta lisäys |
Viimeisen ominaisuuden avulla voit määrittää, kuinka suuret tai pienet vaiheet pitäisi olla, kun sisältö rullataan ruutuikkunassa.
Jotta salkkusi toimisi, sinun on ensin sijoitettava myyjän ennalta määritetyt arvot ja seurattava niitä sitten CSS3-määritysarvojen kanssa. Esimerkiksi tässä on CSS, joka käyttää tekstiä viisi kertaa vasemmalta oikealle 200x50-laatikon sisällä.
{
leveys: 200px; korkeus: 50px; valkoinen-tila: nowrap;
ylivuoto piilotettu;
ylivuoto-x: -webkit-teltta;
-webkit-marquee-direction: eteenpäin;
-webkit-marquee-style: selaa;
-webkit-marquee-nopeus: normaali;
-webkit-marquee-lisäys: pieni;
-webkit-marquee-repeetition: 5;
ylivuoto-x: päällystetty linja;
vinoviiva: eteenpäin;
sarjakuva-tyyli: vieritä;
viivakoodinopeus: normaali;
marquee-play-count: 5;
}