Praksa uporabe pravila CSS preoblikovanja
Pogosto je treba obnoviti elemente strani, ne da bi pri tem uporabljali težko uporabo jаvascripta. Pravilo transformiranja CSS je priročno orodje za ustvarjanje zapletene dinamike, ki ne bo zahtevalo veliko napora.
Vsebina
Vse od pomembnih korakov za spremembo elementa: položaj, velikost, vrtenje, ukrivljenost in vrtenje - so na voljo v aplikaciji na osnove HTML-kodiranje, in v kombinaciji s seboj, da je možno ustvariti kompleksne dinamike.
Osnovne možnosti pravila preoblikovanja
Pravilo za preoblikovanje CSS je namenjeno preprostim preoblikovanjem elementov strani in se uporablja zelo preprosto:
- preoblikovati: nič;
- transform: funkcija ();
- transform: funkcija () funkcija () funkcija ();
Naslednji primer navaja glavne funkcije, ki jih lahko uporabite za pretvorbo elementov, ki prikazujejo njihov učinek na primere.
Preproste aplikacije transformacij so povezane z gumbi in elementi dialoga z obiskovalcem. Praktična uporaba dinamičnih učinkov, ki spremljajo premike miške ali pritegnejo pozornost na delnice za storitve ali blago, ki ga ponuja lastnik vira.
Transformacija je v meniju v povpraševanju, ko obiskovalec še ni izbral želenega poteka dejanja, vendar je miška že na elementu: element menija. V tem primeru je mogoče nekaj spremeniti: povečati velikost, ovijati se, obrniti ali drugače "jasno", da je stran "aktivna" in pripravljena za izvedbo ukrepa.
Ustrezno je uporabiti preoblikovano pravilo CSS za ustvarjanje namigov in komentarjev na elemente strani. Obiskovalec se vedno ne osredotoča na stran, še posebej, ko je prišel prvič. Tradicionalno, vsak razvijalec spletne strani meni, da je zasnova spletnega vira in dialog z obiskovalcem njegova pristojnost.
Z vidika obiskovalca je odvisno od njega, da odloči, kakšno funkcijo pričakuje od mesta, na katerem je prišel, kakšno obliko in dialog bi moral biti. Če mu nekaj ne bo všeč, se bo našlo, kaj je na drugem spletnem viru.
Kombiniranje elementov med preoblikovanjem
Animirani transformacijski CSS je dovoljen z več funkcijami v enem pravilu. Določite lahko pozitivne in negativne vrednosti transformacij, pomembno je, da imajo smisel.
Primer prikazuje, kako se slika spremeni, ko miško premaknete, če pravilo preoblikovanja vključuje hkrati:
- skaliranje;
- twist
- premik.
Trojni učinek je enostaven za načrtovanje, vendar je pogosto brez dolgega izbora vrednosti nepogrešljiv. To je ena stvar, ko lahko eno pravilo natančno določi potrebne spremembe: znane so. Drugič je, če morate izumiti dinamiko glede na pomen elementa.
V nekaterih primerih je bolje kombinirati, na primer: dve divji sta vgrajeni drug v drugega. Zunanji je dodeljen pravilo za preoblikovanje, notranji pa je drugi. Ko je določena splošna logika potrebnih sprememb, jo lahko prenesete na pravilo enega elementa.
V primeru primerna rešitev je podobna transformaciji v tridimenzionalnem prostoru, vendar to ni pomembno za pravila CSS 3D preoblikovanja. Obračun Z osi in manipulacija s hrbtno stranjo elementa je ločena skupina lastnosti in pravil.
Vendar pa se ne glede na grafično idejo vse transformacije izvajajo na ravnini, učinki nastanejo zaradi vizualne percepcije in pravilne spremembe oblike elementov. Vsebina elementov in vzorec vrstic sta pomembna.
Značilnosti CSS pravil
Po splošnem pravilu CSS je slog transformacije statična logika preoblikovanja elementov, katerih algoritem ni mogoče spremeniti, ko je formuliran sklop pravil.
To ne presega koncepta kaskadnih slogovnih miz, vendar je pri vsaki konkretni uporabi treba upoštevati dejstvo, da tukaj tukaj ni dinamika niti dogodkov niti pogojev, niti sposobnost manipuliranja s samim procesom.
Razvijalec lahko oblikuje le želeno pravilo o transformaciji, CSS pa ga bo natančno izvedel. Sprememba takrat ali v procesu delovanja spletnega vira ne bo nič.
Poleg tega so velikosti bloka, njegove vsebine, oblike in barve notranjih elementov zelo pomembne. Uporaba pravil transparentnosti (motnost), lahko dobite kompleksne slike in jih prekrivate drug na drugega - kompleksne učinke.
Bistvena okoliščina je nekontroliranost vseh transformacij. Vsa pravila se izvajajo s posebnimi algoritmi, ki sprejemajo samo tiste vrednosti, ki so določene v parametrih funkcij transformacije. Pravilna kombinacija funkcij in njihovih vrednosti določa algoritem, ki je posledica transformacije.
Upoštevajte, da spreminja vsebino elementa, zlasti lastnosti ozadja podobe, lahko privede do "stresanja pri" - kršitev pravo logiko preoblikovanja zaradi tehničnih značilnosti izvajanja (brskalnika, protokola, strežnik, drugače). Pred spreminjanjem vsebine je smiselno skriti element: prikaži in nadaljujte, ko je postopek nadgradnje že končan.
Vpletenost strežnika v transformacijo
Če je potrebno za popolno prenove strani, so se razvijalci šli dlje časa in vrsta AJAX tehnologije je postala norma za prikaz in posodobitev elemente strani, potem se pričakuje, dinamiko sprememb slogov v procesu spletnega vira.
Tradicionalni pristop, ko so strani oblikovali strani razvijalca in spletno mesto, je bil že v uporabi, kot je, je že zastarela. Zakaj ne bi razvili celotnega niza datotek na spletnem mestu, kot rezultat dinamike dialoga z obiskovalcem: "na leti".
Uporaba jаvascript + AJAX je dinamika elementa, vendar je z uporabo jezika strežnika za spreminjanje datoteke CSS razumna dodatna možnost. Obiskovalci se razlikujejo ne le v svojem temperamentu, temveč tudi v funkcionalnosti, ki jo pričakujejo, in sposobnosti prikaza.
Ponujajo potrebne funkcionalnosti v obliki prilagodljive dinamike (spreminjanje CSS pravil na leti), lahko dosežete velik uspeh in spremenite oceno spletnega vira na bolje.
- Kaj je potrebno in kako je napisan jQuery selektor?
- jаvascript: primere uporabe
- jаvascript Array za shranjevanje neomejenega števila spremenljivk
- Kaj naredi funkcija SQL CONCAT?
- Matematika iz jаvascript matematike
- Uporaba pravila za jasno CSS: preprosta in priročna
- Funkcija SQL SUBSTRING
- Funkcija upravljanja s časom jаvascript setInterval ()
- Uporaba indeksa (jаvascript) pri delu z nizi in nizi
- Uporaba elementov DOM prek jаvascript getElementById
- Uporaba funkcije jаvascript setTimeout ()
- Uporaba metode za nadomestitev ()
- Dinamični CSS: preoblikovanje predmetov
- Node.js za začetnike: opis, priročnik, funkcije
- Primer jQuery. Preprosti primeri skript na jQuery
- PHP sprintf: oblikovanje in obdelava nizov
- Objekti in nizi PHP: array push & pop
- Funkcija vrtenja v CSS: dvodimenzionalna rotacija elementa
- Sintaksa jаvascript parseInt: primeri uporabe
- Primeri uporabe metode dolžine jаvascripta
- Kako pretvoriti niz v številko v jаvascriptu