Praksa korištenja transformacije CSS pravila

Često je potrebno ponovno oživjeti elemente stranice, bez potrebe za napornim korištenjem jаvascript-a. Pravilo transformacije CSS-a prikladan je alat za kreiranje složene dinamike, što neće zahtijevati mnogo napora.

Sve osnovne radnje za promjenu elementa: položaj, dimenzije, rotacije, zakrivljenost i rotacija - dostupne su kada se primjenjuju na osnovne elemente HTML-a, a u kombinaciji međusobno omogućuju stvaranje složene dinamike.

Osnovne mogućnosti pravilne transformacije

Pravilo CSS transformacije osmišljeno je za jednostavne transformacije elemenata stranice i koristi se vrlo jednostavno:

• transformirati: ništa;
• transformacija: funkcija ();
• transformacija: funkcija () funkcija () funkcija ();

Sljedeći primjer navodi glavne funkcije koje možete koristiti za pretvaranje elemenata, prikazujući njihov učinak na primjere.

Jednostavne aplikacije transformacija povezane su s gumbima i elementima dijaloga s posjetiteljem. Praktična uporaba dinamičkih efekata u pratnji pokreta miša ili privlačenje pozornosti na dionice za usluge ili proizvode koje nudi vlasnik resursa.

Pretvorba je tražena u izborniku, kada posjetitelj još nije izabrao željeni tijek akcije, ali miš je već na elementu: stavka izbornika. U ovom slučaju, nešto se može pretvoriti: povećati veličinu, savijati se, okrenuti se ili na neki drugi način "izraditi jasno" da je stranica "aktivna" i spremna za izvršavanje akcije.

Prikladno je primijeniti transformaciju CSS pravila da biste stvorili savjete i komentare elementima stranice. Posjetitelj se uvijek ne usredotočuje na stranicu, pogotovo kada je došao po prvi put. Tradicionalno, svaki programer stranice vjeruje da je dizajn web resursa i dijaloga s posjetiteljem njegova sfera nadležnosti.

S gledišta posjetitelja, odlučuje o tome što funkcionalnost očekuje od mjesta na kojem je došao, kakav dizajn i dijalog treba biti. Ako nešto ne sviđa, naći će se ono što je na drugom web resursu.

Kombiniranje elemenata tijekom transformacije

Animacija transformacija CSS dopuštena je kroz nekoliko funkcija u jednom pravilu. Možete odrediti pozitivne i negativne vrijednosti transformacija, važno je imati smisla.

Primjer pokazuje kako se slika mijenja kada miš lebdi, ako pravilo transformacije uključuje istodobno:

• skaliranje;
• uviti
• pomak.

Trostruki učinak je lako planirati, ali često bez dugog izbora vrijednosti neophodan je. To je jedna stvar kada jedna vlada može točno odrediti potrebne promjene: one su poznate. Drugi je kada morate izmisliti dinamiku prema značenju elementa.

U nekim je slučajevima bolje kombinirati, na primjer: dvije dive su međusobno ugniježđene. Eksterni je dodijeljen pravilo transformacije, a unutarnji je drugi. Kada se odredi opća logika potrebnih promjena, možete je prenijeti na pravilo jednog elementa.

U primjeru, dobivena rješenja nalikuju transformaciji u trodimenzionalnom prostoru, ali to nije relevantno za pravila CSS 3D transformacije. Računovodstvo za Z-osi i manipulacija sa stražnjom stranom elemenata je zasebna skupina svojstava i pravila.

Međutim, bez obzira na grafičku ideju, sve transformacije su napravljene na ravnini, učinci se formiraju zbog vizualne percepcije i ispravne promjene oblika elemenata. Sadržaj elemenata i uzorak linija su važni.

Značajke CSS pravila

Općim pravilom CSS-a, stil transformacije je statična logika transformacije elemenata čiji se algoritam ne može mijenjati nakon što se formulira skup pravila.

To ne prelazi koncept stola kaskadnih stila, no u svakoj konkretnoj primjeni valja uzeti u obzir činjenicu da dinamika ovdje nema niti događaja, niti uvjeta, niti sposobnosti manipuliranja samim procesom.

Programer može formulirati samo željeno pravilo transformacije, a CSS će to točno izvršiti. Promjena onda, ili u procesu funkcioniranja web resursa neće biti ništa.

Štoviše, dimenzije bloka, njegov sadržaj, oblik i boju unutarnjih elemenata su od iznimne važnosti. Pomoću pravila transparentnosti (neprozirnost) možete dobiti složene slike i premostiti ih jedan na drugog - složene efekte.

Bitna okolnost je nekontroliranost svih transformacija. Sva pravila provode se specifičnim algoritmima koji prihvaćaju samo one vrijednosti koje su specificirane u parametrima transformacijskih funkcija. Ispravna kombinacija funkcija i njihovih vrijednosti određuju rezultirajući algoritam transformacije.

Treba uzeti u obzir da mijenjanje sadržaja elementa, posebice imovine zvučne slike može dovesti do "početka" - kršenje potrebne transformacijske logike zbog tehničkih značajki implementacije (preglednik, protokol, poslužitelj, ostalo). Ima smisla sakriti element prije promjene sadržaja: prikazati i nastaviti kada je proces nadogradnje već dovršen.

Uključivanje poslužitelja u transformaciju

Ako su programeri dovoljno daleko od potrebe za potpunim ažuriranjem stranice, a tehnologija kao što je AJAX postala je norma za prikazivanje i ažuriranje elemenata stranice, tada se prilično očekuje da se dinamika stilskog lista mijenja tijekom rada web resursa.

Tradicionalni pristup, kada su stranice oblikovane od strane razvojnog programera i stranica je puštena u rad kao što je, već je zastarjela. Zašto ne razviti cijeli skup datoteka web-mjesta, kao rezultat dinamike dijaloga s posjetiteljem: "u letu".

Korištenje jаvascript + AJAX je dinamika elementa, ali korištenje jezika poslužitelja za izmjenu CSS datoteke je razumna dodatna mogućnost. Posjetitelji se razlikuju ne samo u njihovu temperamentu, već iu funkcionalnosti koju očekuju i sposobnosti prikazivanja.

Nudeći potrebnu funkcionalnost u formatu prilagodljive dinamike (mijenjanje CSS pravila na letu), možete postići velik uspjeh i promijeniti kvalitetu web resursa na bolje.