Vrlo jednostavan način rotacije 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 otpalo lišće ili elegantne fotografije u album. Lekcija sadrži primjer implementacije fotoalbuma i uzima u obzir rješenje za sve moderne preglednike.
Nužno je
Četiri fotografije širine do 450 piksela
Upute
Korak 1
Ovaj će se primjer usredotočiti na stvaranje elegantne stranice albuma s rotiranim fotografijama.
Unaprijed sam pripremio slike (širine 400px) s 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đer ć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 -. Prema identifikatoru, blok možemo uputiti pomoću css-a.
3. korak
Dalje, trebate postaviti css stilove na blok. Popis stilova: "position: relative;" - postavit će ishodište iz gornjeg lijevog kuta našeg bloka; "marža: 50 piksela 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: 900 piksela; visina: 650 piksela;" - postavit će širinu na 900 piksela, a visinu na 650 piksela.
Navedeni popis stilova mora se postaviti na ovaj način:
#photo_page {
položaj: relativan;
marža: 0 auto;
širina: 900px;
visina: 650px;
poravnanje teksta: središte;
}
Obratite pažnju na upotrebu "#photo_page" - ovako se referiramo na ID bloka.
4. korak
Sada ćemo dodijeliti opće stilove za svaku sliku unutar bloka photo_page. To su zaobljeni kutovi, sivi obrub, bijela pozadina, podstavci i sjena.
To će stvoriti fotografski efekt:
#photo_page img {
radijus obruba: 7 piksela;
obrub: 1px jednobojno siva;
pozadina: #ffffff;
podstava: 10px;
kutija-sjena: 2px 2px 10px # 697898;
}
Imajte na umu upotrebu "#photo_page img" - ovo će se odnositi na sve slike unutar bloka photo_page
Korak 5
Također je važno dodati ovakav kratki stil:
#photo_page div {
plutaju: 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 snimci zaslona, niste pogriješili i možete prijeći na sljedeći korak.
7. korak
Sada ćemo okrenuti objavljene fotografije. Za to nam je potreban stil transformiranja. Trenutno se u čistom obliku ne koristi, već samo s prefiksom za svaki preglednik na početku, ovako:
-webkit-transform: rotirati (vrijednost);
-moz-transformiraj: rotiraj (vrijednost);
-o-transformirati: rotirati (vrijednost);
Ovo je stil rotacije za preglednike: Google Chrome, Mazilla, Opera (odnosno). Umjesto riječi "vrijednost", na kraj ćemo umetnuti broj s stupcem, ovako:
90 ° - rotirajte za 90 stupnjeva u smjeru kazaljke na satu.
-5deg - zakretanje -5 stupnjeva u smjeru kazaljke na satu.
Itd.
Korak 8
Stil za foto photo_1:
# fotografija_1 {
-webkit-transformiraj: rotiraj (5deg);
-moz-transformiraj: rotiraj (5deg);
-o-transformirati: rotirati (5deg);
}
Prva slika zakrenuta je za 5 stupnjeva.
Korak 9
Stil za foto photo_2:
# fotografija_2 {
-webkit-transformiraj: rotiraj (-3deg);
-moz-transformiraj: rotiraj (-3deg);
-o-transformirati: rotirati (-3deg);
}
Druga slika rotirana je za -3 stupnja.
Korak 10
Stil za foto photo_3:
# photo_3 {
-webkit-transformiraj: rotiraj (-2deg);
-moz-transformacija: zakretanje (-2deg);
-o-transformirati: rotirati (-2deg);
}
Treća slika rotirana je za -2 stupnja.
11. korak
Stil za fotografiju photo_4:
# photo_4 {
-webkit-transformiraj: rotiraj (8deg);
-moz-transformiraj: rotiraj (8deg);
-o-transformirati: rotirati (8deg);
}
Četvrta slika rotirana je za 8 stupnjeva.
Korak 12
Pogledajmo kako možete ispraviti položaj slika. Na primjer, želite pomaknuti prvu sliku za 20 piksela s vrha i 10 piksela s lijeve strane. U tom slučaju trebate koristiti stil margine. Evo ispravnog načina upotrebe za naš slučaj:
# fotografija_1 {
marža: 20px -10px -20px 10px;
-webkit-transformiraj: rotiraj (5deg);
-moz-transformiraj: rotiraj (5deg);
-o-transformirati: rotirati (5deg);
}
Napominjemo da je prva vrijednost stila gornja margina; druga je uvlaka udesno; treća je uvlaka odozdo; četvrta - lijeva uvlaka.
Važno: u našem je slučaju donja margina jednaka 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 snimku 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.
