Brojači su označeni identifikatorima (pogledajte odjeljke 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 označen je kako slijedi: "brojači ( , ) "ili" brojači ( , , )".

U CSS2, vrijednost brojača može se postaviti putem svojstva "content". Dopušteno je koristiti none kao vrijednost svojstva "content", što je ekvivalentno praznom popisu.

Sljedeći primjer stvara stil koji je numerirao elemente "P" za svaki element "H1", svaki odlomak numeriran rimskim brojevima nakon kojih slijedi točka i razmak.

Brojač koji prelazi granice postavljene za njega parametrom "counter-reset" resetuje se 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 numeriranja (sve vrste se postavljaju prema svojstvu list-style-type)

Automatsko numeriranje u CSS2 stvara se korištenjem auto-contenta (svojstva sadržaja) uz svojstva poništavanja brojača i svojstava brojača.

U početku, naziv brojača mora biti specificiran s drugim izbornim parametrom koji definira stil automatsko numeriranje, na primjer

Automatsko numeriranje u CSS2 kontroliraju dva svojstva poništavanje brojača i povećanje brojača. Poništavanje brojača stvara pododjeljke pomoću automatskog numeriranja. Ovo svojstvo, kao i svojstvo brojača, može sadržavati naziv brojača i opcijski inkrement kao vrijednost.

CSS2.1 specifikacija sadrži tehniku ​​koja programeru omogućuje kombiniranje tri CSS svojstva i pseudo-element za stvaranje brojača koji se automatski povećava, poput onog koji se koristi u uređenom popisu.

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

ili
i sa samo jednostavnim povećanjem, nova metoda organiziranja brojača uvedena u CSS2.1 može se koristiti s bilo kojim skupom elemenata i ima veću fleksibilnost u organiziranju 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 korištenje takvog brojača i ukazati na njegove prednosti i nedostatke.

Sintaksa

CSS kod brojača izgleda ovako:

Div.odjeljak (poništavanje brojača: naslovi 0;) h2: prije (porast 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.

Raščlanjivanje sintakse

Dakle, shvatimo sintaksu i čemu služe parovi svojstvo/vrijednost:

Indikator konteksta

Prvi blok deklaracija (selektor div.section) označava koji odjeljak u oznaci 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 posebna 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, trebate definirati naziv brojača koji će se koristiti za elemente deklarirane u sljedećem bloku.
Poništi brojač
Svojstvo ponovnog poništavanja treba koristiti zajedno sa selektorom koji definira kontekst, kao što je gore opisano. Prvi dio vrijednosti je prilagođeno ime koje date brojaču. Ovo je obavezan dio. Naziv može biti bilo što osim riječi rezerviranih u CSS-u (na primjer, brojaču ne možete dati ime "Ništa", "naslijediti", ili "Inicijal").
Drugi dio vrijednosti za svojstvo poništavanja brojača nije obavezan. Zadana vrijednost je “0 ″. Ovaj broj označava početnu točku za brojač. Važno je zapamtiti da odbrojavanje počinje od sljedeće vrijednosti cijelog broja 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 od "-4" i tako dalje.
Numerirane stavke
Drugi oglasni blok (selektor h2) koristi pseudoelement: prije da naznači gdje će se određeni sadržaj postaviti (pomoću svojstva sadržaja) prije svih ciljnih elemenata (u našem slučaju, to su
).
Povećajte brojač
Svojstvo counter-increment pokazuje s kojim je kontekstom brojač zapravo povezan. Dakle, prva vrijednost (obavezna) je odgovarajući naziv prilagođenog brojača iz svojstva poništavanja brojača u ID-u konteksta iz prvog bloka deklaracije.
Druga vrijednost za svojstvo protuprirasta nije obavezna. Predstavlja iznos za koji bi se brojač trebao povećati (ili smanjiti ako ste naveli negativnu vrijednost). Zadana vrijednost je “1 ″.
Sadržaj kutije
Koristimo svojstvo sadržaja kako bismo točno odredili što treba umetnuti prije svakog elementa u danom skupu (elementi
).
Jedina potrebna vrijednost za svojstvo sadržaja je funkcija brojač (), ali obično se nešto drugo (kao što su razmaci) dodaje prije ili poslije (vidi gornji primjer) 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 nije obavezan i specificira format za izlaz vrijednosti brojača. Zadana postavka je “ decimal", ali možete odrediti" gornjorimski”, “gornji alfa”, I tako dalje (kao i za svojstvo tipa stila popisa uređenog popisa).
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 komplicirano, infografika u nastavku prikazuje osnovne elemente CSS brojača:
Podrška za preglednik i nedostaci
Nekoliko brojača koji se koriste za isti kontekst (za izgradnju kaskade numeriranja) moraju se deklarirati 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 nadjačava prethodni. Dakle, oba brojača moraju biti deklarirana u istom retku:
Div.numerirano (poništavanje brojača: naslovi 0 podnaslovi 0)
Potencijalni nedostatak korištenja 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 nejasna.
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, Operi i Safariju. Firefox i Chrome podržavaju sva opisana svojstva bez problema.
Prednosti i praktična upotreba
CSS brojači imaju očitu prednost jer ne morate brinuti o numeriranju različitih odlomaka u vašem sadržaju. Kao i poredani popisi, 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 numeriranje poglavlja (kao u našem primjeru)
• Numeriranje redaka tablice ili njenih ćelija
• Numeriranje HTML naslova
• Poboljšanje / promjena izgleda ili povećanje vrijednosti za redovne poredane liste
Mogu li se koristiti CSS brojači?
Budući da nisu podržani u IE6 i IE7, klijentske stranice ne bi trebale koristiti CSS brojače niti tražiti prikladnu zamjenu. Ali za web-mjesta i aplikacije usmjerene na tehničku publiku (na primjer, web-mjesto za korištenje na mobilnim uređajima s preglednicima koji podržavaju CSS3), takvi brojači mogu biti učinkovit način za stvaranje sustava numeriranja toč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 pogledat ćemo CSS brojače, korisno, ali još ne dobro poznato svojstvo. Nakon naše demonstracije, pogledat ćemo primjere stranica iz stvarnog svijeta koje koriste CSS brojače.
Primarni cilj: Oblikovanje numeriranog popisa
Prvo, da vidimo što bismo trebali dobiti:

Ništa komplicirano, zar ne? Ali postoji mali "ali": pri izradi markera koristit ćemo semantičku oznaku i, ako je moguće, izbjegavati nepotrebne divove i raspone koliko god je to moguće. Analizirajmo fleksibilnu i razumljivu metodu!
CSS brojači
Da biste stvorili ovaj predložak, trebate samo stvoriti numerirani popis. U ovom trenutku možete reći: "Ne mogu li uzeti još jedan element ili čak ne popis." Odgovor je da, ali zapamtite da samo numerirani popis točno opisuje strukturu naše stranice.
Drugo pitanje će vjerojatno biti "Je li moguće potpuno ponoviti izgled brojeva na popisu?" Stiliziranje numeriranog popisa prilično je zeznuto, ali srećom postoji još jedan način za više preglednika. Dakle, sakrijmo brojeve popisa 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 stvoriti brojač za numerirani popis i postaviti njegov opseg. Koristili smo svojstvo poništavanja brojača.
Prva vrijednost je naziv brojača
Nakon toga slijedi izborni parametar koji postavlja početnu točku brojača (zadano 0). Imajte na umu da brojač uvijek broji, t.j. naša prva vrijednost bit će 1.

Stiliziranje dječjih elemenata. Na drugoj slici možete vidjeti da dodajemo stilove za pseudo-klasu :: prije na stavku popisa li.
Svojstvu sadržaja dodijeljena je vrijednost. Koristeći CSS brojače sa svojstvom sadržaja, možemo spojiti generirane brojeve sa nizovima.
Naznačen je naziv brojača
A tip je postavljen na decimalni (dekadski brojevni sustav). Pozitivne vrijednosti su iste kao vrijednosti za svojstvo tipa stila popisa.
U svojstvu brojača ponovno navodimo naziv brojača
Zatim, po želji, možete odrediti korak povećanja. Zadana vrijednost je 1.
Označavanje
Na temelju gore navedenog, oznaka bi izgledala ovako:
1. Stavka popisa

   Neki tekst ovdje.

2. Stavka popisa

   Neki tekst ovdje.

<-- еще элементы списка -->
< ol > < li > < h4 >Stavka popisa< / h4 > < / li > < li > < h4 >Stavka popisa< / h4 > < / li > < -- ещеэлементысписка-- > < / ol >
ol (poništavanje brojača: odjeljak;) li (vrsta-stila 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; položaj: apsolutni; lijevo: -75px; vrh: 50%; transformacija: translateY (-50%); padding: 12px; font- veličina: 2rem; širina: 25px; visina: 25px; poravnanje teksta: centar; boja: # 000; radijus obruba: 50%; obrub: 3px čvrsta # 000;)
ol ( brojač - resetiranje: odjeljak; li ( popis - stil - vrsta: nema; font - veličina: 1,5rem; padding: 30px; margina - dno: 15px; pozadina: # 0e0fee; boja: #fff; li :: prije ( sadržaj: brojač (odjeljak); brojač - prirast: presjek; prikaz: inline - blok; pozicija: apsolutna; lijevo: - 75px; vrh: 50%; transformirati: 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 pri korištenju Internet Explorera narator nije izgovorio generirani sadržaj. Trenutačno će većina čitača zaslona normalno prepoznati ovaj sadržaj. Međutim, da biste razumjeli što se može generirati pomoću pseudoelemenata, a što ne, trebate samo znati ta ograničenja. Primjeri CSS brojača Naučili smo osnove rada s CSS brojačima, a sada vam možemo pokazati nekoliko primjera njihove potencijalne upotrebe. CSS brojači se prvenstveno koriste u online verzijama novina. Često će se nalaziti u bočnim trakama: CSS brojači se također mogu koristiti u odjeljcima gdje su opisani koraci ili je naznačen smjer djelovanja. primjeri: Primjeri s 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 u njemu dostupan): Zaključak U ovom kratkom članku naučili smo kako stilizirati numerirane popise pomoću CSS brojača. Rezimirati: CSS brojači izvrsni su za svaki projekt s dinamičkim numeriranim popisima i prilagođenim stilovima. Međutim, ova metoda nije 100% dostupna. Potrebno je razumjeti njegove slabosti i koristiti ga samo kada je to prikladno. Da biste stvorili brojač, trebate postaviti dva svojstva (poništavanje brojača, povećanje brojača) i jednu funkciju (brojač () ili brojači ())). Brojač se prikazuje kroz pseudoelement. Svojstvo sadržaja sudjeluje 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: domene i hosting
Najveći registrator i pružatelj usluga hostinga u Rusiji.
Više od 2 milijuna imena domena u službi.
Promocija, mail za domenu, poslovna rješenja.
Više od 700 tisuća kupaca diljem svijeta već je odlučilo.
* Zadržite pokazivač miša za pauziranje pomicanja.
Natrag naprijed
12 impresivnih CSS značajki
Ako ste poput mene, onda kada vidite impresivan demo novog CSS3 efekta, jednostavno ne možete a da ga ne počnete koristiti u svom radu.
Naravno, kasnije saznate da ovaj efekt možete koristiti u 2 ili 3 glavna preglednika (naravno, IE, kao i uvijek, nervozno puši sa strane i nije uključen u ovaj popis) i obično odlučite pričekati.
Pričekajte da ovaj efekt podržavaju svi preglednici. Ali ja dobre vijesti Za tebe! Uz najnovije ažuriranje preglednika, postoje neke sjajne CSS3 stvari koje podržavaju svi preglednici, 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 dogodi da se u vašoj zemlji ti preglednici koriste posvuda, onda se bojim da ću vas morati uznemiriti, ova lekcija nije za vas. Ali za ostalo, evo što nam imaju za ponuditi moderni preglednici:
1. CSS animacije i prijelazi
CSS animacija je konačno dostupna za sve glavne preglednike, čak i za IE! (počevši od verzije 10). Postoje 2 načina da stvaranje CSS-a animacije. Prvi je vrlo jednostavan i djeluje kroz svojstvo tranzicija.
Koristeći ovo svojstvo, možete stvoriti efekte na činjenicu da se mišem lebdi ili, obrnuto, pomičete ga od određenog područja, ili možete pokrenuti animaciju pomoću JavaScripta kako biste promijenili svojstva objekta.
Kao demonstracija takvih prijelaza temeljenih na svojstvima tranzicija, gore je primjer efekt lebdenja s planetom i raketom. Kada lebdite iznad planeta, raketa mu se okreće bliže.
Drugi način animacije je malo kompliciraniji - vezan je za opis animacije kroz pravilo @ključni okvir, što vam omogućuje stvaranje animacija koje se ponavljaju ili se ponavljaju neovisno o radnji korisnika ili okidaču javascripta.
Kod efekta je prikazan u nastavku:
Spremnik (širina: 300px; visina: 300px; margina: 0 automatski; položaj: relativan; preljev: skriven;) .planet (položaj: apsolutni; 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) središte bez ponavljanja;) .raketa (položaj: 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) središte bez ponavljanja 50px; / * Chrome još uvijek zahtijeva prefiks -webkit- * / -webkit-animation: orbita 2s linearna beskonačna; animacija: orbita 2s linearna beskonačna; prijelaz: background-position 0,8s; ) .container: lebdjeti .rocket (položaj 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 (iz (transform: rotirati (0 stupnjeva); / * Uključio sam svojstvo -webkit-transform jer , Google Chrome bi u budućnosti mogao početi podržavati ključne kadrove bez prefiksa * / -webkit-transform: zakreni (0 stupnjeva);) u (transformiraj: rotiraj (360 stupnjeva); -webkit-transform: rotirati (360 stupnjeva); ))
Ovdje ima puno o CSS animaciji i pretpostavljam da ćete početi s ovim člankom. Ako ste znatiželjni podržava li vaš preglednik ovaj efekt ili ne, volite i favorizirajte ovu tablicu.
2. Brojanje vrijednosti pomoću svojstva izračun ()
Još jedan cool novi CSS gizmo je funkcija izračun ()... Omogućuje vam da učinite najjednostavnije aritmetički proračuni u CSS-u. Možete ga koristiti svugdje gdje se trebate nositi s duljinom ili širinom.
Ali ono što je još bolje jest to što možete sigurno miješati različite dimenzije, bilo da se radi o pikseli ili postocima.
To vam omogućuje stvaranje 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. Što bi moglo biti bolje? I evo što, radi s IE 9. (ura!) verzijom i iznad i bez dodatnih prefiksa.
Ovaj div ima 20px s obje strane.
/ * Izračunaj širinu * / .kontejner (širina: calc (100% - 40px); boja pozadine: # CDEBC4; boja: # 6D8B64; poravnanje teksta: središte; padding: 25px 0; margina: 0 auto;)
3. Napredni birači
Danas, ako priložite ID-ove elementima samo da biste na njih primijenili svojstva stila, u osnovi ste u krivu. Budući da su uključeni CSS2.1 i CSS3 veliki broj moćni birači koji će vaše izglede učiniti čišćima, a stilove hladnijim.
To podržavaju svi glavni preglednici uključujući IE9 i novije verzije.
Primjer:
Odlomak teksta koji je neodvojiv od drugih oznaka i id-shnika, s određenom količinom zanimljiv css stilova
/ * CSS stilovi - ovdje ništa zanimljivo * / p (veličina fonta: 16px; širina: 420px; margina: 20px auto 0; text-align: center;) .container (širina: 420px; margina: 50px auto 0; preljev: skriveno; padding: 5px;) .elem (širina: 30px; visina: 30px; margina: 4px; boja pozadine: # A0DFAC; float: lijevo;) .elem raspon (pozicija: apsolutna; vrh: 5px; lijevo: 5px; desno: 5px; dolje: 5px; obrub: 2px solid #fff;) / * Selektor koji primjenjuje svojstva na prvo slovo i prvi redak našeg odlomka * / p :: prvo slovo (boja pozadine: # 666; boja: # FFF; veličina fonta: 24px; stil fonta: normalan; zaslon: inline-block; padding: 0 5px; radijus granice: 3px; margin-desno: 2px; font-family: serif;) p :: first-line (font-size: 18px; text-transform: smallcaps; font-style: italic; text-decoration: underline;) / * Učinite prvi i zadnji element ljubičastim * / .elem: first-child, .elem: last -child (boja pozadine: # 948bd8;) / * Zaokružite sve ostale elemente * / .elem: nth-child (neparan) (border-radiu 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);) / * Ciljani elementi prema atributu * / .elem (boja pozadine: #aaa;) .elem (boja pozadine: # d7cb89;) / * Vrijednost atributa mora početi s "bar". od ovo odgovara gornja dva elementa * / .elem (širina: 16px; visina: 16px; margina: 11px;) / * Sljedeći element nakon onog s data-foo = "bar2" * / .elem + .elem (pozadina -boja: # 78ccd2;)
4. Generirani sadržaj i brojači
Generirani sadržaj je moćan alat u rukama programera, koji postaje dostupan nakon primjene pseudoelemenata :: prije i :: poslije.
Ova značajka ć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 vizualni efekti koje zahtijevaju oznake raspona ili razd... Kao rezultat toga, dobit ćete minimalističkiji i semantički ispravniji HTML kod.
CSS3 također daje pseudo-elementima pristup brojačima koji se mogu povećati CSS pravilima. Također mogu primati vrijednosti atributa od roditeljskih elemenata koji ih sadrži. Pogledajte primjer u nastavku:
Dugme Dugme Dugme Dugme
Spremnik (/ * Postavlja brojač pod nazivom cnt jednaka nuli* / poništavanje brojača: cnt; položaj: relativan; poravnavanje teksta: središte; 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;) .raspon spremnika (prikaz: inline-block; padding: 2px 6px; boja pozadine: # 78CCD2; boja: # 186C72; radijus obruba: 4px ; margina: 3px; kursor: default;) / * Napravite brojač s pseudoelementom * / .container span :: after (/ * Svaki put kada se ovo pravilo primjenjuje, brojač će se povećati za 1 * / protuporast: 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: neprozirnost nost 0,4s; ) .raspon spremnika: lebdjeti :: prije (prozirnost: 1;)
Generirani sadržaj je svugdje podržan, uključujući IE9 i novije verzije.
Gradijenci daju web dizajnerima mogućnost stvaranja glatki prijelazi između boja bez korištenja slika. CSS gradijenti također izgledaju sjajno na zaslonima mrežnice jer se generiraju u hodu.
Mogu biti linearni ili radijalni i mogu se postaviti na ponavljanje. 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.
Linearni
Radijalni
Ponavljajući Lin.
Ponavljajući Rad.
CS.container (poravnanje teksta: središte; padding: 20px 0; širina: 450px; margina: 0 auto;) .container div (širina: 100px; visina: 100px; prikaz: inline-block; margina: 2px; sjena okvira : 0 0 1px rgba (0, 0, 0, 0.5) umetnuti, 0 1px 1px #DDD; radijus granice: 2px; boja: # 666; okomito 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 preglednicima? Teško je povjerovati, ali danas zahvaljujući servisima kao npr Google fontovi i typekit, koji vam omogućuju korištenje sjajnih fontova jednostavnim uključivanjem u stilove na vašoj stranici.
Postoje čak i fontovi ikona, poput fontawesome, koji sadrže slatke vektorske ikone umjesto slova ili brojeva. Sve to omogućuje pravilo @ font-face koji vam omogućuje da postavite naziv, karakteristike i izvor fonta, koji se kasnije može referencirati kroz svojstvo font / obitelj fontova.
Evo mog prekrasnog fonta!)
H1 (/ * Koristeći odabrani font povezujemo se s HTML-om * / font-family: Satisfy, cursive; font-weight: normal; font-size: 24px; padding-top: 60px;)
Uz nekoliko zaobilaznih rješenja, fontovi rade u preglednicima počevši od IE 6. Međutim, postoje 2 usluge koje su gore opisane, tako da vam ova rješenja sada nisu potrebna.
7. Veličina bloka. Vlasništvo kutija veličine
Najveća glavobolja za početnike u CSS-u je model kutije.
Bilo je dobrih razloga za standardizaciju ovog modela, ali on je ostao intuitivno nerazumljiv, na primjer, u slučajevima kada ste postavili 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 vratimo razum i riješimo se glavobolje. Ispuni pravilo kutija veličine! Sada možete pitati rubni okvir koja zadržava elemente točno onakvima kakvima biste željeli da budu. Uvjerite se sami:
Element 1
Element 2
Element 3
Spremnik (text-align: center;) .container div (/ * Postavljanje metode veličine okvira * / 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 što želimo, a elementi će ostati iste veličine kao što su bili * / # el1 (boja: # 524480; boja pozadine: # B2A4E0;) # el2 (podstava: 8px; obrub: 10px čvrsta # 9ec551; boja pozadine: #fff;) # el3 (ispun: 32px ; boja pozadine: #ccc;)
8. Slike kao granice ili vlasništvo granica-slika
Vlasništvo granica-slika omogućuje vam prikaz posebno dizajniranih slika 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 to jasnije razumjeli:
Pozdravite slatke poteze blokova slika!
P (poravnanje teksta: središte; padding: 20px; širina: 340px; margina: 0 auto; / * Postavite svojstva za obrub i za sliku koja se koristi kao obrub * / granica: 30px čvrsta prozirna; 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 odlomak. Podržavaju svi glavni preglednici i IE 11.
Medijski upiti su obavezni ako ćete se ozbiljno baviti web dizajnom. Postoje već neko vrijeme, ali vrijedni su spomena takvi kakvi jesu. promijenili su način na koji izrađujemo web stranice.
Ovo se koristi kada trebate da web stranica izgleda isto na različitim uređajima (npr Mobilni uredaji- tablete, pametne telefone, prijenosna računala itd.) s različitim širinama zaslona. Danas stvaramo stranice koje se moraju moći prilagoditi vrsti uređaja, njegovoj orijentaciji i razlučivosti monitora.
Medijski upiti su nevjerojatno jednostavni za korištenje: sve što trebate učiniti je umotati svoje CSS stilove u blok pravila. @mediji. Svaki @mediji blok se aktivira kada je ispunjen jedan ili više uvjeta.
Glavni sadržaj članka ide ovdje
/ * Stil za glavni sadržaj i bočnu traku * / .spremnik (širina: 900px; margina: 0 auto; preljev: skriven;) .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;) .spremnik p (padding-top: 100px; text-align: center;) .napomena ( text-align: center; padding-top: 60px; font-style: italic;) / * Ovi jednostavni medijski upiti omogućuju prilagodbu blokova širini vašeg zaslona * / @media (max-width: 900px) (.container (width : 100 %;) .main-section, .sidebar (width: auto; margin-bottom: 20px; float: none;))
Medijski upiti mogu uključivati ​​provjere razlučivosti zaslona uređaja, orijentacije, dubine boje i još mnogo toga. O svemu tome možete pročitati i vidjeti tablicu kompatibilnosti.
10. Pozadine na različitim slojevima
Uz ovu značajku, dizajneri stvaraju nevjerojatno zanimljive efekte. Mogu sastaviti cijelu sliku iz njezinih različitih dijelova smještenih 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 (pomaknite pokazivač miša preko slike i pogledajte što će se dogoditi). Sva CSS pozadinska svojstva sada mogu prihvatiti popis svojstava odvojenih zarezima za svaki pojedinačni sloj:
Razmak (/ * Postavite popis 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: lebdeti (/ * 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 preglednici - svi moderni preglednici podržavaju ovo pravilo. .
Izgledi temeljeni na stupcima bili su veliki problem za one koji rade s CSS-om. Obično je u to uključen poslužitelj ili javascript kako bi se tekst podijelio na jednake dijelove / stupce. To je zadatak učinilo nevjerojatno teškim, a također je ubilo mnogo dragocjenog vremena programera. Konačno, sada je to lako učiniti s CSS pravilom. stupaca.
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.
Spremnik (širina: 500px; margina: 0 auto;) / * Upravo tako, kreirajte stupce * / .container p (-moz-columns: 3; -webkit-columns: 3; stupci: 3;)
Postoji dobra podrška za ovo pravilo, ali još uvijek zahtijeva prefikse. Ali postoje određene razlike i nijanse između preglednika 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 značajke za dizajnere i programere koji mogu osvojiti srca korisnika ako se pravilno koriste.
Pogledajte primjer koda u nastavku:
Spremnik (/ * Kako se trebaju izraziti 3D efekti * / perspektiva: 800px; -webkit-perspective: 800px; pozadina: radijalni gradijent (# e0e0e0, #aaa); širina: 480px; visina: 480px; margina: 0 auto; obrub -radijus: 6px; položaj: relativan;) .iphone-prednji, .iphone-straga (/ * 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 zakrene 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 - korištenje / sredstva / img / iphone.png) bez ponavljanja lijevo središte; / * Animacija prijelaza * / prijelaz: 0,8 s;) .iphone-back (/ * Stražnja strana je zakrenuta za 180 stupnjeva prema zadanim postavkama * / transformacija: rotateY (180 stupnjeva); - webkit-transform: rotateY (180deg); pozadinski položaj: desno središte; ) .kontejner: lebdjeti .iphone-front (/ * Kada se spremnik zalijepi iznad i lebdi se aktivira, zarotirajte prednji dio i sakrijte ga * / transform: rotateY (180 stupnjeva); -webkit-transform: rotateY (180 stupnjeva);) . kontejner : lebdjeti .iphone-back (/ * ... u isto vrijeme rotirati stražnji dio i učinite ga vidljivim * / transformirajte: rotateY (360 stupnjeva); -webkit-transform: rotateY (360deg); )
Ovaj kod je napravljen po uzoru na ovaj vodič, koji preporučujem da pogledate.
Ako želite saznati više o 3D CSS-u, pogledajte detaljan uvod. Ako ne ciljate starije IE preglednike, onda je i podrška preglednika za 3D CSS prilično dobra.
Ostale dobrote vrijedne spomena
Ako još uvijek koristite prefikse za granica-radijus i kutija-sjena, sada možete sigurno zaboraviti na to.
Također sada možete početi koristiti data-uri za pozadinske slike, za sve preglednike.
Vlasništvo neprozirnost sada dostupno i podržano posvuda, također će biti vrlo korisno poznavati nekretninu veličina pozadine.
Proći će neko vrijeme prije podrške za više preglednika za flexbox, @podržava, filtere i CSS maske, ali siguran sam da je vrijedno čekanja!
CSS brojači omogućuju vam da prilagodite izgled sadržaja na temelju njegove lokacije u dokumentu. Na primjer, možete koristiti brojače za automatsko numeriranje naslova na web stranici. Brojači su, u biti, varijable koje održava CSS, čije se vrijednosti mogu povećavati CSS pravilima kako bi se pratilo koliko puta se "ponovno koriste".
Korištenje brojača
Manipuliranje vrijednosti brojača
Da biste koristili CSS brojač, najprije se mora inicijalizirati na vrijednost sa svojstvom poništavanja brojača (0 prema zadanim postavkama). Isto svojstvo se također može koristiti za promjenu njegove vrijednosti u bilo koji određeni broj. Jednom inicijalizirana, vrijednost brojača može se povećati ili smanjiti s povećanjem brojača. Naziv brojača ne smije biti "none", "inherit" ili "inicial"; inače se deklaracija zanemaruje.
Prikaz brojača
Vrijednost brojača može se prikazati pomoću funkcije brojača () ili brojača () u svojstvu sadržaja.
Funkcija brojač () ima dva oblika: "brojac (ime)" ili "brojac (ime, stil)". Generirani tekst je vrijednost najdubljeg brojača zadanog imena u opsegu na danom pseudoelementu. Formatiran je u navedenom stilu (decimalno prema zadanim postavkama).
Funkcija brojači () također ima dva oblika: "brojači (naziv, niz)" ili "brojači (naziv, niz, stil)". Generirani tekst je vrijednost svih brojača s danim imenom u opsegu na danom pseudoelementu, od krajnjeg do najnutarnjeg, odvojenih navedenim nizom. Brojači se prikazuju u naznačenom stilu (decimalno prema zadanim postavkama).
Osnovni primjer
Ovaj primjer dodaje "Odjeljak:" na početak svakog naslova.
CSS
tijelo (poništavanje brojača: odjeljak; / * 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č (odjeljak); / * Prikaži vrijednost brojača odjeljka * /)
HTML
Uvod
Tijelo
Zaključak
Proizlaziti
Brojači za gniježđenje
CSS brojač može biti posebno koristan za izradu ocrtanih popisa, jer se nova instanca brojača automatski kreira u podređenim elementima. Korištenjem funkcije brojači () može se umetnuti razdvojeni tekst između različitih razina ugniježđenih brojača.
Primjer ugniježđenog brojača
CSS
ol (poništavanje brojača: odjeljak; / * Stvara novu instancu brojača odjeljka sa svakim elementom ol * / tip-stil popisa: nema;) 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 točkom * /)
HTML
1. artikal
2. artikal
   1. artikal
   2. artikal
   3. artikal
      1. artikal
      2. artikal
      1. artikal
      2. artikal
      3. artikal
   4. artikal
3. artikal
4. artikal
1. artikal
2. artikal