ღილაკის მაგალითი CSS– ში Rollover 1 – ით

Rollover 1 CSS
ამ მაგალითისთვის უნდა გვქონდეს 3 სურათი, რომელიც იმუშავებს, როგორც;
განსვენება

ჩართულია

გამართული

შემდეგ ჩვენი საიტის ორგანოში გვაქვს ეს
კოდი:


ᲓᲐᲡᲐᲬᲧᲘᲡᲘ

ასე რომ, ჩვენი ყველა ღილაკისთვის, მას შემდეგ, რაც CSS– ს გამოყენება მოგვიწევს, ჩვენ ვიწყებთ ამ კოდს:
კოდი:

# bot1 {
საზღვარი: 0 0 0 0;
შევსება: 0;
ტექსტის გასწორება: ცენტრი;
}
სადაც ვამბობთ, რომ არ გვინდა გარე და შიდა ზღვარი, ტექსტს ვუთანაბრებთ ცენტრს, ახლა კი გავაგრძელებთ ამ კოდს:
კოდი:

# bot1- დან {
background-image: url (bg_menu_1.jpg);
ფონის პოზიცია: ცენტრის ზედა;
სიმაღლე: 30px;
სიგანე: 100 პიქსელი;
ჩვენება: ბლოკი;
ფერი: # 990000;
ტექსტი-დეკორაცია: არცერთი;
padding-top: 5px;
ფონის გამეორება: განმეორება;
შრიფტის წონა: სქელი;
}
ეს პრაქტიკულად ის არის, ვინც ყველაფერს აკეთებს, ვნახოთ სტრიქონზე
background-image: url (bg_menu_1.jpg);
ამით ჩვენ ვამბობთ, რომ გვსურს ფონის სურათი და მივცემთ ამის გზას
ფონის პოზიცია: ცენტრის ზედა;
ამით ჩვენ ვაჩვენებთ, რომ ფონის სურათის პოზიცია იქნება ცენტრში და ზემოთ.
ფონის გამეორება: განმეორება;
ისე, რომ ფონი არ გაიმეოროს, თითქოს ნიმუში იყოს.

სიმაღლე: 30px;
სიგანე: 100;
ჩვენ გეუბნებით, რომ სიმაღლე იქნება 30, ხოლო სიგანე 100 პიქსელი, რაც ჩვენი ფონის სურათების ზომებია.
ჩვენება: ბლოკი;
ასე რომ, ის წარმოქმნის და პატივს სცემს ყუთს იმ ზომებით, რომლებსაც ჩვენ ადრე ვდებთ.
ფერი: # 990000
ამით ჩვენ მხოლოდ ვაძლევთ ფერს ტექსტს, რომელიც ჩვენს ყუთშია.
ტექსტი-დეკორაცია: არცერთი;
ეს არის ის, რომ თავიდან იქნას აცილებული ის ხაზი, რომელიც ბმულების ქვემოთ მდებარეობს.
padding-top: 5px;
ასე რომ, მე დაზოგავს 5px ადგილს ჩვენი ბმულის ზედა ნაწილში და ამით ამცირებს პოზიციას ჩვენი ყუთის ცენტრში.
შრიფტის წონა: სქელი;
ასოებს თამამად აქცევს
თქვენ უბრალოდ უნდა დაამატოთ კლასები ფსევდო ელემენტებისთვის "hover" და "focus"
კოდი:

# bot1 a: hover {
background-image: url (bg_menu_2.jpg);
}
# bot1 დან: ფოკუსირება {
background-image: url (bg_menu_3.jpg);
}
როგორც ვაცნობიერებთ, ჩვენ მხოლოდ ჩვენი ფონის სურათების გზა შევცვალეთ, რათა მიმეღწია იმ ეფექტის მისაღწევად.
ჩვენი კოდი გადახვევის მაგალითი css- ში ნაჩვენებია ქვემოთ:
კოდი:








ᲓᲐᲡᲐᲬᲧᲘᲡᲘ


სურათების ჩამოტვირთვა შეგიძლიათ ამ გვერდიდან, დააწკაპუნეთ სურათზე მარჯვენა ღილაკით და შეინახოთ როგორც.