6-ma’ruza. Css3 asoslari. Effektlar, transformatsiya, animatsiya

6-ma’ruza. CSS3 asoslari. Effektlar, transformatsiya, animatsiya.

Reja:

CSS animatsiyalar
4
CSS3 asoslari
1
CSS matn effektlari
2
CSS da ikki o’lchovli va uch o’lchovli transformatsiya
3
CSS preprotsessorlari (sass, less).
5

CSS3-ni veb-saytga kiritish odatda uchta strategiya yordamida amalga oshirilishi mumkin:

• 1-strategiya: Qo'lingizdan kelganicha foydalaning
• 2-strategiya: CSS3 xususiyatlarini yaxshilash sifatida ko'ring
• 3-strategiya: Modernizr kutubxonasi bilan zaxira yechimlarni qo'shing

Quyida oddiy fonni gradient bilan almashtirish uchun ushbu usuldan foydalanish misoli keltirilgan:

Quyida oddiy fonni gradient bilan almashtirish uchun ushbu usuldan foydalanish misoli keltirilgan:

header {
background:yellow;
background: radial-gradient(ellipse, red, yellow);
}
Yuqorida: CSS3 ni tushunmaydigan brauzerlar sarlavha qoidasining birinchi qismidan foydalanadi va fonni sariq rangga bo'yaydi. Pastki: CSS3-ni tushunadigan brauzerlar qoidaning ikkinchi qismini ishlatadi va fonni radial gradient bilan to'ldiradi

Sahifani belgilashda Modernizr skriptiga havola qo'shish orqali siz uslublar jadvali qoidalarining quyidagi kombinatsiyasidan foydalanishingiz mumkin:

Jadvaldagi raqamlar xususiyatni to'liq qo'llab-quvvatlaydigan birinchi brauzer versiyasini ko'rsatadi

@keyframes qoidasi

• Qoida ichida CSS uslublarini belgilaganingizda @keyframes , animatsiya ma'lum vaqtlarda asta-sekin joriy uslubdan yangi uslubga o'zgaradi.
• Animatsiyani ishga tushirish uchun siz animatsiyani elementga bog'lashingiz kerak.
• Quyidagi misol “example" animatsiyasini
  elementiga bog'laydi. Animatsiya 4 soniya davom etadi va u

  elementining fon rangini asta-sekin "qizil"dan "sariq"ga o'zgartiradi:

Quyidagi misol animatsiya 25%, 50% tugallanganda va 100% bajarilganda yana

elementining fon rangini o'zgartiradi: