Tasvirlaringizni uslublar va uslublardagi uslublar yordamida ishlatish
Ko'p odamlar matnni o'zgartirish, shriftni, rangi, o'lchami va boshqalarni o'zgartirish uchun CSS- dan foydalanadi. Ammo ko'pchilik ko'pincha unutib qo'yadigan narsa shundaki, siz CSS-dan tasvirlar bilan ham foydalanishingiz mumkin.
Rasmni O'zgartirish
CSS sizga tasvirning sahifada qanday ko'rinishini moslash imkonini beradi. Bu sizning sahifalaringizni izchil saqlash uchun juda foydali bo'lishi mumkin. Barcha tasvirlardagi uslublarni sozlash orqali siz tasvirlaringiz uchun standart ko'rinish hosil qilasiz. Qilishingiz mumkin bo'lgan ba'zi narsalar:
- Tasvir atrofida chegara yoki anahat qo'shing
- Aloqador tasvirlar atrofida rangli chegara chiqarib oling
- Rasmlarning kengligi va / yoki balandligini sozlash
- Bir tomchi soya qo'shing
- Rasmni aylantiring
- Tasvir o'ralganida uslublarni o'zgartirish
Tasviringizni chegarani berish - bu boshlash uchun ajoyib joy. Lekin siz faqat chegaradan ko'proq narsani o'ylab ko'rishingiz kerak - rasmingizning butun chekkasini o'ylab, chekka chiziqlarni va paddingni sozlang. Nozik qora chegara bilan tasvir yaxshi ko'rinadi, lekin chegaralar va rasm o'rtasidagi ba'zi bir to'ldirishlar qo'shib ham yaxshi ko'rinishi mumkin.
img {
border: 1px qora qora;
to'ldirish: 5px;
}
Mumkin bo'lsa, dekorativ bo'lmagan tasvirlarni har doim bog'lash yaxshi bo'ladi. Lekin, shuni esda tutingki, ko'pchilik brauzerlar tasvir atrofida rangli chegara qo'shadilar. Chegarani almashtirish uchun yuqoridagi kodni ishlatsangiz ham, bog'lanish chegarani o'chirib tashlamasdan yoki o'zgartirmaguningizcha bekor bo'ladi. Buning uchun bog'langan tasvirlar atrofidagi chegarani olib tashlash yoki o'zgartirish uchun CSS-dan foydalanish qoidasini qo'llashingiz kerak:
img> a {
chegara: yo'q;
}
Rasmlarni balandligi va kengligini o'zgartirish yoki sozlash uchun CSS-dan ham foydalanishingiz mumkin. Brauzeri brauzerdan yuklab olish tezligi tufayli rasm o'lchamlarini moslash uchun ishlatish yaxshi emas, lekin ular hali ham yaxshi ko'rinish uchun rasmlarni qayta o'lchamoqda. Va CSS bilan siz tasvirlaringizni standart kenglik yoki balandlikga sozlashingiz yoki hatto o'lchamlarni konteynerga nisbatan belgilashingiz mumkin.
Esingizda bo'lsa, siz tasvirlarni o'lchamoqchi bo'lganingizda, eng yaxshi natijalarni olish uchun siz faqat bitta o'lchamni - bo'yning yoki kenglikning hajmini o'zgartiring. Bu esa, vahiyning nisbatlarini saqlab qolishiga sabab bo'ladi, shuning uchun g'alati ko'rinmaydi. Brauzerda eng mos keladigan raqamni ushlab turish uchun boshqa qiymatni avtomatik ravishda o'rnating yoki qoldiring.
img {
kengligi: 50%;
balandligi: avtomatik;
}
CSS3 bu xususiyatga obyektni moslash va ob'ektni aniqlashning yangi xususiyatlari bilan yechim taklif etadi. Ushbu xususiyatlar bilan siz aniq tasvir balandligi va kengligi va eng asl nisbati qanday ishlash kerakligini aniqlay olasiz. Bu sizning tasvirlaringiz atrofida letterboxing effektlari yoki tasvirni kerakli hajmga mos keladigan olish uchun kesish mumkin.
CSS3 ob'ektiga moslash va ob'ektni aniqlash xususiyatlari hali keng tarqalmagan bo'lsa-da, sizning tasvirlaringizni o'zgartirish uchun foydalanishingiz mumkin bo'lgan ko'plab zamonaviy brauzerlarda yaxshi qo'llab-quvvatlangan boshqa CSS3 xususiyatlari mavjud. Ko'pgina zamonaviy brauzerlarda sizning suratlaringizni tiklash, aylantirish yoki ko'chirish uchun soyalar tushirilishi, burchaklarning yumaloqligi va konvertatsiya. Keyinchalik suratga tushirilganda yoki tugmachani bosganingizda yoki biroz vaqt o'tgach, CSS transitionsidan foydalanishingiz mumkin.
Rasmlarni orqa qismlar sifatida ishlatish
CSS sizning tasvirlaringiz bilan xushbo'y if tovarlar hosil qilishni osonlashtiradi.
Orqa rejalarni butun sahifaga yoki ma'lum bir elementga qo'shishingiz mumkin. Fon-rasm xususiyatiga ega bo'lgan sahifada fon tasvirini yaratish oson:
tanasi {
background-image: url (fon.jpg);
}
Fonni faqat bitta elementga qo'yish uchun tanlovni sahifadagi muayyan elementga o'zgartiring.
Tasvirlar bilan amalga oshiradigan boshqa qiziqarli narsalar - sahifaning qolgan qismi - moybo'yoqli kabi aylanmagan fon tasvirini yaratadi. Siz faqat stil-fon birikmasini ishlatasiz: qattiq; fon rasmingiz bilan birga. Orqa rejalaringiz uchun boshqa variantlar ularni fon-takroriy xususiyatidan foydalanib, ularni gorizontal yoki vertikal ravishda bezashni o'z ichiga oladi.
Orqa fonni takrorlang: repeat-x; tasvirni gorizontal va pastki holatga surish uchun: repeat-y; vertikal holatidadir. Orqa fon rasmingizni fon-pozitsiya xususiyati bilan joylashtirishingiz mumkin.
Va CSS3 sizning foningiz uchun ko'proq uslublarni ham qo'shadi. Tasvirlaringizni biron bir o'lchamli fonga moslashi yoki deraza o'lchamiga moslash uchun fon tasvirini o'rnatishingiz mumkin . Siz manzilni o'zgartirishingiz va so'ngra fon tasvirini qisqartirishingiz mumkin. Lekin CSS3 haqida eng yaxshi narsalardan biri shundan iboratki, endi siz yanada murakkab effektlarni yaratish uchun bir nechta fon tasvirlarini joylashtirishingiz mumkin.
HTML5 stillarga yordam beradi
HTML5dagi rasm elementi hujjat ichida yolg'iz qoladigan har qanday tasvir atrofida joylashtirilishi kerak. Tasavvur qilishning bir usuli - bu tasvir ilova shaklida paydo bo'lishi bo'lsa, u holda shakl elementi ichida bo'lishi kerak. Keyinchalik, siz rasmlarga uslublar qo'shish uchun ushbu elementni va FIGCAPTION elementidan foydalanishingiz mumkin.