Brojači su označeni identifikatorima (pogledajte odeljke o brojačima za više informacija o svojstvima inkrementa brojača i poništavanja brojača). Identifikator se koristi kao vrijednost brojača, zadana vrijednost je broj.

Niz ugniježđenih brojača je označen na sljedeći način: "brojači ( , ) "ili" brojači ( , , )".

U CSS2, vrijednost brojača može se podesiti preko svojstva "content". Dozvoljeno je koristiti none kao vrijednost svojstva "content", što je ekvivalentno praznoj listi.

Sljedeći primjer kreira stil koji je numerirao elemente "P" za svaki element "H1", svaki pasus je numerisan rimskim brojevima praćenim tačkom i razmakom.

Brojač koji prelazi granice postavljene za njega parametrom "counter-reset" se resetuje i postaje 0

Brojači se kreiraju pomoću sljedećih dodatnih funkcija brojač (ime) ili brojač (ime, stil). Naziv - znači naziv brojača, stil - tip numeracije (svi tipovi su postavljeni prema svojstvu list-style-type)

Automatsko numerisanje u CSS2 se kreira korišćenjem auto-sadržaja (svojstva sadržaja) pored svojstava poništavanja brojača i svojstava kontrainkrementa.

U početku, ime brojača mora biti specificirano s drugim opcijskim parametrom koji definira stil automatsko numerisanje, na primjer

Automatsko numerisanje u CSS2 kontrolišu dva svojstva poništavanje brojača i povećanje brojača. Poništavanje brojača kreira pododeljke koristeći automatsko numerisanje. Ovo svojstvo, kao i svojstvo brojača, može sadržavati ime brojača i opcijski inkrement kao vrijednost.

CSS2.1 specifikacija sadrži tehniku ​​koja omogućava programeru da kombinuje tri CSS svojstva i pseudo-element za kreiranje brojača koji se automatski povećava, poput onog koji se koristi u uređenoj listi.

Za razliku od brojača lista, koji se odnosi samo na stavke

ili
i samo sa jednostavnim povećanjem, nova metoda organizovanja brojača uvedena u CSS2.1 može se koristiti sa bilo kojim skupom elemenata i ima veću fleksibilnost u organizovanju brojanja.

Ova metoda može biti zbunjujuća jer koristi nekoliko svojstava i razlikuje se od običnog CSS-a. U lekciji ćemo pokušati razjasniti upotrebu takvog brojača i ukazati na njegove prednosti i nedostatke.

Sintaksa

CSS kod brojača izgleda ovako:

Odjeljak (poništavanje brojača: naslovi 0;) h2: prije (povećavanje brojača: naslovi 1; sadržaj: brojač "poglavlja" (naslovi, decimalni) ":";)

Kao što je spomenuto, koriste se tri CSS svojstva: poništavanje brojača, povećanje brojača i sadržaj. Ako je bilo koje od navedenih svojstava izostavljeno, metoda neće raditi.

Parsiranje sintakse

Dakle, hajde da shvatimo sintaksu i čemu služe parovi svojstvo/vrednost:

Indikator konteksta

Prvi blok deklaracija (selektor div.section) pokazuje koji odeljak u markupu sadrži skup elemenata koji će imati cjelobrojnu vrijednost koja se automatski povećava. Važno je razumjeti razliku između deklaracije ovog bloka i sljedećeg. Ova konkretna stavka (

) neće imati prethodnu vrijednost brojača cijelog broja. To je jednostavno "kontejner" ili "kontekst" u kojem se nalaze stavke koje koriste brojač.
Ali za kontekst, morate definirati ime brojača koji će se koristiti za elemente deklarirane u sljedećem bloku.
Poništi brojač
Svojstvo poništavanja brojača treba da se koristi zajedno sa selektorom koji definiše kontekst, kao što je gore opisano. Prvi dio vrijednosti je prilagođeno ime koje date brojaču. Ovo je obavezan dio. Ime može biti bilo šta drugo osim CSS rezerviranih riječi (na primjer, brojaču ne možete dati ime "Ništa", "naslijediti", ili "Inicijal").
Drugi dio vrijednosti za svojstvo poništavanja brojača je opciono. Zadana vrijednost je “0 ″. Ovaj broj označava početnu tačku za brojač. Važno je zapamtiti da brojanje počinje od sljedećeg cjelobrojnog vrijednosti nakon vrijednosti za poništavanje. Stoga, ako postavite vrijednost na "0", brojač će početi od "1". A ako je postavljeno "-5", brojač će početi sa "-4" i tako dalje.
Numerisane stavke
Drugi oglasni blok (selektor h2) koristi pseudoelement: prije da naznači gdje će se određeni sadržaj postaviti (koristeći svojstvo sadržaja) prije svih ciljnih elemenata (u našem slučaju, to su
).
Povećaj brojač
Svojstvo counter-increment ukazuje na koji kontekst je brojač zapravo povezan. Dakle, prva vrijednost (obavezna) je odgovarajuće prilagođeno ime brojača iz svojstva poništavanja brojača u ID-u konteksta iz prvog bloka deklaracije.
Druga vrijednost za svojstvo kontrainkrementa je opciona. Predstavlja iznos za koji treba povećati brojač (ili smanjiti ako ste naveli negativnu vrijednost). Zadana vrijednost je “1 ″.
Sadržaj kutije
Koristimo svojstvo sadržaja da navedemo tačno šta treba umetnuti ispred svakog elementa u datom skupu (elementi
).
Jedina potrebna vrijednost za svojstvo sadržaja je funkcija brojač (), ali se obično nešto drugo (kao što su razmaci) dodaje prije ili poslije (pogledajte primjer iznad) kako bi brojač dobio lijep izgled.
Funkcija brojača ().
Funkcija counter () može uzeti dva argumenta, odvojena zarezima. Prvi argument ukazuje na trenutnu vrijednost imenovanog brojača. Drugi argument je opcioni i specificira format za izlaz vrijednosti brojača. Zadana postavka je “ decimalni", Ali možete odrediti" gornjorimski”, “gornji alfa”, I tako dalje (kao i za svojstvo tipa stila liste uređene liste).
Također možete koristiti funkciju brojači () i organizirati ugniježđene brojače, ali ih nećemo pokrivati ​​u ovom vodiču.
Grafička generalizacija
Ako sve gore navedeno zvuči komplikovano, infografika u nastavku prikazuje osnovne elemente CSS brojača:
Podrška pretraživača i nedostaci
Nekoliko brojača koji se koriste za isti kontekst (za izgradnju kaskade numerisanja) moraju biti deklarisani zajedno. Sljedeći primjer neće raditi:
Div.numerirano (poništavanje brojača: naslovi 0) Div.numerirano (poništavanje brojača: podnaslovi 0)
Samo će drugi brojač stupiti na snagu jer poništava prethodni. Dakle, oba brojača moraju biti deklarirana u istoj liniji:
Div.numerirano (poništavanje brojača: naslovi 0 podnaslovi 0)
Potencijalni nedostatak upotrebe brojača je miješanje sadržaja i prezentacije. Posebno se ova izjava odnosi na svojstvo sadržaja. Granica između sadržaja i prezentacije je zamagljena.
Tri svojstva i pseudoelement koji opisuju funkcionalnost CSS brojača nisu podržani u IE 7 i starijim verzijama i mogu imati problema u IE8, Opera i Safari. Firefox i Chrome podržavaju sva opisana svojstva bez problema.
Prednosti i praktična upotreba
CSS brojači imaju očiglednu prednost što ne morate brinuti o numeriranju različitih pasusa u vašem sadržaju. Kao i uređene liste, sadržaj nema stvarne brojeve. Možete umetati stavke, brisati stavke, mijenjati ih, a digitalni pokazivači će se automatski ispraviti.
Neki primjeri praktične upotrebe:
• Imenovanje i numerisanje poglavlja (kao u našem primjeru)
• Numerisanje redova tabele ili njenih ćelija
• Numeracija HTML naslova
• Poboljšanje / promjena izgleda ili povećanje vrijednosti za redovne poređane liste
Mogu li se koristiti CSS brojači?
Pošto nisu podržani u IE6 i IE7, klijentske stranice ne bi trebale koristiti CSS brojače niti tražiti odgovarajuću zamjenu. Ali za web-stranice i aplikacije koje su usmjerene na tehničku publiku (na primjer, web-mjesto za korištenje na mobilnim uređajima sa pretraživačima koji podržavaju CSS3), takvi brojači mogu biti efikasan način za kreiranje sistema numerisanja tačaka sadržaja bez potrebe za kodiranjem.
Na demo stranici možete vidjeti primjer korištenja CSS brojača za naslove.
Od autora: U ovom kratkom članku ćemo pogledati CSS brojače, korisno, ali još ne poznato svojstvo. Nakon naše demonstracije, pogledaćemo primere sajtova iz stvarnog sveta koji koriste CSS brojače.
Primarni cilj: Oblikovanje numerisane liste
Prvo, da vidimo šta bi trebalo da dobijemo:

Ništa komplikovano, zar ne? Ali postoji mali "ali": kada kreiramo markere, koristit ćemo semantičko označavanje i, ako je moguće, izbjegavati nepotrebne divove i raspone koliko god je to moguće. Hajde da analiziramo fleksibilnu i razumljivu metodu!
CSS brojači
Da biste kreirali ovaj predložak, potrebno je samo da kreirate numerisanu listu. U ovom trenutku, mogli biste reći: "Ne mogu li uzeti još jedan element ili čak ne listu." Odgovor je da, ali zapamtite da samo numerisana lista tačno opisuje strukturu naše stranice.
Drugo pitanje će vjerovatno biti "Da li je moguće potpuno promijeniti izgled brojeva na listi?" Stiliziranje numerisane liste je prilično zeznuto, ali srećom postoji još jedan način za više pretraživača. Dakle, sakrijmo brojeve liste i koristimo CSS brojače.
Sintaksa
Koristeći CSS brojače, možete generirati brojeve iz ponavljajućih elemenata i stilizirati ih. Zamislite brojače kao varijable koje se mogu povećavati. Pogledajmo osnovnu sintaksu:

Izrada novog brojača. Gornja slika pokazuje kako kreirati brojač za numerisanu listu i postaviti njen opseg. Koristili smo svojstvo poništavanja brojača.
Prva vrijednost je naziv brojača
Nakon toga slijedi opcijski parametar koji postavlja početnu točku brojača (podrazumevano 0). Imajte na umu da brojač uvijek broji, tj. naša prva vrijednost će biti 1.

Stiliziranje podređenih elemenata. Na drugoj slici možete vidjeti da dodajemo stilove za pseudo-klasu :: prije na stavku liste li.
Svojstvu sadržaja je dodijeljena vrijednost. Koristeći CSS brojače sa svojstvom sadržaja, možemo spojiti generirane brojeve sa stringovima.
Naziv brojača je naznačen
I tip je postavljen na decimalni (dekadski brojevni sistem). Pozitivne vrijednosti su iste kao vrijednosti za svojstvo tipa-stil liste.
U svojstvu brojača ponovo navodimo ime brojača
Zatim, opciono, možete odrediti korak povećanja. Zadana vrijednost je 1.
Markup
Na osnovu gore navedenog, oznaka bi izgledala ovako:
1. List Item

   Neki tekst ovdje.

2. List Item

   Neki tekst ovdje.

<-- еще элементы списка -->
< ol > < li > < h4 >List Item< / h4 > < / li > < li > < h4 >List Item< / h4 > < / li > < -- ещеэлементысписка-- > < / ol >
ol (poništavanje brojača: sekcija;) li (tip-stil-liste: nema; veličina fonta: 1.5rem; padding: 30px; margin-bottom: 15px; pozadina: # 0e0fee; boja: #fff;) li :: prije (sadržaj: brojač (odjeljak); kontrainkrement: odjeljak; prikaz: inline-block; pozicija: apsolutna; lijevo: -75px; vrh: 50%; transformacija: translateY (-50%); padding: 12px; font- veličina: 2rem; širina: 25px; visina: 25px; poravnanje teksta: centar; boja: # 000; radijus ivice: 50%; ivica: 3px čvrsta # 000;)
ol ( brojač - resetovanje: sekcija; li ( lista - stil - tip: nijedan; font - veličina: 1.5rem; padding: 30px; margina - dno: 15px; pozadina: # 0e0fee; boja: #fff; li :: prije ( sadržaj: šalter (odjeljak); brojač - prirast: presek; displej: inline - blok; pozicija: apsolutna; lijevo: - 75px; vrh: 50%; transform: translateY (- 50%); padding: 12px; font - veličina: 2rem; širina: 25px; visina: 25px; Ograničenja Važno je napomenuti da pseudo-klase trenutno nisu 100% dostupne. Da saznam, izvršio sam brzi test: instalirao sam NVDA i otvorio demo iz Chrome 50, Firefox 45 i Internet Explorer 11. Otkrio sam da kada koristim Internet Explorer, Narator nije izgovorio generirani sadržaj. Trenutno će većina čitača ekrana normalno prepoznati ovaj sadržaj. Međutim, da biste razumjeli šta se može generirati pomoću pseudoelemenata, a šta ne, samo trebate znati ova ograničenja. Primjeri CSS brojača Naučili smo osnove rada sa CSS brojačima, a sada vam možemo pokazati nekoliko primjera njihove potencijalne upotrebe. CSS brojači se prvenstveno koriste u onlajn verzijama novina. Često će se nalaziti u bočnim trakama: CSS brojači se takođe mogu koristiti u odeljcima gde su opisani koraci ili je naznačen smer delovanja. primjeri: Primjeri sa dodatnim HTML kodom Iznad smo dali dva primjera online verzija publikacija koje koriste CSS brojače. Sada pogledajmo još dva primjera, ali sada umjesto brojača koristimo nepotreban HTML kod (iako je sadržaj dostupan u njemu): Zaključak U ovom kratkom članku naučili smo kako stilizirati numerirane liste koristeći CSS brojače. rezimirati: CSS brojači su odlični za bilo koji projekat sa dinamičkim numerisanim listama i prilagođenim stilovima. Međutim, ova metoda nije 100% dostupna. Neophodno je razumjeti njegove slabosti i koristiti ga samo kada je to prikladno. Da biste kreirali brojač, morate postaviti dva svojstva (counter-reset, counter-increment) i jednu funkciju (counter () ili brojači ())). Brojač se prikazuje kroz pseudoelement. Svojstvo content učestvuje u radu brojača, a dostupno je samo ispod pseudoelementa. Jeste li ikada koristili CSS brojače u svojim projektima? Ako jeste, slobodno podijelite svoj rad!
Reg.ru: domeni i hosting
Najveći registrator i hosting provajder u Rusiji.
Više od 2 miliona imena domena u upotrebi.
Promocija, mail za domen, poslovna rješenja.
Više od 700 hiljada kupaca širom svijeta već je odlučilo.
* Zadržite pokazivač miša da pauzirate pomicanje.
Nazad naprijed
12 impresivnih CSS karakteristika
Ako ste poput mene, onda kada vidite impresivan demo novog CSS3 efekta, jednostavno ne možete a da ne počnete da ga koristite u svom radu.
Naravno, kasnije saznate da ovaj efekat možete koristiti u 2 ili 3 glavna pretraživača (prirodno, IE, kao i uvijek, nervozno puši po strani i nije uključen u ovu listu) i obično odlučite da sačekate.
Sačekajte da ovaj efekat podržavaju svi pretraživači. Ali ja dobre vijesti Za tebe! Sa najnovijim ažuriranjem pretraživača, postoje neke odlične CSS3 stvari koje podržavaju svi pretraživači, a možete ih početi koristiti odmah!
Lirska digresija: većina ovih efekata ne radi u starijim verzijama IE (od verzije 9 i niže). Ako se desi da se u vašoj zemlji ovi pretraživači koriste svuda, onda se bojim da ću morati da vas uznemirim, ova lekcija nije za vas. Ali za ostalo, evo šta nam nude moderni pretraživači:
1. CSS animacije i prijelazi
CSS animacija je konačno dostupna za sve glavne pretraživače, čak i za IE! (počevši od verzije 10). Postoje 2 načina da kreiranje CSS-a animacije. Prvi je vrlo jednostavan i radi kroz svojstvo tranzicija.
Koristeći ovo svojstvo, možete stvoriti efekte na činjenicu da lebdite mišem ili, obrnuto, da ga pomaknete od određenog područja, ili možete pokrenuti animaciju pomoću JavaScripta da promijenite svojstva objekta.
Kao demonstracija takvih tranzicija zasnovanih na imovini tranzicija, gore je primjer efekat lebdenja sa planetom i raketom. Kada lebdite iznad planete, raketa se rotira bliže njoj.
Drugi način animacije je malo složeniji - vezan je za opis animacije kroz pravilo @keyframe, koji vam omogućava da kreirate animacije koje se ponavljaju ili ponavljaju, neovisno o radnji korisnika ili javascript okidaču.
Kod efekta je prikazan ispod:
Kontejner (širina: 300px; visina: 300px; margina: 0 auto; pozicija: relativna; prelivanje: skriveno;) .planet (pozicija: apsolutna; vrh: 0; lijevo: 0; širina: 100%; visina: 100%; pozadina : url (http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) centar centra bez ponavljanja;) .rocket (pozicija: apsolutna ; vrh: 0; lijevo: 0; širina: 100%; visina: 100%; pozadina: url (http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets /img/rocket.png) centar bez ponavljanja 50px; / * Chrome i dalje zahtijeva prefiks -webkit- * / -webkit-animation: orbita 2s linearna beskonačna; animacija: orbita 2s linearna beskonačna; prijelaz: background-position 0.8s; ) .container: lebdjeti .rocket (pozicija pozadine: 80px centar;) / * Postavlja ključne kadrove za animaciju * ​​/ @ -webkit-keyframes orbitu (od (-webkit-transform: rotirati (0deg);) do (-webkit-transform : rotirati (360 stupnjeva);)) @keyframes orbita (od (transform: rotirati (0 stupnjeva); / * Uključio sam svojstvo -webkit-transform jer , Google Chrome bi mogao početi podržavati ključne kadrove bez prefiksa u budućnosti * / -webkit-transform: rotirati (0deg);) u (transform: rotirati (360deg); -webkit-transform: rotirati (360 stepeni); ))
Ovdje ima dosta toga o CSS animaciji i pretpostavljam da ćete početi s ovim člankom. Ako ste znatiželjni da li vaš pretraživač podržava ovaj efekat ili ne, volite i favorizirajte ovu tabelu.
2. Brojanje vrijednosti pomoću svojstva izračun ()
Još jedan cool novi CSS gizmo je funkcija izračun ()... Omogućava vam da uradite najjednostavnije aritmetičkim proračunima u CSS-u. Ovo možete koristiti svuda gdje vam je potrebna dužina ili širina.
Ali ono što je još kul je to što možete bezbedno da mešate različite dimenzije, bilo da su to pikseli ili procenti.
Ovo vam omogućava da kreirate velika količina razne trikove i tehnike (na primjer, sa slojevima i pozicioniranjem), stavljajući na lopatice sve trikove kojima ste možda morali pribjeći da biste dobili isti rezultat. Šta bi moglo biti bolje? I evo šta, radi sa IE 9. (ura!) verzijom i iznad i bez dodatnih prefiksa.
Ovaj div ima 20px sa obe strane.
/ * Izračunaj širinu * / .kontejner (širina: izračunavanje (100% - 40px); boja pozadine: # CDEBC4; boja: # 6D8B64; poravnanje teksta: centar; padding: 25px 0; margina: 0 auto;)
3. Napredni birači
Danas, ako dodate ID-ove elementima samo da biste na njih primijenili svojstva stila, u osnovi ste u krivu. Pošto su CSS2.1 i CSS3 uključeni veliki broj moćni birači koji će učiniti vaše rasporede čišćim i stilove hladnijim.
Ovo podržavaju svi glavni pretraživači uključujući IE9 i novije verzije.
primjer:
Paragraf teksta koji je neodvojiv od drugih oznaka i id-shnika, sa određenom količinom zanimljiv css stilova
/ * CSS stilovi - ništa zanimljivo ovdje * / p (veličina fonta: 16px; širina: 420px; margina: 20px auto 0; text-align: centar;) .container (širina: 420px; margina: 50px auto 0; prelivanje: skriveno; padding: 5px;) .elem (širina: 30px; visina: 30px; margina: 4px; boja pozadine: # A0DFAC; float: lijevo;) .elem span (pozicija: apsolutna; vrh: 5px; lijevo: 5px; desno: 5px; dole: 5px; granica: 2px solid #fff;) / * Selektor koji primenjuje svojstva na prvo slovo i prvi red našeg pasusa * / p :: prvo slovo (boja pozadine: # 666; boja: # FFF; veličina fonta: 24px; stil fonta: normalan; display: inline-block; padding: 0 5px; radijus granice: 3px; margin-desno: 2px; porodica fontova: serif;) p :: prvi red (veličina fonta: 18px; transformacija teksta: mala slova; stil fonta: kurziv; dekoracija teksta: podcrtavanje;) / * Učinite prvi i posljednji element ljubičastim * / .elem: first-child, .elem: zadnji -dijete (boja pozadine: # 948bd8;) / * Zaokružite sve ostale elemente * / .elem: nth-child (neparan) (granični radijus s: 50%; ) / * Učinite svaki 6. element crvenim * / .elem: nth-child (6) (boja pozadine: # cb6364;) / * Stil elementa koji sadrži oznaku span * / .elem: nije (: prazno) ( boja pozadine: # 444; pozicija: relativna; -webkit-transform: rotiraj (25 stupnjeva); transformiraj: rotiraj (25 stupnjeva);) / * Ciljni elementi prema atributu * / .elem (boja pozadine: #aaa;) .elem (boja pozadine: # d7cb89;) / * Vrijednost atributa mora početi sa "bar". pošto ovo odgovara gornja dva elementa * / .elem (širina: 16px; visina: 16px; margina: 11px;) / * Sljedeći element nakon onog sa data-foo = "bar2" * / .elem + .elem (pozadina -boja: # 78ccd2;)
4. Generisani sadržaj i brojači
Generisani sadržaj je moćan alat u rukama programera, koji postaje dostupan nakon primjene pseudo-elemenata :: prije i :: poslije.
Ova funkcija će vam omogućiti da koristite manje HTML-a nego što bi moglo biti. Ovo je posebno korisno u slučajevima kada trebate primijeniti sjene na blokove ili druge vizuelni efekti za koje su potrebne oznake raspon ili div... Kao rezultat toga, na kraju ćete dobiti minimalističniji i semantički ispravniji HTML kod.
CSS3 takođe daje pristup pseudo-elementima brojačima koji se mogu povećati CSS pravilima. Oni također mogu primati vrijednosti atributa od roditeljske elemente koji ih sadrže. Pogledajte primjer u nastavku:
Dugme Dugme Dugme Dugme
Kontejner (/ * Postavlja brojač pod nazivom cnt jednak nuli* / poništavanje brojača: cnt; položaj: relativan; text-align: centar; padding: 20px 0; širina: 420px; visina: 160px; margina: 0 auto; ) / * Možete stilizirati pseudoelemente i dati im sadržaj kao da su stvarni elementi na stranici * / .container :: prije (prikaz: blok; sadržaj: "Zadržite pokazivač iznad ovih stavki:"; veličina fonta: 18px ; font-weight: bold; text-align: center; padding: 15px;) .container span (display: inline-block; padding: 2px 6px; background-color: # 78CCD2; boja: # 186C72; border-radijus: 4px ; margina: 3px; kursor: default;) / * Kreirajte brojač sa pseudoelementom * / .container span :: after (/ * Svaki put kada se ovo pravilo primeni, brojač će biti uvećan za 1 * / kontrainkrement: cnt; / * Dodajte dio sadržaja vrijednosti brojača * / sadržaj: "#" brojač (cnt); display: inline-block; padding: 4px;) / * Pseudo-elementi mogu pristupiti atributima svojih roditelja * / .container raspon :: prije ( pozicija: apsolutna; dolje: 0; lijevo: 0; širina: 100%; sadržaj: attr (naslov-podataka); boja: # 666; neprozirnost: 0; / * Animacija prijelaza * / -webkit-transition : neprozirnost 0,4 s; prijelaz: opac ity 0.4s; ) .raspon kontejnera: lebdjeti :: prije (prozirnost: 1;)
Generisani sadržaj je podržan svuda, uključujući IE9 i novije verzije.
Gradijenci daju web dizajnerima mogućnost kreiranja glatki prelazi između boja bez upotrebe slika. CSS gradijenti također izgledaju sjajno na mrežnim ekranima jer se generiraju u hodu.
Mogu biti linearni ili radijalni i mogu se podesiti da se ponavljaju. Neko vrijeme bili su nedostupni svima, ali su nakon nekoliko mjeseci i određenog broja promjena u sintaksi postali dostupni gotovo svima, bez dodatnih prefiksa.
Linearno
Radijalno
Ponavljam Lin.
Ponavljanje Rad.
CS.container (poravnanje teksta: centar; padding: 20px 0; širina: 450px; margina: 0 auto;) .container div (širina: 100px; visina: 100px; prikaz: inline-block; margina: 2px; sjena kutije : 0 0 1px rgba (0, 0, 0, 0.5) umetnuti, 0 1px 1px #DDD; radijus granice: 2px; boja: # 666; vertikalno poravnanje: vrh; visina linije: 230px; veličina fonta: 12px ;) # el1 (pozadina: linearni gradijent (do dna, # 8dd2d9, # 58c0c7);) # el2 (pozadina: radijalni gradijent (# 77d19e, # 46c17b);) # el3 (pozadina: ponavljajući linearni gradijent ( -45deg, # de9dd4, # de9dd4 5px, bijela 5px, bijela 10px);) # el4 (pozadina: repeating-radial-gradient (# b8e7bf, # b8e7bf 5px, bijela 5px, bijela 10px);)
Možete li zamisliti vrijeme kada smo bili ograničeni na nekoliko ručno nacrtanih fontova koji definitivno rade u svim pretraživačima? Teško je povjerovati, ali danas zahvaljujući servisima kao npr Google fontovi i typekit, koji vam omogućavaju da koristite odlične fontove jednostavnim uključivanjem u stilove na vašoj stranici.
Postoje čak i fontovi za ikone, poput fontawesome, koji sadrže slatke vektorske ikone umjesto slova ili brojeva. Sve to omogućava pravilo @ font-face koji vam omogućava da postavite ime, karakteristike i izvor fonta, koji se kasnije može referencirati kroz svojstvo font / porodica fontova.
Evo mog predivnog fonta!)
H1 (/ * Koristeći odabrani font povezujemo se sa HTML-om * / font-family: Satisfy, cursive; font-weight: normal; font-size: 24px; padding-top: 60px;)
Uz nekoliko rješenja, fontovi rade u pretraživačima počevši od IE 6. Međutim, postoje 2 usluge koje su gore opisane, tako da vam sada ne trebaju ova rješenja.
7. Veličina bloka. Nekretnina box-size
Najveća glavobolja za početnike u CSS-u je model kutije.
Postojali su neki dobri razlozi za standardizaciju ovog modela, ali on je ostao intuitivno nerazumljiv, na primjer, u slučajevima kada postavljate visinu i širinu bloka, ali su se mijenjali ovisno o vrijednosti padding ili granica.
Ovaj manji previd sve lomi, ali konačno imamo način da povratimo razum i riješimo se glavobolje. Ispuni pravilo box-size! Sada možete pitati granična kutija koji zadržava elemente tačno onakvima kakvi želite da budu. Uvjerite se sami:
Element 1
Element 2
Element 3
Container (text-align: center;) .container div (/ * Podešavanje metode veličine kutije * / box-sizing: border-box; / * Firefox je poseban za nas, tako da još uvijek zahtijeva prefikse * / -moz-box -sizing : border-box; širina: 120px; visina: 120px; display: inline-block; vertical-align: top;) / * Zahvaljujući pravilu za veličinu okvira, možemo postaviti vrijednosti paddinga i obruba na bilo koju vrijednost želimo, a elementi će ostati iste veličine kao što su bili * / # el1 (boja: # 524480; boja pozadine: # B2A4E0;) # el2 (padding: 8px; granica: 10px čvrsta # 9ec551; boja pozadine: #fff;) # el3 (padding: 32px ; boja pozadine: #ccc;)
8. Slike kao granice ili vlasništvo border-image
Nekretnina border-image omogućava vam da prikažete posebno dizajnirane slike oko elemenata kao potez. Određene granice sadržane u slici ili spriteu odgovaraju ili odgovaraju određenim granicama blok elementi... Pogledajte primjer kako biste ovo jasnije razumjeli:
Pozdravite slatke poteze blokova slika!
P (poravnanje teksta: centar; padding: 20px; širina: 340px; margina: 0 auto; / * Postavite svojstva za ivicu i za sliku koja se koristi kao ivica * / granica: 30px čvrsta transparentna; border-image: url ( http : //demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 runda;)
Za detaljniju studiju pogledajte ovu stranicu i ovaj paragraf. Podržavaju svi glavni pretraživači i IE 11.
Medijski upiti su obavezni ako želite da se ozbiljno bavite web dizajnom. Postoje već neko vrijeme, ali vrijedni su pomena takvi kakvi jesu. promijenili su način na koji pravimo web stranice.
Ovo se koristi kada trebate da web stranica izgleda isto na različitim uređajima (npr mobilnih uređaja- tablete, pametne telefone, laptope, itd.) sa različitim širinama ekrana. Danas kreiramo sajtove koji moraju biti u stanju da se prilagode tipu uređaja, njegovoj orijentaciji i rezoluciji monitora.
Medijski upiti su nevjerovatno jednostavni za korištenje: sve što trebate učiniti je umotati svoje CSS stilove u blok pravila. @media. Svaki @media blok se aktivira kada se ispuni jedan ili više uslova.
Glavni sadržaj članka nalazi se ovdje
/ * Stil za glavni sadržaj i bočnu traku * / .kontejner (širina: 900px; margina: 0 auto; prelivanje: skriveno;) .main-section (boja pozadine: # CDEBC4; boja: # 6D8B64; širina: 520px; float : lijevo; visina: 500px;) .bočna traka (boja pozadine: #ccc; širina: 350px; float: desno; visina: 400px;) .container p (padding-top: 100px; text-align: center;) .note ( text-align: center; padding-top: 60px; font-style: italic;) / * Ovi jednostavni medijski upiti omogućavaju blokovima da se prilagode širini vašeg ekrana * / @media (max-width: 900px) (.container (width : 100 %;) .main-section, .sidebar (širina: auto; margin-bottom: 20px; float: nema;))
Medijski upiti mogu uključivati ​​provjere rezolucije ekrana uređaja, orijentacije, dubine boje i još mnogo toga. O svemu tome možete pročitati i pogledati tabelu kompatibilnosti.
10. Pozadine na različitim slojevima
Uz ovu funkciju, dizajneri stvaraju nevjerovatno zanimljive efekte. Oni mogu sastaviti cijelu sliku iz njenih različitih dijelova koji se nalaze na različitim slojevima.
Svaki takav sloj (slika) može se pomicati i animirati na svoj način, na primjer, kao što je prikazano ispod (pređite kursorom miša preko slike i pogledajte šta se dešava). Sva CSS pozadinska svojstva sada mogu prihvatiti listu svojstava odvojenu zarezima za svaki pojedinačni sloj:
Razmak (/ * Postavite listu pozadina odvojenih zarezima * / pozadina: url ("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big. png" ) centar bez ponavljanja 70px, url ("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg") bez ponavljanja donji centar ; širina: 200px; visina: 200px; margina: 0 auto; granica-radijus: 3px; / * Animirana pozicija za obje pozadine * / prijelaz: background-position 1s;) .space: hover (/ * Isto za svojstva? kao što su background-position i repeat * / background-position: 35% 20px, gore desno;)
Za više informacija pogledajte ovdje. Visoko dobra podrška pretraživači - svi moderni pretraživači podržavaju ovo pravilo. .
Rasporedi zasnovani na kolonama bili su veliki problem za one koji rade sa CSS-om. Obično je u ovo uključen server ili javascript kako bi se tekst podijelio na jednake dijelove/kolone. Ovo je učinilo zadatak nevjerovatno teškim i također je ubilo mnogo dragocjenog vremena programera. Konačno, sada je to lako učiniti sa CSS pravilom. kolone.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mecenas pellentesque urna nec eros ornare, ac tristique diam porta. Donec fermentum velit eget dignissim condimentum. Sed rutrum libero sit amet enim viverra tristique. Mauris ultricies ornare arcu non adipiscing. Sed id ipsum vitae libero facilisis pulvinar id nec lacus. Ut lobortis neque et luctus mattis. Morbi nunc diam, elementum rutrum tellus non, viverra mattis diam. Vestibulum sed arcu tincidunt, auctor ligula ut, feugiat nisi. Phasellus adipiscing eros ut iaculis sagittis. Sed posuere vehicula elit vel tincidunt. Duis feugiat feugiat libero bibendum consectetur. Ut in felis non nisl egestas lacinia. Fusce interdum vitae nunc eget elementum. Quisque dignissim luctus magna et elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nunc lorem, convallis consequat fermentum eget, aliquet sit amet libero.
Kontejner (širina: 500px; margina: 0 auto;) / * Baš tako, kreirajte kolone * / .container p (-moz-columns: 3; -webkit-columns: 3; kolone: ​​3;)
Postoji dobra podrška za ovo pravilo, ali i dalje zahtijeva prefikse. Ali postoje određene razlike i nijanse između pretraživača kojih je važno biti svjestan.
12. 3D CSS transformacije
Ne postoji ništa privlačnije i divnije na webu od impresivnog 3D CSS demo. Iako je korisnost ovoga izvan demo i izvan portfelja pomalo upitna, 3D CSS nudi nekoliko najmoćnije karakteristike za dizajnere i programere koji mogu osvojiti srca korisnika ako se pravilno koriste.
Pogledajte primjer koda u nastavku:
Kontejner (/ * Kako treba izraziti 3D efekte * / perspektiva: 800px; -webkit-perspective: 800px; pozadina: radijalni gradijent (# e0e0e0, #aaa); širina: 480px; visina: 480px; margina: 0 auto; granica: 0 auto; granica: -radijus: 6px; pozicija: relativna;) .iphone-prednji, .iphone-pozadi (/ * Povezivanje 3D transformacije * / transform-style: sačuvaj-3d; -webkit-transform-style: sačuvaj-3d; / * Koristimo 2 različita diva za prednju i stražnju stranu telefona Ovo svojstvo skriva div kada se rotira tako da će se prikazati suprotna strana * / backface-visibility: hidden; -webkit-backface-visibility: hidden; širina: 200px; visina: 333px; pozicija: apsolutna; vrh: 50%; lijevo: 50%; margina: -166px 0 0 -100px; pozadina: url (http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally - upotreba / sredstva / img / iphone.png) bez ponavljanja lijevo središte; / * Animacija prijelaza * / prijelaz: 0,8 s;) .iphone-back (/ * Zadnja strana je rotirana za 180 stepeni prema zadanim postavkama * / transformacija: rotateY (180 stepeni); - webkit-transform: rotateY (180deg); pozadinski položaj: desno središte; ) .container: lebdeti .iphone-front (/ * Kada se kontejner pređe mišem i lebdi se aktivira, rotirajte prednji dio i sakrijte ga * / transform: rotateY (180 stupnjeva); -webkit-transform: rotateY (180 stupnjeva);) . kontejner : lebdjeti .iphone-back (/ * ... u isto vrijeme rotirati zadnji deo i učinite ga vidljivim * / transformirajte: rotateY (360deg); -webkit-transform: rotateY (360deg); )
Ovaj kod je napravljen po uzoru na ovaj vodič, koji preporučujem da pogledate.
Ako želite da saznate više o 3D CSS-u, pogledajte detaljan uvod. Ako ne ciljate starije IE pretraživače, onda je i podrška pretraživača za 3D CSS prilično dobra.
Ostale dobrote vrijedne pomena
Ako još uvijek koristite prefikse za granica-radijus i box-shadow, sada možete sigurno zaboraviti na to.
Također, sada možete početi koristiti data-uri za pozadinske slike, za sve pretraživače.
Nekretnina neprozirnost sada dostupno i podržano svuda, također će biti vrlo korisno poznavati nekretninu veličina pozadine.
Proći će neko vrijeme prije podrške za više pretraživača za flexbox, @supports, filtere i CSS maske, ali siguran sam da je vrijedno čekanja!
CSS brojači omogućavaju vam da prilagodite izgled sadržaja na osnovu njegove lokacije u dokumentu. Na primjer, možete koristiti brojače da automatski numerišete naslove na web stranici. Brojači su, u suštini, varijable koje održava CSS, čije vrijednosti mogu biti povećane CSS pravilima kako bi se pratilo koliko puta se „ponovno koriste.
Korišćenje brojača
Manipuliranje vrijednosti brojača
Da biste koristili CSS brojač, on se prvo mora inicijalizirati na vrijednost sa svojstvom poništavanja brojača (0 po defaultu). Isto svojstvo se također može koristiti za promjenu njegove vrijednosti u bilo koji određeni broj. Jednom inicijalizirana, vrijednost brojača se može povećati ili smanjiti sa povećanjem brojača. Ime brojača ne smije biti "none", "naslijediti" ili "početno"; inače se deklaracija ignoriše.
Prikaz brojača
Vrijednost brojača može se prikazati korištenjem funkcije brojača () ili brojača () u svojstvu sadržaja.
Funkcija brojač () ima dva oblika: "brojac (ime)" ili "brojac (ime, stil)". Generisani tekst je vrednost najdubljeg brojača datog imena u opsegu na datom pseudoelementu. Formatiran je u specificiranom stilu (decimalno po defaultu).
Funkcija brojači () također ima dva oblika: "brojači (ime, niz)" ili "brojači (ime, string, stil)". Generisani tekst je vrednost svih brojača sa datim imenom u opsegu na datom pseudo-elementu, od najudaljenijeg do unutrašnjeg, odvojenih navedenim nizom. Brojači se prikazuju u naznačenom stilu (decimalno po defaultu).
Osnovni primjer
Ovaj primjer dodaje "Section:" na početak svakog naslova.
CSS
tijelo (poništavanje brojača: sekcija; / * Postavite brojač pod nazivom "sekcija", a njegova početna vrijednost je 0. * /) h3 :: prije (povećavanje brojača: odjeljak; / * Povećajte vrijednost brojača sekcija za 1 * / sadržaj: brojač (sekcija); / * Prikaži vrijednost brojača sekcija * /)
Html
Uvod
Tijelo
Zaključak
Rezultat
Brojači za gniježđenje
CSS brojač može biti posebno koristan za pravljenje skiciranih lista, jer se nova instanca brojača automatski kreira u podređenim elementima. Koristeći funkciju brojači (), razdvojeni tekst se može umetnuti između različitih nivoa ugniježđenih brojača.
Primjer ugniježđenog brojača
CSS
ol (poništavanje brojača: sekcija; / * Kreira novu instancu brojača sekcija sa svakim elementom ol * / list-style-type: none;) li :: prije (povećavanje brojača: odjeljak; / * Povećava samo ovu instancu brojača sekcija * / sadržaj: brojači (odjeljak, ".") ""; / * Kombinira vrijednosti svih instanci brojača sekcija, odvojene tačkom * /)
Html
1. predmet
2. predmet
   1. predmet
   2. predmet
   3. predmet
      1. predmet
      2. predmet
      1. predmet
      2. predmet
      3. predmet
   4. predmet
3. predmet
4. predmet
1. predmet
2. predmet