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


Download 1.77 Mb.
bet1/3
Sana01.04.2023
Hajmi1.77 Mb.
#1316858
  1   2   3
Bog'liq
6-mavzu nur

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:


Download 1.77 Mb.

Do'stlaringiz bilan baham:
  1   2   3




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling