O modalitate foarte simplă de a roti elementele unei pagini de site - aplicați doar câteva stiluri CSS. Familiarizarea cu această lecție vă va permite să plasați un ventilator de cărți desfăcut, frunze căzute împrăștiate sau fotografii elegante într-un album de pe pagină. Lecția conține un exemplu de implementare a unui album foto și ia în considerare soluția pentru toate browserele moderne.
Este necesar
Patru fotografii cu o lățime de până la 450 px
Instrucțiuni
Pasul 1
Acest exemplu se va concentra pe crearea unei pagini elegante de album cu fotografii rotite.
Am pregătit în avans imagini (lățime 400px) cu adrese:
În viitor, vom atribui ID-uri imaginilor în funcție de numele acestora.
Pasul 2
În primul rând, vom pregăti un bloc pentru albumul nostru foto folosind eticheta div și, de asemenea, vom adăuga fotografii la acesta folosind eticheta img (fiecare imagine trebuie să fie inclusă în propria sa etichetă div), astfel:
Vă rugăm să rețineți că am atribuit un identificator blocului -. Prin identificator, ne putem referi la bloc folosind css.
Pasul 3
Apoi, trebuie să setați stilurile css la bloc. Lista stilurilor: "poziție: relativă;" - va seta originea din colțul din stânga sus al blocului nostru; "margin: 50px auto;" - va seta indentarea blocului nostru "50px" deasupra și sub restul conținutului paginii, precum și va seta indentarea automată la dreapta și la stânga, astfel aliniind blocul nostru în centru; "lățime: 900 px; înălțime: 650 px;" - va seta lățimea la 900 px și respectiv înălțimea la 650 px.
Lista specificată de stiluri trebuie plasată în acest fel:
#photo_page {
poziție: relativă;
marja: 0 auto;
lățime: 900px;
înălțime: 650px;
text-align: centru;
}
Rețineți utilizarea „#photo_page” - așa ne referim la ID-ul blocului.
Pasul 4
Acum vom atribui stiluri generale pentru fiecare imagine din interiorul blocului photo_page. Acestea sunt colțuri rotunjite, margine gri, fundal alb, căptușeală și umbră.
Acest lucru va crea un efect fotografic:
#photo_page img {
raza chenarului: 7px;
chenar: 1px gri solid;
fundal: #ffffff;
umplutură: 10 px;
cutie-umbră: 2px 2px 10px # 697898;
}
Rețineți utilizarea „#photo_page img” - aceasta se va referi la toate imaginile din blocul photo_page
Pasul 5
De asemenea, este important să adăugați un stil scurt ca acesta:
#photo_page div {
plutește la stânga;
}
Micsoreaza toate blocurile din interiorul blocului photo_page la stanga.
Pasul 6
Etapa intermediară a lecției a fost finalizată acum. Dacă munca dvs. este similară cu imaginea din captura de ecran, atunci nu ați făcut o greșeală și puteți trece la pasul următor.
Pasul 7
Acum ne întoarcem pentru a roti fotografiile postate. Pentru aceasta avem nevoie de stilul de transformare. În acest moment, în forma sa pură, nu este utilizat, ci doar cu un prefix pentru fiecare browser la început, astfel:
-webkit-transform: rotire (valoare);
-moz-transformare: rotire (valoare);
-o-transformare: rotire (valoare);
Acesta este stilul de rotație pentru browsere: Google Chrome, Mazilla, Opera (respectiv). În loc de cuvântul „valoare”, vom insera un număr cu deg la final, astfel:
90 de grade - rotiți 90 de grade în sensul acelor de ceasornic.
-5deg - rotiți -5 grade în sens invers acelor de ceasornic.
Etc.
Pasul 8
Stil pentru fotografie foto_1:
# fotografie_1 {
-webkit-transform: rotire (5deg);
-moz-transformare: rotire (5deg);
-o-transformare: rotire (5deg);
}
Prima imagine este rotită cu 5 grade.
Pasul 9
Stil pentru fotografie foto_2:
# fotografie_2 {
-webkit-transform: rotire (-3deg);
-moz-transformare: rotire (-3deg);
-o-transformare: rotire (-3deg);
}
A doua imagine este rotită -3 grade.
Pasul 10
Stil pentru fotografie foto_3:
# fotografie_3 {
-webkit-transform: rotire (-2deg);
-moz-transformare: rotire (-2deg);
-o-transformare: rotire (-2deg);
}
A treia imagine este rotită cu -2 grade.
Pasul 11
Stil pentru fotografie foto_4:
# fotografie_4 {
-webkit-transform: rotire (8deg);
-moz-transformare: rotire (8deg);
-o-transformare: rotire (8deg);
}
A patra imagine este rotită cu 8 grade.
Pasul 12
Să vedem cum puteți corecta poziția imaginilor. De exemplu, doriți să compensați prima imagine 20px din partea de sus și 10px din stânga. În acest caz, trebuie să utilizați stilul de margine. Iată modul corect de a-l utiliza pentru cazul nostru:
# fotografie_1 {
margine: 20px -10px -20px 10px;
-webkit-transform: rotire (5deg);
-moz-transformare: rotire (5deg);
-o-transformare: rotire (5deg);
}
Vă rugăm să rețineți că prima valoare a stilului este marja superioară; a doua este liniuța spre dreapta; a treia este o liniuță de jos; a patra - liniuța stângă.
Important: în cazul nostru, marja inferioară este egală cu valoarea negativă a marjei superioare. Dacă vedeți spațiu alb sub imagine pe pagina dvs., încercați să indentați partea inferioară a imaginii și mai negativ.
Pasul 13
Lucrarea este completă, ofer o captură de ecran (luând în considerare modificarea indentării primei imagini descrisă în pasul 12).
Adăugați stil de indentare oricăror imagini care nu sunt în măsură să vi se potrivească.
