ვებ – გვერდის ელემენტების როტაციის ძალიან მარტივი გზა - უბრალოდ გამოიყენეთ რამდენიმე CSS სტილი. ამ გაკვეთილის გაცნობა საშუალებას მოგცემთ განათავსოთ გაშლილი ბარათის გულშემატკივარი, გაფანტული ფოთლები ან ელეგანტური ფოტოები ალბომში გვერდზე. გაკვეთილი შეიცავს ფოტოალბომის განხორციელების მაგალითს და ითვალისწინებს გამოსავალს ყველა თანამედროვე ბრაუზერისთვის.
Ეს აუცილებელია
ოთხი ფოტო 450 პიქსელამდე სიგანე
ინსტრუქციები
Ნაბიჯი 1
ეს მაგალითი ფოკუსირებული იქნება ალბომის ელეგანტური გვერდის შექმნაზე, როტაციული ფოტოებით.
წინასწარ მოვამზადე სურათები (სიგანე 400 პიქსელი) მისამართებით:
მომავალში ჩვენ სურათებს პირადობის დამადასტურებელი დოკუმენტები მივაკუთვნებთ მათი სახელების მიხედვით.
ნაბიჯი 2
პირველი, ჩვენ მოვამზადებთ ბლოკს ჩვენი ფოტოალბომისთვის div ნიშნის გამოყენებით და ასევე დავამატებთ მას ფოტოებს img ტეგის გამოყენებით (თითოეული სურათი უნდა იყოს თანდართული თავის div ნიშანში), ასე შემდეგნაირად:
გთხოვთ გაითვალისწინოთ, რომ ბლოკს მივუთითეთ იდენტიფიკატორი -. იდენტიფიკატორის საშუალებით, ჩვენ შეგვიძლია მივმართოთ ბლოკს css- ის გამოყენებით.
ნაბიჯი 3
შემდეგ, თქვენ უნდა დააყენოთ css სტილის ბლოკი. სტილის ჩამონათვალი: "პოზიცია: ფარდობითი;" - დავაყენებთ წარმოშობას ჩვენი ბლოკის ზედა მარცხენა კუთხიდან; "margin: 50px auto;" - დავაყენებთ ჩვენი ბლოკის "50px" ჩაღრმავებას გვერდის დანარჩენი შინაარსის ზემოთ და ქვემოთ, ასევე დააყენებთ ავტომატურ ჩაღრმავებას მარჯვნივ და მარცხნივ, რითაც ჩვენი ბლოკი გასწორდება ცენტრში; "სიგანე: 900px; სიმაღლე: 650px;" - სიგანე დაადგინა 900px და სიმაღლე 650px შესაბამისად.
სტილის მითითებული სია უნდა განთავსდეს ამ გზით:
# ფოტო_ გვერდი {
პოზიცია: ნათესავი;
ზღვარი: 0 ავტო;
სიგანე: 900 პიქსელი;
სიმაღლე: 650 პიქსელი;
ტექსტის გასწორება: ცენტრი;
}
გაითვალისწინეთ "# ფოტო_გვერდის" გამოყენება - ასე მივმართავთ ბლოკის ID- ს.
ნაბიჯი 4
ახლა ჩვენ მივცემთ ზოგად სტილებს თითოეული სურათისთვის photo_page ბლოკის შიგნით. ეს არის მომრგვალებული კუთხეები, ნაცრისფერი საზღვარი, თეთრი ფონი, ბალიშები და ჩრდილი.
ეს შექმნის ფოტოგრაფიულ ეფექტს:
# ფოტო_ გვერდი img {
საზღვარი-რადიუსი: 7px;
საზღვარი: 1px მყარი ნაცრისფერი;
ფონი: #ffffff;
შევსება: 10px;
ყუთი-ჩრდილი: 2px 2px 10px # 697898;
}
გაითვალისწინეთ "# ფოტო_ გვერდი img" - ის შესახებ. ეს ეხება ყველა სურათს, რომელიც მდებარეობს ფოტო_ გვერდის ბლოკში
ნაბიჯი 5
ასევე მნიშვნელოვანია მსგავსი მოკლე სტილის დამატება:
# ფოტო_გვერდი div {
ათწილადი: მარცხენა;
}
იგი იკუმშება ფოტოების გვერდის ბლოკის ყველა ბლოკის მარცხნივ.
ნაბიჯი 6
გაკვეთილის შუა ეტაპი უკვე დასრულებულია. თუ თქვენი ნამუშევარი ეკრანის ანაბეჭდის სურათის მსგავსია, თქვენ შეცდომა არ დაუშვით და შეგიძლიათ გადადით შემდეგ ეტაპზე.
ნაბიჯი 7
ახლა ჩვენ მივმართავთ გამოქვეყნებული ფოტოების როტაციას. ამისათვის ჩვენ გვჭირდება ტრანსფორმირების სტილი. ამ ეტაპზე, მისი სუფთა სახით, ის არ გამოიყენება, მაგრამ მხოლოდ დასაწყისში თითოეული ბრაუზერის პრეფიქსით, მაგალითად, ეს არის შემდეგი:
-webkit-transform: როტაცია (მნიშვნელობა);
-moz-transform: როტაცია (მნიშვნელობა);
-ო-გარდაქმნა: როტაცია (მნიშვნელობა);
ეს არის როტაციის სტილი ბრაუზერებისათვის: Google Chrome, Mazilla, Opera (შესაბამისად). სიტყვის "მნიშვნელობის" ნაცვლად, ბოლოს ჩავსვამთ რიცხვს deg- ით, ასე:
90deg - მოძრაობა 90 გრადუსით საათის ისრის მიმართულებით.
-5deg - როტაცია -5 გრადუსი საათის ისრის საწინააღმდეგოდ.
და ა.შ.
ნაბიჯი 8
სტილი ფოტო ფოტოსთვის:
# ფოტო_1 {
-webkit-transform: როტაცია (5deg);
-მოზ-გარდაქმნა: როტაცია (5deg);
-ო-გარდაქმნა: როტაცია (5deg);
}
პირველი სურათი 5 გრადუსით ბრუნავს.
ნაბიჯი 9
სტილი ფოტო ფოტოსთვის_2:
# ფოტო_2 {
-webkit-transform: როტაცია (-3deg);
-მოზ-გარდაქმნა: როტაცია (-3deg);
-ო-გარდაქმნა: როტაცია (-3deg);
}
მეორე სურათი გარდაიქმნება -3 გრადუსით.
ნაბიჯი 10
სტილი ფოტო ფოტოსთვის: 3:
# ფოტო_3 {
-webkit-transform: როტაცია (-2deg);
-მოზ-გარდაქმნა: როტაცია (-2deg);
-ო-გარდაქმნა: როტაცია (-2deg);
}
მესამე სურათი გარდაიქმნება -2 გრადუსით.
ნაბიჯი 11
სტილი ფოტო ფოტო_4-ისთვის:
# ფოტო_4 {
-webkit-transform: როტაცია (8deg);
-მოზ-გარდაქმნა: როტაცია (8deg);
-ო-გარდაქმნა: როტაცია (8deg);
}
მეოთხე სურათი გარდაიქმნება 8 გრადუსით.
ნაბიჯი 12
ვნახოთ, როგორ შეგიძლიათ გამოსწორდეთ სურათების პოზიცია. მაგალითად, გსურთ პირველი სურათის გადაფარვა 20px ზემოდან და 10px მარცხნიდან. ამ შემთხვევაში, თქვენ უნდა გამოიყენოთ ზღვარი სტილი. ეს არის ჩვენი საქმის გამოყენების სწორი გზა:
# ფოტო_1 {
მინდორი: 20px -10px -20px 10px;
-webkit-transform: როტაცია (5deg);
-მოზ-გარდაქმნა: როტაცია (5deg);
-ო-გარდაქმნა: როტაცია (5deg);
}
გთხოვთ გაითვალისწინოთ, რომ სტილის პირველი მნიშვნელობა არის ზედა ზღვარი; მეორე არის შეწევის უფლება; მესამე ქვედა ნაწილია; მეოთხე - მარცხენა აბზაცი.
მნიშვნელოვანია: ჩვენს შემთხვევაში, ქვედა ზღვარი ტოლია ზედა ზღვრის უარყოფითი მნიშვნელობა.თუ თქვენს გვერდზე მოცემული სურათის ქვეშ ხედავთ თეთრ ადგილს, შეეცადეთ სურათის ქვედა ნაწილი კიდევ უფრო უარყოფითად ჩასვათ
ნაბიჯი 13
სამუშაო დასრულებულია. მე გთავაზობთ სკრინშოტს (მე -12 ნაბიჯში აღწერილი პირველი სურათის ჩაღრმავების ცვლილების გათვალისწინებით).
დაამატეთ ჩაღრმავების სტილი ნებისმიერ სურათს, რომელიც არ არის თქვენთვის შესაფერისი.
