topshirish - Golovna

CSS insight - brauzerlararo yechim

6 ta ovozdan 5 tadan 3,8 tasi

Ushbu darsda biz CSS-ning ravshanligini ko'rib chiqamiz, biz sahifaning turli elementlarini qanday aniqlik bilan berishni va bir xil effekt turli brauzerlarda ishlashi uchun to'liq o'zaro faoliyat brauzer muvofiqligiga erishishni o'rganamiz.

Har qanday elementning tushunchasini qanday o'rnatish kerak

Ushbu quvvat 0 dan 1 gacha bo'lgan qiymatlarga ega, bu tushuncha darajasini ko'rsatadi.

Bu erda 0 - umumiy tushuncha (barcha elementlar uchun hisob-kitoblar uchun qiymatlar) va 1 - umumiy tushuncha etishmasligi.

Qiymatlar kasrlarda yoziladi: 0,1, 0,2, 0,3 va boshqalar. Vikoristan dumba: Serendipity

Brauzerlararo ko'rinish Biroq, barcha brauzerlar shaffoflikning yuqori kuchini qabul qilmaydi va amalga oshiradi. Bunday vaziyatlarda quvvat yoki filtr deb ataladigan narsadan foydalanish kerak.

CSS3 shaffofligining kuchi bunday turlarni rag'batlantiradi

Mozilla brauzerlari

1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Juda yaxshi :) brauzer yak

Internet Explorer

Hatto 9.0 versiyasigacha quvvatning shaffofligi va ko'rinishi qo'llab-quvvatlanmaydi, qaysi brauzer uchun filtr quvvati va alfa qiymatidan foydalanish kerak (Opacity=X), buning uchun X 0 dan 100 gacha bo'lgan raqamdir. idrok etish g'ayrati bilan baholanadi. 0 butunlay tushunarli va 100 mutlaqo noaniq. Firefox brauzerining 3.5 versiyasidan boshlab, u shaffoflik o'rniga moz-opacity-ni qo'llab-quvvatlaydi.

KHTML dvigateliga asoslangan Safari 1.1 va Konqueror 3.1 kabi brauzerlar quyidagi brauzer koʻrinishi opsiyasidan foydalanadi: -khtml-opacity.

Keling, vizual rasmga asoslangan bir qator variantlarni ko'rib chiqaylik.

Birinchi rasmda aniqlik yo'q, ikkinchisida 50%, uchinchisida 30% ravshanlik mavjud.

Natija:

Kursorni tasvir ustiga olib borish soati ostida CSS-ni tushunish. Ko'pincha kursor uning ustiga o'rnatilganda aniq rasm yoki boshqa elementni yaratish kerak bo'ladi. To'lovni amalga oshirish mumkin

CSS yordami

psevdo-sinf: hover.

Bizning rasmimiz uchun ikkita sinfni ro'yxatdan o'tkazish kerak, biri asosiy - rasmning nofaol holati va ikkinchisi psevdo-sinf bilan: kursorni olib keling, bu erda kursorni olib borish paytida rasmning ravshanligini ko'rsatish kerak. .

Natijani demoda ko'rishingiz mumkin.

CSS-da fon ravshanligi.

Misol sifatida, keling, qo'shimcha rasm bilan yaratilgan tomonning foni va qo'shimcha rang bilan yaratilgan fon bilan blok va 50% ravshanlik bilan variantni yarataylik.

Butt kodi: Matn Eksa e'lon qilingan kodning natijasidir: Ushbu darsda biz buni ko'rib chiqamizі CSS kuch - shaffoflik RGBA CSS.

Hokimiyat

Shaffoflik Ushbu darsda biz buni ko'rib chiqamiz faqat elementlarning ravshanligi va funksiyasi bilan ajralib turadi Ushbu darsda biz buni ko'rib chiqamiz– rang va ravshanlik uchun, alfa kanaliga aniqlik qiymatini ko'rsatish uchun. CSS ravshanligi Shaffoflik Raqamli qiymat uchun

Misol uchun, 50% ko'rinishga erishish uchun siz qiymatni 0,5 ga o'rnatishingiz kerak.

Onaga hurmat kerak, shuning uchun
hamma narsaga kengayadi
bolalar elementlari
Dada.
Bu esa matn ham ta’sirchan bo‘lishini anglatadi.
}
Va bu sutteva vada bo'lsa-da, matn juda yaxshi ko'rinmaydi.
CSS Opacity orqali tushuncha
Skrinshotda qora matn qora fon kabi ravshan bo'lib qolgani aniq ko'rinib turibdi.
Div(
}
fon: url (rasmlar/yourimage.jpg);
/* Rasm foni */
kengligi: 750px;
balandligi: 100px;
chegara: avtomatik;
}

.ko‘k (

fon: #027av4; CSS/* Aniq fonga mos rang */ Ushbu darsda biz buni ko'rib chiqamiz. shaffoflik: 0,3;/* Fon koʻrinishi uchun qiymatlar */ balandligi: 70px; h1 ( CSS to'ldirish: 6px; shaffoflik font-family: Arial Black;

shrift vazni: qalinroq; CSS shrift o'lchami: 50px;

RGBA formatidagi CSS shaffofligi
shaffoflik: 0,3;

/* fon ko'rinishi uchun qiymat */

qadam uchun bir qator

Fon: rgba(2, 127, 212, 0,3);

Ko'rib turganingizdek, 0,3 ko'rinish qiymati ikkala usulda ham qochiriladi.

RGBA bilan misol natijasi:

Boshqa skrinshot ancha yaxshi ko'rinadi, lekin birinchisi yaxshiroq ko'rinadi. Bloklarning soddalashtirilgan foniga asoslanib, effektlarni veb-saytda topish mumkin. Ushbu vizual bloklar fotosurat kabi chiziqli kichkintoyning tepasida turishi muhimdir.

Faqat bu holatda ta'sir sezilarli bo'ladi. Biroq, barcha brauzerlar shaffoflikning yuqori kuchini qabul qilmaydi va amalga oshiradi. Ushbu uslub uzoq vaqtdan beri dizaynda, hatto har qanday paydo bo'lishidan oldin ham to'xtab qolgan CSS3, grafik dasturlarda amalga oshiriladi.

Brauzerning eski versiyalarida tartibni qanday qilib yaxshi qilish mumkin

keyin kuch bering CSS filtr Kodning haqiqiyligiga ta'sir qilmasligi uchun uni sharhlashni unutmang. Visnovok Biroq, barcha brauzerlar shaffoflikning yuqori kuchini qabul qilmaydi va amalga oshiradi. Format CSS mo'ylovingizni qo'llab-quvvatlang CSS joriy brauzerlar , aybdorlik uchun.

.

Bundan ham muhimroq
Gnuchky, bolalarga aralashmasdan, faqat aniq vazifalarga e'tibor qaratish muhimdir.
Bu maket dizayneri uchun qiyinroq ekanligi aniq.
Mening tanlovim, albatta, format uchun foyda

otmanyanya uchun

CSS-da serendipity Materialni yaxshiroq mustahkamlash va aniqroq bo'lish uchun sizga o'tishni maslahat beraman. CSS-da elementning ko'rinishini o'zgartirishning uchta usuli mavjud: qo'shimcha quvvat va shaffoflik uchun, rgba() qo'shimcha funktsiyasi uchun,
hsla() qo'shimcha funktsiyasi uchun.

1. Quvvatning shaffofligi
Shaffoflik kuchi veb-sahifaning istalgan elementini tez-tez yoki to'liq ko'rinadigan qilib yaratishga imkon beradi.

Bu kuch

uchun elementlarning ko'rinishini o'zgartiradi fon tasviri, (rasm) yoki qo'shimcha rang yoki gradientdagi fon.і Agar noaniqlik kuchi yaratilgan elementda boshqa elementlar bo'lsa, ular ham o'z tushunchalarini o'zgartiradilar. Shaffoflik kuchi 0 (juda tushunarli) dan 1 (aniq emas) oralig'ida qiymatlarni to'playdi, masalan: H1 (rang: #CD6829;) div (fon: #CDD6DB; shaffoflik: .3; ) Guruch. 1. Qo'shimcha shaffoflik ortidagi elementlarning ko'rinishi

qizil (qizil)

yashil ko'k, kvitiv, va, alfa kanali (alfa)і H1 (rang: #CD6829;) div (fon: #CDD6DB; shaffoflik: .3; ), shuningdek, noyob rangni o'rnatish imkonini beradi.

Rang soyalari yuzlab ko'rsatilgan, ular rang qiymatlariga mos keladi.

Doiraning o'zini sektorlarga ajrating, ularning chegaralarida asosiy ranglar mavjud:
0/360° - qizil rang
60° - sariq rang
120 ° - yashil rang
180° - qora rang
240 ° - ko'k rang
270 ° - binafsha rang

300 ° - to'q qizil rang.

Qora rangni olib tashlash uchun siz rang, to'yinganlik va yorqinlik ko'rsatkichlariga nol qiymatlarni belgilashingiz kerak - hsla (0, 0%, 0%, 1).

Oq rang 100% yorqinlik qiymatidan oshib ketadi hsla(0, 0%, 100%, 1) , kul rang esa nol to'yinganlik qiymatida chiqadi hsla(0, 0%, 50%, 1) .

CSS shaffofligining kuchi HTMLda elementlarning (rasmlar, matnlar, bloklar) ko'rinishini anglatadi.

CSS shaffoflik sintaksisi

shaffoflik: qiymat;

Qiymat 0,0 dan 1,0 gacha bo'lgan diapazonda nutq qiymatlarini yaratishi mumkin.

1,0 qiymati ko'rinishning kunlik (kun orqasida) ekanligini bildiradi.

Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.

На странице преобразуется в следующее

Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.

Для обращения к opacity из JavaScript нужно писать следующую конструкцию:

object.style.opacity ="VALUE "

Свойство CSS 3 opacity позволяет делать прозрачным тот или иной элемент сайта.

Степень прозрачности элемента определяется значением от 0 до 1 где 0 – полностью прозрачный а 1 – непрозрачный вовсе.. Так например значение 0.5 свойства opacity применённого к картинке будет значить что данное изображение должно быть полупрозрачным.

Qo'llash: html qanchalik tushunarli

№1 misol. Ushbu darsda biz buni ko'rib chiqamiz Tasvirning html formatida ko'rinishi

Birinchi rasm aniqliksiz ko'rsatildi, ikkinchisi 0,5 ravshanlik bilan

IEdagi serendipity Ushbu darsda biz buni ko'rib chiqamiz Internet Explorer quvvatni qo'llab-quvvatlamaydi to'qqizinchi versiyagacha, ammo u ko'rinish darajasini o'rnatish uchun ishlatilishi mumkin bo'lgan o'z quvvat filtriga ega: filtr: alfa (shaffoflik = 50) 0 Ahamiyati 100 filtr uchun

Internet-brauzer

Sayt xaritasi

Fil sotib oling Fil soting Filni ijaraga oling

Prefiks.

Printsipial jihatdan, biz tushuncha haqidagi bo'limni shu erda tugatishimiz mumkin, aks holda men sizga bu nom haqida ko'proq ma'lumot bermoqchiman

Nega bu rizikdan qo'rqasiz? Ushbu darsda biz buni ko'rib chiqamiz Shunday qilib, agar CSS 3 spetsifikatsiyasi rasman tasdiqlangan bo'lsa, unda tasvirlangan hokimiyatlar o'zlarining tabiatiga ko'ra, brauzerlar tomonidan allaqachon vikoratsiya qilingan nomlar bilan bir xil nomga ega bo'lgan organlardan ajralib turishi aniq. Xo'sh, brendlashdan CSS 3 spetsifikatsiyasini ishlab chiquvchilar uchun quvvatni anglatishi mumkin blokning ravshanligidagi qadam sifatida emas, balki, masalan, uning soyasi yoki chuqurligi (men juda tez yozyapman), bu allaqachon millionlab odamlar tomonidan taqlid qilingan. Ushbu darsda biz buni ko'rib chiqamiz brauzer o'rnatish

ular uchun

Bu tushunchaning o'zi!

Yoki, ehtimol, brauzerni ishlab chiquvchilar o'zlarining vakolatlarini angladilar - bu hech qanday joyda va hech kimda ixtiro qilinmagan yangilik, lekin bunday vakolatga ega hujjatning haqiqiyligini tekshirish mumkin emas, chunki spetsifikatsiya bunday vakolatga ega emas.

-khtml- Ushbu darsda biz buni ko'rib chiqamiz Safari 3 va undan yuqori, Google Chrome Opera-veb-kit- CSS-ning barcha quvvatini olish va kerakli prefiksni, masalan, quvvatga qo'shish uchun Vickory prefikslaridan foydalanish juda oson.

almashtirilgan chiqmoq:-moz-shaffoflik Ushbu darsda biz buni ko'rib chiqamiz Men sizga haqiqatni aytmoqchiman CSS-ning barcha quvvatini olish va kerakli prefiksni, masalan, quvvatga qo'shish uchun Vickory prefikslaridan foydalanish juda oson. vikorystuvati prefikslari

Yolg'on! Aslida, hech narsa hech qanday joyda taqdim etilmaydi, bu shunchaki kuch, va ê

Va bir xil funktsiyani buzishda majburiy ravishda aybdor bo'lgan ikki xil kuch bor!! - bu tushunish izi. Va shuningdek, eng so'nggi versiyalargacha bo'lgan ba'zi maxsus brauzerlar qo'llab-quvvatlashi mumkinligini tushuning CSS kuchi faqat o'z prefikslari bilan (yana noto'g'ri belgilangan, ularning vakolatlarini to'g'ri aytganda - brauzer CSS kengaytmalari), lekin darhol buzilib ketayotgan spetsifikatsiyalarga tayanishi mumkin. CSS-ning barcha quvvatini olish va kerakli prefiksni, masalan, quvvatga qo'shish uchun Vickory prefikslaridan foydalanish juda oson.- Biz ushbu yordamchining o'ziga xos teri kasalligini ko'rib chiqamiz. Xo'sh, bu bo'limda tushuncha haqida nima deyish mumkin, unda shuni ta'kidlash kerak .

Firefox brauzeri

Prefikslarni o'qiyotganda, kodni uzaytirish kerak va ularning o'zgarishlari har doim ham to'g'ri emas, chunki ushbu va boshqa vakolatlar bilan faqat o'z prefikslarining o'zgarishlari bilan shug'ullanishi kerak bo'lgan brauzer versiyalari eskirganligi sababli, quvvatsizlanib qoladi. Ushbu darsda biz buni ko'rib chiqamiz, keyin siz ularni belgilashingiz shart emas ... - bu juda qimmat bo'lsa-da.

Xo'sh, endi rezavorlar iltimos.

Vycort prefikslari muntazam ravishda (chunki boshqa brauzer ularsiz qila olmaydi), chunki vikorizatsiya qilingan hokimiyat saytning qulayligi, o'qilishi va qulayligiga katta ta'sir ko'rsatishi mumkin.