Animacija sa CSS svojstvom “animation”

Written by

Svojstva

Pojedinačna svojstva:

css animacija

Animacija se zasniva na korišćenju sledećih svojstava:

  1. animation-name (obavezno)

    Ovo svojstvo definiše ime @keyframes pravila po kome će se izvoditi animacija.

    @keyframes:

    CSS svojstvo @keyframes kontroliše medju-korake u animacijskoj sekvenci definisanjem stilova u toku trajanja animacije. Koristeći @keyframes možemo da definišemo tajming za primenu odredjenih CSS svojstava tokom sekvence animacije, 0% označava prvi trenutak animacije, dok 100% pokazuje krajnje stanje animacije.

  2. animation-duration (obavezno)

    Trajanje jednog ciklusa animimacije. Inicjalna vrednost svojstva je 0s

  3. animation-timing-function (opciono)

    Definisanje funkcije koja odredjuje brzinu izvršavanja u toku vremena. Inicjalna vrednost svojstva je ease

    • linear – predefinisana tranzicija sa konstntnom brzinom
    • ease – predefinisana tranzicija koja ubrzava kroz sredinu pa usporava na kraju
    • ease-in – predefinisana tranzicija koja počinje sporo pa zatim ubrzava sve do kraja
    • ease-out – predefinisana tranzicija koja počinje velikom brzinom a zatim usporava do kraja
    • ease-in-out – predefinisana tranzicija koja počinje sporo, nakon čega ubrzava u sredini a zatim usporava do kraja
    • cubic-bezier(x1,y1,x2,y2) – programer sam definiše ponašanje funkcije. Pomoć za definisanje “cubic-bezier()” funkcije možete potražiti na sajtu cubic-bezier.com ili easings.net/

  4. animation-delay (opciono)

    Definiše vreme nakon kojeg će početi tranzicija od trenutka aktiviranja tranzicije. Inicjalna vrednost svojstva je 0s

  5. animation-direction (opciono)

    Definiše smer izvršavanja animacije u odnosu na zadate podatke. Nakon svokog ciklusa se resetuje i ponavlja. Inicjalna vrednost svojstva je normal.

    • “normal” od definisanog početka pa do kraja
    • “reverse” od definisanog kraja ka početku
    • “alternate” prvo normalno do kraja pa onda reverse do početka
    • “alternate-reverse” prvo unazad do početka pa zatim unapred do kraja

  6. animation-iteration-count (opciono)

    Broj ciklusa animacija. Inicjalna vrednost svojstva je 1. Pored odredjenog broja može biti i “infinite”

  7. animation-fill-mode (opciono)

    sets which values are applied before/after the animation. Inicjalna vrednost svojstva je none

    • none element je podešen na njegovo podrazumevano mesto pre početka animacije i vraća se u to podrazumevano mesto nakon što se animacija završi.
    • forwards element ostaje na mestu definasanom za kraj animacije.
    • backwards mesto elementa će se već primenjivati pre nego što se animacija zapravo pokrene.
    • both animacija će prihvati i forwards i backwards
Primer

See the Pen erqObZ by Web programiranje (@chos) on CodePen.

Skraćena sintaksa

Prethodno pomenuta svojstva se najčešće se koriste u okviru jednog zajedničkog svojstva pod nazivom “animation”.

See the Pen Animation skraćena sintaksa by Web programiranje (@chos) on CodePen.

Višestruke animacije

Na jednom elementu možemo da definišemo više različitih animacija, dovoljno je da ih razdvojim zarezom.

Primer

See the Pen Visestruke animacije by Web programiranje (@chos) on CodePen.

Tips and Tricks

Ponovno pokretanje animacije

CSS svojstvo “animation” ne nudi način za ponovno pokretanje završene animacije, stoga je potrebno aktivirati JavaScript 🙂
Jedini način ponovnog reprodukovanja animacije je uklanjanje efekta animacije (nakon čega će dokument preračunati stil elementa), a zatim ponovno dodavanje efekata animacije na element.

Primer

See the Pen Ponovno pokretanje animacije by Web programiranje (@chos) on CodePen.

Ponovno pokretanje animacije se zasniva na sledećem postupku:

  1. Potrebno je prvo resetovati animaciju, što ima efekat uklanjanja svih klasa koja se trenutno primjenjuju na elementu, uključujući one koje se bave animacijom. Međutim, promene u “class list” se ne primenjuju sve dok se ne izvšri re-kalkulacija stilova.
  2. Za re-kalkulaciju stilova, koristimo metodu window.requestAnimationFrame(), kojoj definišemo callback funkciju. Callback funkcja se izvršava neposredno pre sledećeg “iscrtavanja” dokumenta.

    Medjutim problem je što se pre “iscrtavanje dokumenta re-kalkulacija stilova nije ni dogodila!
  3. Stoga je potrebno da callback funkcija ponovo poziva metodu requestAnimationFrame(), jer će se u ovom slučaju callback funkcija pokrenuti pre ponovnog iscrtavanja a posle re-kalkulacije stilova.

    Dodavanje nove klase elementu kroz callback funkciju će da pokrene ponovno iscrtavanje i samim tim pokrene animaciju.

Zaustavljanje animacije na kraju sekvence

Uklanjanje svojstva “animation-name” bi naglo prekinulo animaciju, medjutim ukoliko želimo da zaustavimo animaciju tek nakon što se cela sekcenaca animacije izvrši, potrebno je koristiti JavaScript. Sa JavaScript-om ćemo ukinuti animaciju ako definišemo animation-name: none; ali tek kada se “okine” događaj “animationiteration”. Ovaj dogadjaj se okida kada se završi iteracija animacije. Treba naglasiti da se dogadjaj ne “okida” ako animacija ima definisano svojstvo “animation-iteration-count” na vrednost jedan tj. animation-iteration-count:1;

NAPOMENA:
Pri korišćenju pomenutog mehanizma nije dozvoljeno korišćenje svojstva animation-direction: alternate

Primer

See the Pen Prekid animacije by Web programiranje (@chos) on CodePen.

Animacija sa CSS svojstvom “transition”

Written by

Svojstva

CSS Transitions (srp. tranzicija) je najjednostavniji način animacije sa CSS-om. Tranzicija se koristi da ublaži naglu promenu vrednosti izabranog CSS svojstva u određenom vremenskom periodu, tako što postepeno menja vrednosti CSS svojstva. Ovaj mehanizam pokrivaju četri svojstva:

css tranzicija

  1. transition-property (obavezno)

    Definiše na kome CSS svojstvu će biti izvršena tranzicija. Spisak svih svojstava na kojima može da se izvrši tranzicija možete pogledati na “www.w3.org”

  2. transition-duration (obavezno)

    Definiše trajanje tranzicije

  3. transition-timing-function (opciono)

    Definiše funkciju koja će biti zadužena za brzinu tranzicije u vremenu.

    • linear – predefinisana tranzicija sa konstntnom brzinom
    • ease – predefinisana tranzicija koja ubrzava kroz sredinu pa usporava na kraju
    • ease-in – predefinisana tranzicija koja počinje sporo pa zatim ubrzava sve do kraja
    • ease-out – predefinisana tranzicija koja počinje velikom brzinom a zatim usporava do kraja
    • ease-in-out – predefinisana tranzicija koja počinje sporo, nakon čega ubrzava u sredini a zatim usporava do kraja
    • cubic-bezier(x1,y1,x2,y2) – programer sam definiše ponašanje funkcije. Pomoć za definisanje “cubic-bezier()” funkcije možete potražiti na sajtu cubic-bezier.com ili easings.net/
  4. transition-delay (opciono)

    Definiše vreme nakon kojeg će početi tranzicija od trenutka aktiviranja tranzicije

Primer

Skraćena sintaksa “transiton”

Medjutim najčešće se koristi svojstvo pod nazivom samo “transition” koje je obuhvata sva četri prethodno pomenuta svojstva:

Pokretanje tranzicije

“Okidanje” dogadjaja koji aktivira promenu svojstva, a samim tim i tranziciju ako je definisana u svojstvu može biti izvršeno:

  • pseudo klasama
    • :hover – kada mišem predjemo preko elementa
    • :focus – kada je element u fokusu
    • :active – kada je link element aktivan tj. kliknut
  • menjanjem svojstva ili dodavanje klase koja sadrži promenu svojstva sa JavaScriptom

Primeri

Primer – osnovna tranzicija

U ovome primeru se nad desnim elementom izvršava tranzicija usled hover-a jer se tada menja vrednost svojstava “width” i “heigh”.

See the Pen QrXoEj by Web programiranje (@chos) on CodePen.

Primer – transition-timing-function

See the Pen KRjBwV by Web programiranje (@chos) on CodePen.

Primer – transition-delay

See the Pen delay transition by Web programiranje (@chos) on CodePen.

Primer

See the Pen Transitional Button by Web programiranje (@chos) on CodePen.

Uvod u animaciju sa CSS-om

Written by

Kako se izvodi animacija sa CSS-om

animacija sa css-om

Animacija pokretana iz CSS je nastala kao potreba front-end programera da imaju mogućnost definisanja ove interakcije bez upotrebe JavaScript-a ili eventualno zastarelog Flash-a. Dva glavna svojstva omogućavaju animaciju iz CSS-a:

  • transition
  • animation

Svojstvo “transitions” (srp. tranzicija) je najjednostavniji način animacije sa CSS-om. Tranzicija se koristi da ublaži naglu promenu vrednosti izabranog CSS svojstva u određenom vremenskom periodu, tako što postepeno menja vrednosti CSS svojstva.
Svojstvo “animation” se takodje zasniva na promeni svojstva nekog elementa u toku vremena ali dozvoljava malo bolju kontrolu i ima dodatne druge specifičnosti.

Koja svojstva animirati?

Ne mogu sva CSS svojstava biti animirana, ali većina ipak može, spisak svih svojstva koja mogu biti animirana možete pogledati ovde. Pošto animiranje zna da bude zahtevan proces kada su u pitanju resursi, potrebno je obratiti dodatnu pažnu na zahtevnost animacije. CSS animacije nisu automatski ubrzane sa GPU, međutim, neki browseri obezbeđuju hardversko ubrzanje određenih osobina kako bi pružile bolje performanse pri renderingu. Hardversko ubrzanje (eng. Hardware acceleration) znači da će ” Graphics Processing Unit” (GPU) pomoći u renderovanju stranice tako što će obavljati neke od težih zadataka, umesto “Central Processing Unit-a” (CPU-a). Stoga ako su resursi ograničeni trebali bi izbegavati svojstva koja ne podržavaju hardware acceleration. Danas su svojstva “transform” i “opacity” u prednosti kada je u pitanju animacija, jer im GPU pomaže pri izršavanju, pa ih treba koristi kad god je to moguće:

  • opacity
  • transform: translate()
  • transform: rotate()
  • transform: scale()

Za razliku od pomenutih svojstva, u “skupa” svojstva pripadaju sva koja menjaju geometriju stranice (layout), jer ako menjate jedan element, često je potrebno da browser ponovo preračuna geometriju svih drugih elemenata. Takodje menjanje boje pripada grupi “skupih” operacija.

NAPOMENA:
U želji da se poboljša iskorišćavanje resursa i optimizujeu animacija je uvedeno novo CSS svojstvo “will-change”. Svojstvo “will-change”, nam omogućava da unapred obavestimo browser o tome koje vrste promena ćemo verovatno napraviti, tako da se browser može na vreme pripremiti i aktivirati odgovarajuće optimizacije pre nego što dodje do same animacije. Više o ovome svojstvu pročitajte na MDN-u u članku “will-change”.

Razlike izmedju “transition” i “animation”

@keyframes

U svojstvu “transition” se animacija izvršava samo na osnovu početnih i krajnjih vrednosti nekog CSS svojstva, dok kod svojstva “animation” imamo mogućnost da kroz @keyframe definišemo neograničen broj medjuvrednosti.

Pokretanje animacije

Druga bitna razlika između svojstva “animation” i “transitions” može se videti u načinu na koji se započinje animacija. Svojstvo “transition” izvodi animaciju samo kao reakciju na promenu CSS svojstva koje se prati (npr. kada sa hover-om na element promenimo vrednost nekog svojstva). Dok animacije sa svojstvom “animation” ne zahtevaju eksplicitno aktiviranje (iako je naravno i takav način moguć), te one mogu automatski započeti reprodukciju odmah po učitavanju.

Looping

Svojstvo “transition” može da se pokrene samo jednom (za iste vrednosti), dok s druge strane svojstvo “animation” može da definiše koliko puta želimo da se izvrši ista animacija (ukjučujući i infinite).

Odloženo pokretanje

Svojstvo “animation” za razliku od “transition” može da odloži pokretanje animacije.

Interakcija sa JavaScript-om

Kada želimo tzv. hibridni pristup u kojem se animacija primarno definiše u CSS-u, ali se iz JavaScirpt-a manipuliše određenim aspektima animacije, tada je uvek bolje koristiti svojstvo “transition”. Korišćenje svojstva “animation sa JavaScriptom je takodje moguće, ali je iz JavaScript-a komplikovano modifikovanje @keyframes svojstva.

Zaključak:

Moj pristup izboru svojstva se svodi na sledeće dileme:

  • Ako je animacija jednostavna i bez “lupovanja”, onda koristim svojstvo “transitions”.
  • Ako je animacija komplikovana ili ima “lupovanje”, onda koristim svojstvo “animations”.
  • Ako želim da manipulišem vrednostima svojstava koristeći JavaScript, onda koristim svojstvo “transition”.

BONUS: svojstvo “transform”

Transform svojstvo ne vrši nikakvu animaciju, ali se često koristi uz prethodno pomenuta CSS svojstva koja su zadužena za animaciju (transition/animation). U stvari animacije ili tranzicije nakon promene vrednosti “transform” svojstva mogu biti veoma interesante i upečatljive.

Svojstvo “transform” u zavisnosti od njegove vrednosti nam omogućava da HTML element:

  • transliramo duž osa

  • rotiramo

  • skaliramo po veličini

  • iskosimo

  • dodamo perspektiu

    Transform svojstvo sa ovako definisanom vrednosti (“perspective”) ne utiče na sam element, ali utiče na 3D transformacije potomaka, tako da im omogućava perspektivu dubine.

NAPOMENA:
Dozvoljeno je kombinovanje više vrednosti u sklopu jednog transform svojstva npr.

Za kombinaciju više svojstava u jedno zajedničko možemo da koristimo i svojstvo “matrix”. Ovo svojstvo ne piše programer već se generiše dodatnim aplikacijama. Pogledajte online sajt za generisanje matrix vrednosti “https://meyerweb.com/eric/tools/matrix, u kome aplikacija prihvata kao korisnički unos kombinaciju “običnih” pojedinačnih svojstava, a vraća vrednosti matriks svojstva.

Primer

prelazi u:

Primer

See the Pen Css3 Transform by Web programiranje (@chos) on CodePen.


Stilizovanje i pozicioniranje teksta u kontejneru sa CSS-om

Written by

Svojstvo “overflow”

css logo

Svojstvo overflow se koristi za definisanje ponašanja sadržaja koji je veći od samog kontejnera u kome se nalazi. Ovo svojstvo nije rezervisano samo za stilizovanje teksta nego za sve vrste sadržaja, mada se za tekst često koristi. Mogući su sledeći slučajevi:

  • “visible” – sadržaj je vidljiv čak i preko granica kontejnera (podrazumevano ponašanje)
  • “hidden” – višak sadržaja preko ivica kontejera je sakriven
  • “scroll” – sadržaj je vidljiv u okviru kontejnera, oba scroll bar-a su aktivna a višak sadržaja je dostupan skorlovanjem
  • “auto” – sadržaj je vidljiv u okviru kontejnera, browser odlučuje koji scroll bar je aktivn a višak sadržaja je dostupan skorlovanjem
Primer

See the Pen Overflov by Web programiranje (@chos) on CodePen.

NAPOMENA:
Kada se koristi podrazumevano svojstvo “visible” tekst van kontejnera neće gurati drugi sadržaj, nego će pozicionirati preko njega.

Svojstvo “white-space”

Svojstvo “white-space” se koristi da definiše kako će biti prikazana dodatna prazna mesta i dodatni prazni redovi kao i ponašanje teksta kada dodje do ivice ograničenog kontejnera. Svojstvo može imati sledeće vredosti:

Vrednost “normal”

Kada je dodeljena ova vrednost svojstvu tekst će se standardno prelomiti u naredni red, kada dodje do ivice kontejnera. Neće se prikazivati prazne linije iz koda i dodatna prazna mesta tzv. beline.

Vrednost “nowrap”

Kada je dodeljena ova vrednost svojstvu tekst se neće prelomiti kada dodje do ivice kontejnera, već će ostati u istom redu.

Vrednost “pre”

Kada je dodeljena ova vrednost svojstvu tekst će ostati isti kao što je napisan u kodu, sve zajedno sa praznim mestima. Ukoliko je tekst koji je napisan u kodu duži od kontejnera on se neće prelomiti kada dodje do ivice kontejnera, već će ostati u istom redu, a biće prelomljen samo tamo gde je prelomljen u kodu.

Vrednost “pre-wrap”

Kada je dodeljena ova vrednost svojstvu tekst će ostati isti kao što je napisan u kodu, sve zajedno sa praznim mestima, ali ukoliko je tekst koji je napisan u kodu duži od kontejnera on će se prelomiti kada dodje do ivice kontejnera.

Vrednost “pre-line”

Ovo svojstvo prelama tekst koji je duži od kontejnera, ukida višak praznih mesta (eng. white space), ali zadržava prazne cele linije iz koda, kao i mesta u kodu gde je u kodu prelomljen tekst.

Primer

See the Pen white-space by Web programiranje (@chos) on CodePen.


Svojstvo “text-overflow”

Svojstvo “text-overflow” reguliše ponašanje teksta kada je odsečen jer nije mogao da “stane” u kontejner. Iz ovoga se zaključjuje da se ovo svojstvo primenjuje tek kada je aktivno svojstvo overflow: hidden;

Treba napomenuti da ovo svojstvo važi samo za tekst u jednom redu, stoga je potrebno sprečiti da se tekst iz jednog reda prelomi. Da bi ovo CSS svojstvo bilo aktivno, neophodno je da koristimo i svojstvo white-space: nowrap;

Svojstvo “text-overflow” može da ima sledeće vrednosti: clip ili ellipsis. Vrednost “clip” je podrazumevano “obično” ponašanje kada se tekst preseče tačno na ivici kontejnera. Svojstvo “text-overflow” je interesantno tek kada ima vrednost “ellipsis” jer tada se na kraju gde je presečen tekst pojavljuju tri tačke.

See the Pen Text ellipsis by Web programiranje (@chos) on CodePen.

Prikazivanje skraćene verzije višerednog teksta

Pošto svojstvo “text-overflow” važi samo za jedan red teksta sa njim nećemo moći da uradimo posao, nažalost ne postoji svojstvo koje bi moglo da izvši zadani zadatak a da je podržano u svim browser-ima. Postoje rešenja i za ovaj problem ali su različita za svaki browser ponaosob, pa je neophodno koristiti sva rešenja odjednom da bi pokrili sve browser-e.

a) -webkit-line-clamp

Svojstovo -webkit-line-clamp podržava samo Chrome i Safari. Vrednost ovoga svojstva definiše broj redova koji treba da se prikaže. Neophodno je da se koristi još uz dva dodatna svojstva: display: -webkit-box; i -webkit-box-orient: vertical;.

b) Fade Out Way

Za ovaj mehanizam je potrebno da znamo tačnu visinu jednog reda. Mehanizam se zasniva na tome da delimično prekrijemo poslednju liniju pseudo-elementom, koju ima definisan gradijent sa providnim bojom.

Primer

See the Pen Skraćenje višerednog teksta by Web programiranje (@chos) on CodePen.

Kod za primenu:

See the Pen Skracene višerednog teksta (za sve browsere zajedno) by Web programiranje (@chos) on CodePen.


“overflow-wrap” & “word-break”

Standardno, prelom teksta se javlja samo u određenim prostorima (kada postoji razmak ili crtica), medjutim nekada je potrebno da se prelomi i kada ne postoji razmak ili crtica. Svojstva “overflow-wrap” i “word-break” se minimalno razlikuju i mogu da prelomme tekst kada prevelika reč ne može da stane u kontejner. Najčešća primena svojstva je za prelom dugačkih url adresa. Treba naglasiti da svojstvo “overflow-wrap” ima alias svojstvo pod imenom “word-wrap”.

See the Pen Word-wrap by Web programiranje (@chos) on CodePen.

Razlika izmedju “overflow-wrap” i “word-break” je:

Osnovna razlika je u tome što kada “overflow-wrap” naleti na dugačku reč prvo pokuša da reši problem prebacivanjem cele reči u sledeći red, pa tek ako ne uspe tako da reši problem onda je “lomi”.

See the Pen JravQX by Web programiranje (@chos) on CodePen.

Svojstvo “hyphens”

Svojstvo “hyphens” može da prelomi reč gde god mi želimo. Kada je definisana vrednost svojstva hyphens: manual;, onda se reč prelama gde god stavimo ključnu reč: ­. Takodje na definisanom mestu preloma dodaje “povlaku”.

See the Pen Hypthen by Web programiranje (@chos) on CodePen.


Svojstvo “text-align”

Ovo svojstvo se koristi za pozicioniranje sadržaja block elementa. Moguće vrednosti ovoga svojstva su:

  • left – Podrazumevana vrednost pozicionira sadržaj uz levu ivicu.
  • right – Pozicionira sadržaj bloka uz desno ivicu.
  • center – Centrira sadržaj.
  • justify – Širi i rasporedjuje sadržaj od ivice do ivice.
  • inherit – Nasledjuje od roditeljskog elementa pozicioniranje.

Raspored teksta u više kolona

column-count

Osobina “column-count” pravi zahtevani broj kolona, medjutim ova osobina nije responsiv jer i kod malih ekrana prikazuje isti zahtevani broj kolona.

column-width

Osobina “column-width” prikazuje kolone definisane širine ali i ova osobina nije responsiv jer na velikim rezolucijama širina kolona ostaje ista.

columns

Osobina “columns” koja kroz dva argumenta objedinjuje obe prethodne osobine. Prvi argument definiše najmanju širinu kolone, dok drugi argument definiše maksimalni broj kolona.

columns-gap

Ovo svojstvo definiše rastojanje izmedju kolona. Ukoliko ima vrednost “normal” onda je rastojanje izmedju kolona 1em. Takodje postoji mogućnost da se ovome svojstvu dodeli bilo koja durga vrednost.

Primer

See the Pen Columns1 by Web programiranje (@chos) on CodePen.

Napomena:
Obavezno je korišćenje prefiksa zbog neusaglašenosti browsera.

Pozicioniranja sadržaja sa CSS-om (osnove)

Written by

Uvod

Pozicioniranje sadržaja sa CSS-om je moguće uraditi na više načina, koje će svojstvo biti korišćeno zavisi od specifičnosti layout-a, i od zahteva za podržanost sintakse u browser-ima. Osnovna tehnika za pozicioniranje sadržaja je svojstvo position. Ukoliko je vrednost svojstva: relative, absolute ili fixed, dostupna su i dodatna svojstva: top, right, bottom, left.
Kao jedno od rešenja za pozicioniranje sadržaja se može koristiti osobina float, ali je trend je da se ova osobina što manje koristi (tj. da se koristi samo za “obavijanje teksta oko bloka”).
Tehnika koja je preporučena i podržana od većine novijih browsera, podrazumeva korišćenje CSS svojstva “display:flex”. Smatra se da svojstvo “display:grid” ima odličan potencijal, ali će morati da se sačeka korišćenje u praksi dok je ne usvoje svi browser-i.

Continue reading…

Box model

Written by

Pojam i definicija

box model

Svi HTML elementi su kutije (eng. box), uključujući i span tag. Kutija kao pojam u front-end-u se razlikuje od pojama kutije iz života.
Dimezija kutije po W3C se dobija sabiranjem
dimenzija sledećih elemenata:

  • sadržaj box-a (ima svoju visinu i širinu)
  • padding
  • border

Margina ne ulazi u veličinu box-a, ona razdvaja boxove. Ukoliko se explicitno ne definiše širina box-a, onda box zauzima 100% roditeljskog elementa.

Za igranje sa box modelom i dobijanje krajnje veličine možete posetiti stranicu.

Continue reading…

CSS selektori

Written by

Tipovi selektora

CSS selektori su deo CSS synatax-e, koji odredjuju HTML elemente na koje će se primeniti CSS pravila.

Univerzalni selektor

Univerzalni selektor se obeležava * (zvezdom), i njegova osobina je da selektuje sve elemente. Ovaj selektor se obično koristi kada se radi resetovanje stilova.

Primer

Definisani sa tipom HTML elementa

Ovo su najjednostavniji selektori i definišu se nazivom HTML elementa koji targetiraju.

Primer

ili

Definisani sa klasom elementa

Ovi selektori “gadjaju” HTML elemente koji sadrže odredjenu klasu.

Primer

Selektor koji targetira klasu se obeležava sa . (tačkom) ispred imena klase.

Definisani sa ID-om elementa

Ovi selektori “gadjaju” HTML elemente koji sadrže odredjeni ID. Obeležavaju se # znakom ispred naziva ID.

Primer

Selektor koji targetira element sa odredjenim ID-om se obeležava sa znakom # ispred ID-a.


Continue reading…