სტილი შენი სურათები და გამოიყენეთ სურათები Styles
ბევრი ადამიანი გამოიყენებს CSS შეცვალოს ტექსტი, შეცვალოს შრიფტი, ფერი, ზომა და სხვა. მაგრამ ერთი რამ, რაც ბევრ ადამიანს ხშირად ივიწყებს, არის ის, რომ თქვენ შეგიძლიათ გამოიყენოთ CSS სურათებით.
შეცვლის გამოსახულება თავად
CSS საშუალებას გაძლევთ დაარეგულიროთ როგორ გამოიყურება გამოსახულება გამოსახულებაზე. ეს მართლაც სასარგებლოა თქვენი გვერდების თანმიმდევრულად შენახვისთვის. შექმნის სტილი ყველა სურათზე, თქვენ შექმნით სტანდარტული სურათების სურათებს. ზოგიერთი რამ, რაც შეგიძლიათ გააკეთოთ:
- დაამატეთ სასაზღვრო ან მონახაზი გამოსახულების გარშემო
- წაშალეთ ფერადი საზღვარი დაკავშირებული სურათების გარშემო
- სურათების სიგანე ან / და სიმაღლის მორგება
- დაამატეთ წვეთი ჩრდილი
- სურათის გადაადგილება
- შეცვალეთ სტილი, როდესაც გამოსახულია გადაღებული
თქვენი სურათის მიცემა სასაზღვრო დიდი ადგილია. მაგრამ თქვენ უნდა განიხილონ უფრო მეტი ვიდრე საზღვარი - ვიფიქროთ მთელ ზღვარზე თქვენი სურათი და შეცვალოს მინდვრები და padding ასევე. თხელი შავი საზღვრის გამოსახულება გამოიყურება სასიამოვნო, მაგრამ დასძინა ზოგიერთი padding შორის საზღვარი და გამოსახულება შეიძლება გამოიყურებოდეს კიდევ უკეთესი.
img {
საზღვარი: 1px მყარი შავი;
padding: 5px;
}
ეს კარგი იდეაა, როდესაც ყოველთვის შეუძლებელია არა დეკორატიული სურათების კავშირი . მაგრამ როდესაც თქვენ, გახსოვდეთ, რომ ყველაზე ბრაუზერები დაამატოთ ფერადი საზღვრის გარშემო გამოსახულება. მაშინაც კი, თუ საზღვრის შესაცვლელად ზემოთ გამოყენებულ კოდს იყენებთ, ბმული გადალახავს იმას, რომ თუ თქვენ არ წაშალეთ ან შეცვალეთ საზღვარი ბმულზე. ამისათვის თქვენ უნდა გამოიყენოთ CSS ბავშვის წესი, რათა წაშალოთ ან შეცვალოს საზღვარი სურათების გარშემო:
img> a {
საზღვარი: არა;
}
თქვენ ასევე შეგიძლიათ გამოიყენოთ CSS შეცვალოთ ან დააყენოთ თქვენი სურათების სიმაღლე და სიგანე. მიუხედავად იმისა, რომ ეს არ არის დიდი იდეა, რომ გამოიყენოთ ბრაუზერი შეცვალოს გამოსახულების ზომის გამო ჩამოტვირთვა სიჩქარეზე, ისინი უკეთესობისას resizing სურათები ისე, რომ ისინი კვლავ ლამაზად. და CSS- ის საშუალებით შეგიძლიათ დააყენოთ თქვენი გამოსახულებები სტანდარტული სიგანე ან სიმაღლე ან კონტეინერის შედარებით ზომებიც კი.
გახსოვდეთ, როდესაც სურათების ზომის შეცვლა, საუკეთესო შედეგისთვის, მხოლოდ ზომის ზომის შეცვლა - სიმაღლე ან სიგანე. ეს იმას ნიშნავს, რომ გამოსახულება ასრულებს თავის ასპექტს და ასე არ გამოიყურება უცნაური. დააყენეთ სხვა ღირებულება ავტომატურად ან დატოვეთ გარეთ, რომ ბრაუზერი გითხრათ ასპექტის რაციონი შეესაბამება.
img {
სიგანე: 50%;
სიმაღლე: ავტო;
}
CSS3 ამ პრობლემის მოგვარებას ახალი თვისებების ობიექტურ და ობიექტურ პოზიციას სთავაზობს. ამ თვისებებით თქვენ შეძლებთ განსაზღვროთ ზუსტი გამოსახულების სიმაღლე და სიგანე და როგორ უნდა მოხდეს ასპექტის თანაფარდობა. ეს შეიძლება შექმნას letterboxing ეფექტი გარშემო თქვენი სურათები ან cropping მისაღებად გამოსახულება შეესაბამება ზომის საჭირო.
მიუხედავად იმისა, რომ CSS3 ობიექტი-მორგებული და ობიექტის პოზიცია თვისებები არ არის ფართოდ მხარი დაუჭირა, არსებობს სხვა CSS3 თვისებები, რომლებიც კარგად არის მხარდაჭერილი უახლესი ბრაუზერები, რომ შეგიძლიათ გამოიყენოთ შეცვალოთ თქვენი სურათები. რამ, როგორიცაა drop shadows, მომრგვალებული კუთხეების და გარდაქმნების როტაცია, skew, ან გადატანა თქვენი სურათები ყველა სამუშაო ახლავე ახლა ყველაზე თანამედროვე ბრაუზერებში. ამის შემდეგ შეგიძლიათ გამოიყენოთ CSS გადასვლები იმისათვის, რომ სურათების შეცვლა მოხდეს, როდესაც გადაადგილდებიან ან დაწკაპავთ ან უბრალოდ დროის შემდეგ.
სურათების გამოყენება ფონზე
CSS ხდის ადვილად შექმნათ ლამაზი ფაილები თქვენი სურათებით.
თქვენ შეგიძლიათ დაამატოთ ფონზე მთელი გვერდი ან უბრალოდ კონკრეტული ელემენტი. ადვილია შექმნას ფონის სურათის გვერდი ფონზე- image ქონების:
სხეული {
background-image: url (background.jpg);
}
შეცვალეთ სხეულის სელექტორი კონკრეტულ ელემენტზე გვერდზე, რათა მხოლოდ ერთი ელემენტის ფონზე დააყენოთ.
კიდევ ერთი fun რამ, რაც შეგიძლიათ გააკეთოთ სურათებით, შექმნათ ფონის სურათი, რომელიც არ გადაახვიოს დანარჩენი გვერდით - Watermark- ის მსგავსად. თქვენ უბრალოდ გამოიყენეთ სტილის ფონი-დანართი: ფიქსირებული; თქვენს სურათთან ერთად. სხვა პარამეტრების თქვენი ფონზე მოიცავს მათ ფილა უბრალოდ ჰორიზონტალურად ან ვერტიკალურად გამოყენებით background-repeat ქონება.
ჩაწერეთ background- განმეორებითი: განმეორებითი- x; გამოსახულების ჰორიზონტალური და ფონის გამეორების მიზნით: განმეორებითი- y; ვერტიკალურად ხრეშით. და თქვენ შეგიძლიათ განათავსოთ თქვენი ფონის სურათის ფონზე პოზიცია ქონება.
და CSS3 დასძენს მეტი სტილის თქვენი ფონზე ასევე. ფანჯრის ზომა შეგიძლიათ გადააადგილოთ თქვენი სურათებით, რათა შეესაბამებოდეს ნებისმიერი ზომის ფონის ან ფონის სურათის დაყენება . თქვენ შეგიძლიათ შეცვალოთ პოზიცია და შემდეგ დააფიქსიროთ ფონის სურათი. მაგრამ ერთი საუკეთესო რამ CSS3, რომ თქვენ ახლა ფენის მრავალჯერადი background images შექმნა კიდევ უფრო რთული ეფექტი.
HTML5 ეხმარება სტილი სურათები
FIGURE ელემენტი HTML5- ში უნდა განთავსდეს ნებისმიერი სურათების ირგვლივ, რომლითაც შეიძლება დაიცვას დოკუმენტში. ერთი გზა ფიქრი არის თუ გამოსახულება შეიძლება გამოჩნდეს დანართში, მაშინ უნდა იყოს შიგნით FIGURE ელემენტს. ამის შემდეგ შეგიძლიათ გამოიყენოთ ეს ელემენტი და FIGCAPTION ელემენტი თქვენს სურათებს სტილის დასამატებლად.