Vrlo jednostavan način rotiranja elemenata stranice web stranice - samo primijenite nekoliko CSS stilova. Upoznavanje s ovom lekcijom omogućit će vam da na stranicu postavite rasklopljeni ventilator za kartice, razbacano opalo lišće ili elegantne fotografije u album. Lekcija sadrži primjer implementacije foto-albuma i uzima u obzir rješenje za sve moderne preglednike.
Neophodno je
Četiri fotografije širine do 450px
Instrukcije
Korak 1
Ovaj primjer usredotočit će se na stvaranje stilske stranice albuma s rotiranim fotografijama.
Unaprijed sam pripremio slike (širine 400px) sa adresama:
U budućnosti ćemo slikama dodijeliti ID-ove prema njihovim imenima.
Korak 2
Prvo ćemo pripremiti blok za naš foto album pomoću oznake div, a takođe ćemo mu dodati fotografije pomoću oznake img (svaka slika mora biti zatvorena u svoju oznaku div), poput ove:
Imajte na umu da smo bloku dodijelili identifikator -. Pomoću identifikatora možemo uputiti blok pomoću css-a.
Korak 3
Dalje, trebate postaviti css stilove na blok. Popis stilova: "pozicija: relativno;" - postaviće ishodište iz gornjeg lijevog ugla našeg bloka; "marža: 50px automatski;" - postavit će uvlačenje našeg bloka "50px" iznad i ispod ostatka sadržaja stranice, kao i postaviti automatsko uvlačenje udesno i ulijevo, poravnavajući tako naš blok u sredini; "širina: 900px; visina: 650px;" - postavit će širinu na 900px, a visinu na 650px.
Navedena lista stilova mora se postaviti na ovaj način:
#photo_page {
položaj: relativan;
marža: 0 auto;
širina: 900px;
visina: 650px;
poravnanje teksta: sredina;
}
Obratite pažnju na upotrebu "#photo_page" - ovako se odnosi na ID bloka.
Korak 4
Sada ćemo dodijeliti opće stilove za svaku sliku unutar bloka photo_page. To su zaobljeni uglovi, sivi obrub, bijela pozadina, podloge i sjena.
Ovo će stvoriti fotografski efekt:
#photo_page img {
radijus granice: 7px;
obrub: 1px jednobojno siva;
pozadina: #ffffff;
popunjavanje: 10px;
box-shadow: 2px 2px 10px # 697898;
}
Obratite pažnju na upotrebu "#photo_page img" - ovo će se odnositi na sve slike unutar bloka photo_page
Korak 5
Također je važno dodati kratki stil poput ovog:
#photo_page div {
plutajuće: lijevo;
}
Smanjuje sve blokove unutar bloka photo_page ulijevo.
Korak 6
Međufaza lekcije je sada završena. Ako je vaš rad sličan slici na snimku zaslona, niste pogriješili i možete prijeći na sljedeći korak.
Korak 7
Sada ćemo okrenuti postavljene fotografije. Za ovo nam je potreban stil transformiranja. Trenutno se u čistom obliku ne koristi, već samo sa prefiksom za svaki pretraživač na početku, ovako:
-webkit-transform: rotirati (vrijednost);
-moz-transformiraj: rotiraj (vrijednost);
-o-transformiraj: rotiraj (vrijednost);
Ovo je stil rotacije za preglednike: Google Chrome, Mazilla, Opera (respektivno). Umjesto riječi "vrijednost", na kraj ćemo umetnuti broj s stupcem, ovako:
90 ° - rotirajte za 90 stepeni u smjeru kazaljke na satu.
-5deg - rotirati -5 stepeni u smjeru suprotnom od kazaljke na satu.
Itd.
Korak 8
Stil za fotografiju photo_1:
# photo_1 {
-webkit-transformiraj: rotiraj (5deg);
-moz-transformacija: rotirati (5deg);
-o-transformirati: rotirati (5deg);
}
Prva slika rotirana je za 5 stepeni.
Korak 9
Stil za foto photo_2:
# photo_2 {
-webkit-transformiraj: rotiraj (-3deg);
-moz-transformacija: rotirati (-3deg);
-o-transformirati: rotirati (-3deg);
}
Druga slika rotirana je za -3 stepena.
Korak 10
Stil za foto photo_3:
# photo_3 {
-webkit-transformiraj: rotiraj (-2deg);
-moz-transformacija: rotirati (-2deg);
-o-transformirati: rotirati (-2deg);
}
Treća slika je rotirana za -2 stepena.
Korak 11
Stil za fotografiju photo_4:
# photo_4 {
-webkit-transformiraj: rotiraj (8deg);
-moz-transformacija: rotirati (8deg);
-o-transformirati: rotirati (8deg);
}
Četvrta slika rotirana je za 8 stepeni.
Korak 12
Pogledajmo kako možete ispraviti položaj slika. Na primjer, želite pomaknuti prvu sliku za 20px s vrha i 10px s lijeve strane. U ovom slučaju morate koristiti stil margine. Evo ispravnog načina za upotrebu u našem slučaju:
# photo_1 {
marža: 20px -10px -20px 10px;
-webkit-transformiraj: rotiraj (5deg);
-moz-transformacija: rotirati (5deg);
-o-transformirati: rotirati (5deg);
}
Imajte na umu da je prva vrijednost stila gornja margina; druga je alineja desno; treća je uvlaka odozdo; četvrta - lijeva alineja.
Važno: u našem slučaju, donja margina jednaka je negativnoj vrijednosti gornje margine. Ako ispod slike na svojoj stranici vidite razmak, pokušajte uvući dno slike još negativnije.
Korak 13
Posao je završen, dajem snimak zaslona (uzimajući u obzir promjenu uvlačenja prve slike opisane u koraku 12).
Dodajte stil uvlačenja bilo kojim slikama koje vam nisu na položaju.
