CSS yordamida menyu animatsiyasini yaratamiz

Maqola o‘zimga o‘xshagan boshlang‘ich verstalshik va web-dasturchilarga qandaydir foyda beradi, degan umidda yozdim.
Ko‘pchilik animatsiyalar odatda jQuery orqali qilinadi. Lekin buning bitta yomon tomoni bor: agar javascript ishlamaydigan qilingan bo‘lsa yoki umuman javascriptni qo‘llamaydigan brauzer bo‘lsa, web-sahifangizning bor go‘zalligi havoga uchadi. Demak, imkoni boricha animatsiyalarni CSS’da qilgan ma’qul.
Читать дальше

Moslashuvchan web-dizaynlar: CSS media so’rovlar (davomi)


Oldingi postlarda yozilgan moslashuvchan web dizayn usullaridan foydalanib bir test o'tkazib kor'amiz.
G'oya shunday: kichik bir sahifa yaratamiz, orqa fonga qandaydir rasm joylashtiramiz. Va orqa fon rasmi har hil ekranda har hil rasm bo'ladi. Buning asosiy maqsadi shundaki, katta ekranlarda sahifa ochilganda fon rasmi katta bo'lishi kerak(hajm ham katta boladi) va kichik ekranlarda ochilganda fon kichik bo'ladi. Bu web sahifalarimizi samalari bo'lishiga yordam beradi. Shuningdek, sahifamizga 2 ta foreground rasm joylaymiz, ya'ni img tega orqali va bu rasmlar ham sahifamizga moslashishini ko'ramiz.
Читать дальше

Moslashuvchan web-dizaynlar: CSS media so’rovlar

CSS 2.1 chiqqanidan boshlab, “media type” lar orqali har hil qurilmalar uchun stil yozish osonlashdi. Agar “print style sheet” (sahifani printerdan chop qilish uchun berilgan holatdagi dizayn) yozgan bo’lsangiz, konseptsiyasi bilan tanish bo’lsangiz kerak:
<link rel="stylesheet" type="text/css" href="core.css"
  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
  media="print" />
Читать дальше

“Moslashuvchan(Responsive)” web-dizaynlar (2-qism)

1-maqolaning davomi…

Moslashuvchan rasmlar
Moslashuvchan dizaynlar bilan ishlayotganda kelib chiqadigan eng asosiy muammolardan biri bu rasmlar bilan ishlashdir. Rasm o’lchamini proporsional(har tomonini teng) o’zgartirish uchun ko’plab usullar bor va ba’zilar judayam oson.
Читать дальше