Početna » šifriranje » Oznaka u CSS-u - Vodič za početnike

    Oznaka u CSS-u - Vodič za početnike

    Marquee je prvi put predstavljen u Internet Exploreru i bio je vrlo popularan u devedesetima prije nego što ga je W3C na kraju odlučio isključiti iz HTML standardnog elementa zbog problema s upotrebljivosti. Web dizajneri su ohrabreni da ne koriste oznaku.

    Međutim, iznenađujuće je da se marka vraća, a ne u oznaku formatu, ali u CSS modulu. Ovaj modul je dostupan kao dio Webkit CSS specifikacije i W3C trenutno radi na sličnom modulu. Međutim, budući da je verzija W3C još uvijek u fazi preporučivanja kandidata, ona još nije primjenjiva. Dakle, trenutno ćemo pokriti samo onu iz specifikacije Webkit.

    Sintaksa

    Prije svega, okvir se može definirati pomoću sljedeće skraćenice sintakse.

    -webkit-marquee: [pravac] [prirast] [ponavljanje] [stil] [brzina]

    Vjerujem da su sve vrijednosti koje su potrebne u gornjoj sintaksi prilično razumljive, inače ih možete naći dovoljno objašnjene u ovoj dokumentaciji. Dakle, ako želite kopati dublje u način na koji će ova sintaksa funkcionirati, uvijek možete prvo pogledati dokumentaciju.

    Zatim, pridružite nam se kako bismo nastavili stvarati neke stvarne primjere i vidjeli kako je to na djelu.

    Primjer 1: Pomicanje teksta

    U redu, u prvom primjeru stvorit ćemo klasično kretanje nadstrešnice kojemu se tekst pomiče s desna na lijevo.

    Kreiramo naš tekstualni znak kao u nastavku:

    Lizalica preljeva limun kapi jujubes applicake voćni kolač kolač slatki korijen sezama.

    Zatim definirajte oznaku sljedećom sintaksom.

     -webkit-marquee: automatski srednje beskonačno pomicanje normalno; preljev-x: -webkit-marquee;

    Kada je smjer polja postavljen na auto, po zadanom će se pomaknuti s desna na lijevo; alternativno možete promijeniti tu vrijednost na lijevo. Također primijetite da preljev-x svojstvo mora biti postavljeno na -webkit-nadstrešnica tako da se sadržaj uvijek ponaša kao jedan. Ako izostavite ovo svojstvo, tekst se neće pomicati dalje.

    Pogledajte demo.

    Primjer 2: Odskok naprijed i natrag

    U drugom primjeru pokušat ćemo dati drugačiji stil. Ovaj put koristimo naizmjenično umjesto svitak i promijenite vrijednost smjera na pravo. Na taj će se način oznaka pomaknuti s lijeve na desnu, a zatim će se odbiti naprijed i natrag.

     -webkit-marquee: auto-srednja beskonačna izmjenična normalna; preljev-x: -webkit-marquee;

    Pogledajte demo

    Primjer 3: Premještanje teksta prema gore

    I za posljednji primjer, promijenit ćemo smjer pomicanja prema gore. Postoje dva smjer vrijednosti za to; možete promijeniti vrijednost na gore ili naprijed.

    Osobno ne shvaćam zašto je Webkit dao dvije vrijednosti koje u biti čine istu stvar jer mislim da bi to moglo dovesti do zabune za neke ljude.

     -webkit-marquee: do normalno beskonačnog pomicanja; preljev-x: -webkit-marquee;

    Pogledajte demo

    Nadalje, sastavio sam još nekoliko primjera, ali oni će biti neodoljivi ako su svi ovdje objašnjeni.

    No, možete pogledati sve demo verzije i preuzeti izvore s donjih veza.

    • Demo
    • Preuzimanje izvora

    Završna misao i reference

    Prvo sam se iznenadio što još uvijek postoji interes za šator, za koji sam mislio da je završio. To me također navelo na pitanje kako će CSS modul biti koristan. Zapravo, svaki preglednik i dalje podržava nasljeđe označiti.

    Pa što ti misliš? Je li marka još uvijek relevantna u ovoj dobi i bila bi korisna u modernom web dizajnu?

    Ako ste još uvijek zainteresirani za ovu temu, posjetite neke od sljedećih referenci: