web sahifaning turli qurilmalarga moslashuvchanlik imkoniyati (css3: @media)

DOCX 4 pages 24.4 KB Free download

Page preview (4 pages)

Scroll down 👇
1 / 4
3-laboratoriya ishi web sahifaning turli qurilmalarga moslashuvchanlik imkoniyati (css3: @media). ishning maqsadi: talabalarga web sahifaning turli qurilmalarga moslashuvchanlik imkoniyati haqida ma’lumot berish, css3da ishlashni o’rgatish. 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 …
2 / 4
hqonchani 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 …
3 / 4
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. …
4 / 4
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 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 …

Want to read more?

Download all 4 pages for free via Telegram.

Download full file

About "web sahifaning turli qurilmalarga moslashuvchanlik imkoniyati (css3: @media)"

3-laboratoriya ishi web sahifaning turli qurilmalarga moslashuvchanlik imkoniyati (css3: @media). ishning maqsadi: talabalarga web sahifaning turli qurilmalarga moslashuvchanlik imkoniyati haqida ma’lumot berish, css3da ishlashni o’rgatish. 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...

This file contains 4 pages in DOCX format (24.4 KB). To download "web sahifaning turli qurilmalarga moslashuvchanlik imkoniyati (css3: @media)", click the Telegram button on the left.

Tags: web sahifaning turli qurilmalar… DOCX 4 pages Free download Telegram