CSS3 Transitions Qanchadan-qancha Fade Effects yaratish
Veb-dizaynerlar uzoq vaqt CSS3-ning sahnaga chiqish vaqtida yaratgan sahifalari ustidan ko'proq nazorat qilishni istashgan. CSS3-da taqdim etilgan yangi uslublar veb- brauzerlarga o'z sahifalariga fotoshop kabi effektlarni qo'shish qobiliyatini berdi. Bunga tushadigan soyalar va porlashlar , burchaklarning yumaloqligi va boshqa narsalar kiradi. CSS3-da, saytlarda yaxshi interaktivlik yaratish uchun ishlatilishi mumkin bo'lgan animatsiya o'xshash effektlar ham mavjud.
CSS3- dan foydalangan holda veb-saytingizga elementlarni qo'shishingiz mumkin bo'lgan juda yaxshi vizual effektlar ularni opaklik va o'tish uchun xususiyatlarning kombinatsiyasidan foydalanib, tashqariga chiqarib tashlashdir. Bu saytni tashrif buyuruvchi biror narsa qilganda, masalan, ushbu element ustida harakat qilish kabi diqqatni jalb qiladigan joylarni yaratish orqali sahifalaringizni interaktiv qilish uchun qulay va yaxshi usul.
Keling, ushbu ta'sirli ingl. Effektni veb-sahifalaringizda turli elementlarga qo'shish qanchalik osonligini ko'rib chiqamiz.
Hover'dagi shaffoflikni o'zgartirishga ruxsat bering
Xaridor ushbu element orqali harakatlanayotganda tasvirning shaffofligini qanday o'zgartirish kerakligini ko'rib chiqamiz. Ushbu misol uchun (HTML quyida ko'rsatilgan) men greydoutning sinf atributi bilan tasvirni ishlataman.
Bizning CSS uslublar jadvalimizga ushbu uslub qoidalarini qo'shamiz:
.greydout {
-webkit-opacity: 0,25;
-moz-shaffoflik: 0,25;
shaffoflik: 0,25;
}
Ushbu shaffoflik ko'rsatkichlari 25% ga teng. Bu degani, tasvir oddiy shaffofligining 1/4 qismi sifatida ko'rsatiladi. Shaffof bo'lmagan holda to'liq shaffof emas, 100%, 0% esa butunlay shaffof bo'lar edi.
Keyinchalik, tasvirni aniq qilish uchun (yoki aniqroq, to'liq shaffof bo'lish uchun) sichqonchani ustiga qo'yganingizda quyidagini qo'shasiz: hover pseudo-class:
.greydout: hover {
-webkit-opacity: 1;
-moz-shaffoflik: 1;
shaffoflik: 1;
}
Siz ushbu misollar uchun men ushbu brauzerlarning eski versiyalari uchun orqaga qarab muvofiqligini ta'minlash uchun sotuvchining oldindan belgilangan versiyalarini ishlataman. Bu yaxshi amaliyot bo'lsa-da, haqiqat shundaki, shaffoflik qoidalari brauzerlar tomonidan yaxshi qo'llab-quvvatlanmoqda va bu sotuvchining oldingi bosqichlarini bekor qilish xavfsizdir. Shunga qaramay, oldingi brauzer versiyalarini qo'llab-quvvatlashni xohlasangiz, bu prefikslarni kiritmaslik uchun hech qanday sabab yo'q. Deklaratsiyani odatiy, oldindan yozilmagan versiyasidan foydalanib yakunlash bo'yicha qabul qilingan eng yaxshi amaliyotga rioya qiling.
Agar siz uni saytga joylashtirsangiz, bu shaffoflikni o'zgartirish juda keskin o'zgarish ekanligini ko'rasiz. Birinchidan, u kulrang, keyin esa u emas, bu ikkisi orasida oraliq holatlar mavjud emas. Bu nurni yoqish yoki o'chirishga o'xshaydi. Bu siz xohlagan narsalar bo'lishi mumkin, ammo siz ko'proq bosqichma-bosqich o'zgarishni sinab ko'rishingiz mumkin.
Chindan ham chiroyli effektlarni qo'shish va ushbu bosqichni bosqichma-bosqich qilish uchun, o'tish xususiyatini .greydout klassiga qo'shishni xohlaysiz:
.greydout {
-webkit-opacity: 0,25;
-moz-shaffoflik: 0,25;
shaffoflik: 0,25;
-webkit-o'tish: barcha 3s qulaylik;
-moz-o'tish: barcha 3s qulaylik;
-ms-o'tish: barcha 3s qulaylik;
-o-o'tish: hamma 3s qulaylik;
o'tish: barcha 3s qulaylik;
}
Ushbu kod bilan o'zgarish faqat birdan kesib o'tishdan ko'ra asta-sekin o'zgarib boradi.
Yana bir bor, biz bu erda bir qator sotuvchidan oldindan belgilangan qoidalarni qo'llayapmiz. O'tish shaffoflik darajasida qo'llab-quvvatlanmaydi, shuning uchun bu prefikslar mantiqiydir.
Ushbu o'zaro ta'sirlarni rejalashtirganingizda eslash kerak bo'lgan narsa, sensorli ekranli qurilmalarda "hover" holatiga ega emas, shuning uchun ushbu effektlar ko'pincha mobil telefon kabi sensorli ekranli qurilma yordamida har kimda yo'qoladi. Ko'pincha bu o'tish tez-tez yuz berishi mumkin, lekin bu juda tez sodir bo'ladi, albatta ular haqiqatdan ham ko'rinmaydi. Yaxshi bonus effekti sifatida qo'shsangiz yaxshi bo'ladi, lekin mazmun uchun tushuniladigan narsalarni ko'rishi kerak bo'lgan o'zgarishlardan qoching.
Fading Out juda mumkin
Xira tasvir bilan boshlashingiz shart emas, siz butunlay shaffof tasvirdan yo'qotish uchun o'tish va ochlikdan foydalanishingiz mumkin. Xuddi shu tasvirni ishlatish bilan, faqatgina bir sinfga ega:
class = "withfadeout">
Xuddi avvalgidek shaffoflikni quyidagicha o'zgartirasiz: hover selektori:
.withfadeout {
-webkit-o'tish: barcha 2s qulaylik;
-moz-o'tish: barcha 2s qulaylik;
-ms-o'tish: barcha 2s qulaylik;
-o-o'tish: barcha 2s qulaylik;
o'tish: barcha 2s qulaylik;
}
.withfadeout: hover {
-webkit-opacity: 0,25;
-moz-shaffoflik: 0,25;
shaffoflik: 0,25;
}
Ushbu misolda, tasvir butunlay shaffofdan shaffofgacha - bizning birinchi misolimizning teskarisiga o'tadi.
Rasmlarning orqasida o'tish
Ushbu ingl. O'tishlarni qo'llashingiz va tasvirlarni yo'q qilishingiz mumkin, lekin siz bu CSS effektlari bilan tasvirlarni ishlatish bilan cheklanmaysiz. Bosish va ushlab turish vaqtida osongina CSS-uslubidagi tugmachalarni osongina yaratishingiz mumkin. Siz shaffoflikni faqat faol pseudo-sinf yordamida ishlatasiz va tugmani belgilaydigan sinfga o'tishni amalga oshirasiz. Nima bo'lishini ko'rish uchun ushbu tugmani bosing va ushlab turing.
Yopilgan yoki tugmachani bosganingizda, asosan, har qanday ingl. Element yo'qotilishi mumkin. Ushbu misolda men sichqoncha ustida bo'lganda divning opakligini va matnning rangini o'zgartiraman. Mana CSS-da:
#myDiv {
kengligi: 280px;
fon-rang: # 557A47;
rang: #dfdfdf;
to'ldirish: 10px;
-webkit-o'tish: hamma 4s osonlashadi 0s;
-moz-o'tish: barcha 4s osonlashadi 0s;
-ms-o'tish: barchasi 4s osonlashadi 0s;
-o-o'tish: barcha 4s osonlikcha 0s;
o'tish: barcha 4s osonlikcha 0s;
}
#myDiv: hover {
-webkit-opacity: 0,25;
-moz-shaffoflik: 0,25;
shaffoflik: 0,25;
rang: # 000;
}
Navigatsiya menyusi fon rangi pasayib turishiga yordam beradi
Ushbu oddiy navigatsiya menyusida fon rangini menyudagi narsalar ustida sichqoncha sifatida sekin-asta tushib ketadi. Mana HTML:
- Bosh sahifa
- CSS3 ta'limi
- CSS3 xususiyatlari
Va bu erda CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
displey: inline;
float: chap;
to'ldirish: 5px 15px;
margin: 0 5px;
-webkit-o'tish: barcha 2s lineer;
-moz-o'tish: barcha 2s lineer;
-ms-o'tish: barchasi 2s linear;
-o-o'tish: barcha 2s lineer;
o'tish: barcha 2s lineer;
}
ul # sampleNav li a {matn-bezatish: yo'q; }
ul # sampleNav li: hover {
fon-rang: # DAF197;
}
Brauzerni qo'llab-quvvatlash
Men bir necha marta dokunduğumda, bu uslublar juda yaxshi brauzer qo'llab-quvvatlashiga ega, shuning uchun hech qanday xavf-xatarsiz foydalanishingiz mumkin. Bunga yagona istisno Internet Explorerning eski versiyalaridir, ammo Microsoft tomonidan 11dan pastda IEning barcha versiyalarini qo'llab-quvvatlashni to'xtatish to'g'risidagi so'nggi qarori bilan bu eski brauzerlar kamroq va kamroq masalaga aylanmoqda - va haqiqatdan ham eski brauzer bu halokatli o'tishga qarang, bu katta muammo emas. Ushbu turdagi effektlarni yoqimli ta'sir o'tkazish uchun cheklashingiz va ularning faoliyatiga haydash yoki kalit tarkibni ochish uchun tayanmasangiz, effektlarni qo'llab-quvvatlamaydigan eski brauzerlar kamroq yoqimli tajribaga ega bo'ladi, lekin bu brauzerlarda foydalanuvchilar farqni bilishadi, ayniqsa saytni odatdagidan foydalansalar va kerakli ma'lumotlarni olsalar.
Qo'shimcha harakatlar, ikkita rasmni almashtirish
Bu erda bir tasvirni boshqasiga aylantirishning bir misoli keltirilgan. HTMLdan foydalaning:
Va boshqasi to'liq shaffof holga keltiruvchi va ikkinchisi shaffof bo'lmagan CSS-ni almashtiradi.
.swapMe img {-vebkit-o'tish: barcha 1s qulaylik; -moz-o'tish: hamma 1s qulaylik; -ms-o'tish: barcha 1s qulayliklar; -o-o'tish: barcha 1s qulayliklar; o'tish: barcha 1s qulayliklar; } .swap1, .swapMe: hover .swap2 {-vebkit-opacity: 1; -moz-shaffoflik: 1; shaffoflik: 1; } .swapMe: hover .swap1, .swap2 {- web-opacity: 0; -moz-shaffoflik: 0; shaffoflik: 0; }