Վեբ կայքի էջի տարրերը պտտելու շատ պարզ միջոց - պարզապես կիրառեք մի քանի css ոճեր: Այս դասի հետ ծանոթությունը թույլ կտա էջում ալբոմի մեջ տեղադրել չծալված բացիկի երկրպագու, ցրված թափված տերևներ կամ նորաձեւ լուսանկարներ: Դասը պարունակում է լուսանկարչական ալբոմի իրականացման օրինակ և հաշվի է առնում լուծումը բոլոր ժամանակակից զննարկիչների համար:
Դա անհրաժեշտ է
Չորս լուսանկար մինչև 450 px լայնություն
Հրահանգներ
Քայլ 1
Այս օրինակը կկենտրոնանա պտտվող լուսանկարներով նոր ալբոմի էջ ստեղծելու վրա:
Ես նախօրոք պատրաստել էի պատկերներ (լայնությունը 400 հատ) հասցեներով.
Հետագայում մենք նկարներին ID- ներ կհանձնենք ըստ նրանց անունների:
Քայլ 2
Սկզբից մենք պատրաստելու ենք բլոկ մեր լուսանկարների ալբոմի համար `օգտագործելով div թեգը, և նաև դրան ավելացնելու ենք լուսանկարներ` օգտագործելով img թեգը (յուրաքանչյուր պատկեր պետք է կցված լինի իր սեփական div թեգում), ինչպես հետևյալը.
Խնդրում ենք նկատի ունենալ, որ մենք բլոկին նույնացուցիչ ենք հատկացրել. Ըստ նույնացուցիչի, մենք կարող ենք վկայակոչել բլոկը `օգտագործելով css:
Քայլ 3
Հաջորդը, դուք պետք է սահմանեք css ոճերը բլոկի վրա: Ոճերի ցուցակ ՝ "դիրքը ՝ հարաբերական;" - կտեղադրի ծագումը մեր բլոկի վերին ձախ անկյունից. "լուսանցք: 50px ավտոմատ;" - էջի մնացած բովանդակության վերևից և ներքևից կտեղադրի «50px» բլոկի խորշը, ինչպես նաև կտեղադրի ավտոմատ խորացումը աջից և ձախից ՝ այդպիսով հավասարեցնելով մեր բլոկը կենտրոնում: "լայնությունը` 900px; բարձրությունը `650px;" - լայնությունը համապատասխանաբար կդարձնի 900px, իսկ բարձրությունը ՝ 650px:
Նշված ոճերի ցուցակը պետք է տեղադրվի այս եղանակով.
# լուսանկար_էջ {
դիրքը ՝ հարաբերական;
լուսանցք ՝ 0 ավտոմատ;
լայնությունը `900px;
բարձրությունը `650px;
տեքստի հավասարեցում. կենտրոն;
}
Ուշադրություն դարձրեք «# լուսանկար_էջի» օգտագործմանը. Ահա այսպես ենք մենք վերաբերում բլոկի ID- ին:
Քայլ 4
Այժմ մենք լուսանկարների էջի բլոկի յուրաքանչյուր պատկերի համար ընդհանուր ոճեր ենք նշանակելու: Դրանք կլորացված անկյուններ են, մոխրագույն եզրագիծ, սպիտակ ֆոն, լցոն և ստվերաներկ:
Սա կստեղծի լուսանկարչական էֆեկտ.
# լուսանկար_էջ img {
սահման-շառավիղ `7px;
եզրագիծ ՝ 1px պինդ մոխրագույն;
ֆոն ՝ #ffffff;
լցոնում ՝ 10 հատ;
տուփ-ստվեր ՝ 2 հատ 2 հատ 10 հատ # 697898;
}
Ուշադրություն դարձրեք «# լուսանկար_էջի img» - ի օգտագործմանը. Սա վերաբերում է լուսանկարների էջի բլոկի ներսում գտնվող բոլոր պատկերներին
Քայլ 5
Կարևոր է նաև ավելացնել այսպիսի կարճ ոճը.
# լուսանկար_ էջ div {
բոց `ձախ;
}
Այն փոքրացնում է ձախից լուսանկարների էջի բլոկի ներսում գտնվող բոլոր բլոկները:
Քայլ 6
Դասի միջանկյալ փուլն այժմ ավարտված է: Եթե ձեր աշխատանքը նման է սքրինշոթի պատկերին, ապա դուք սխալ չեք թույլ տվել և կարող եք անցնել հաջորդ քայլին:
Քայլ 7
Այժմ մենք շրջվում ենք տեղադրված լուսանկարները պտտելու համար: Դրա համար մեզ պետք է փոխակերպման ոճը: Այս պահին, իր մաքուր տեսքով, այն չի օգտագործվում, բայց միայն սկզբում յուրաքանչյուր զննարկչի նախածանցով, ինչպես սա է.
-webkit-transform: rotate (արժեք);
-moz-transform: պտտել (արժեք);
-o-transform: պտտել (արժեք);
Սա զննարկիչների պտտման ոճն է. Google Chrome, Mazilla, Opera (համապատասխանաբար): «Արժեք» բառի փոխարեն վերջում կտեղադրենք deg թվով թիվ ՝ այսպես.
90deg - պտտվել 90 աստիճանով ժամացույցի սլաքի ուղղությամբ:
-5deg - պտտվել -5 աստիճան ժամացույցի սլաքի հակառակ ուղղությամբ:
Եվ այլն
Քայլ 8
Ոճ լուսանկարչական լուսանկարի համար_1:
# ֆոտո_1 {
-webkit-transform: rotate (5deg);
-moz- փոխակերպում `պտտել (5deg);
-o-transform: պտտել (5deg);
}
Առաջին պատկերը պտտվում է 5 աստիճանով:
Քայլ 9
Ոճ լուսանկարչական լուսանկարի համար_2:
# լուսանկար_2 {
-webkit-transform: rotate (-3deg);
-moz- փոխակերպում `պտտել (-3deg);
-o-transform: պտտել (-3deg);
}
Երկրորդ պատկերը պտտվում է -3 աստիճան:
Քայլ 10
Ոճ լուսանկարչական ֆոտոյի համար 3:
# լուսանկար_3 {
-webkit-transform: պտտել (-2deg);
-moz- փոխակերպում `պտտել (-2deg);
-o-transform: պտտել (-2deg);
}
Երրորդ պատկերը պտտվում է -2 աստիճանով:
Քայլ 11
Ոճ լուսանկարչական ֆոտոյի համար 4:
# լուսանկար_4 {
-webkit-transform: rotate (8deg);
-moz- փոխակերպել. պտտել (8deg);
-o-transform: պտտել (8deg);
}
Չորրորդ պատկերը պտտվում է 8 աստիճանով:
Քայլ 12
Տեսնենք, թե ինչպես կարող եք շտկել պատկերների դիրքը: Օրինակ, դուք ուզում եք փոխադրել առաջին պատկերը վերևից 20 հատ և ձախից 10 հատ: Այս դեպքում անհրաժեշտ է օգտագործել մարժայի ոճը: Ահա այն մեր գործի համար օգտագործելու ճիշտ միջոցը.
# ֆոտո_1 {
լուսանցք ՝ 20px -10px -20px 10px;
-webkit-transform: rotate (5deg);
-moz- փոխակերպել. պտտել (5deg);
-o-transform: պտտել (5deg);
}
Խնդրում ենք նկատի ունենալ, որ ոճի առաջին արժեքը վերին լուսանցքն է. երկրորդը `աջ կողմի խորշն է. երրորդը ներքևից ընկած հատված է. չորրորդ - ձախ թեքություն:
Կարևոր. Մեր դեպքում ներքևի մարժան հավասար է վերին մարժայի բացասական արժեքին:Եթե ձեր էջի պատկերի տակ տեսնում եք սպիտակ տարածություն, փորձեք էլ ավելի բացասաբար փորել նկարի ներքևը:
Քայլ 13
Աշխատանքն ավարտված է, ես տրամադրում եմ սքրինշոթ (հաշվի առնելով Քայլ 12-ում նկարագրված առաջին պատկերի խորշման փոփոխությունը):
Entանկացած պատկերների, որոնք ի վիճակի չեն ձեզ հարմար լինել, ավելացրեք փորվածության ոճ:
