CSS funksiyalari
CSS funksiyalari
CSS funksiyalari hisob-kitoblarni bajarish, qiymatlarni dinamik tarzda qo‘yish yoki transformatsiyalarni qo‘llash imkonini beradi. Ular uslublarni yanada moslashuvchan va kuchli qilish uchun xususiyat qiymatlari ichida ishlatiladi.
Quyida eng ko‘p ishlatiladigan CSS funksiyalaridan ba’zilari keltirilgan:
calc()Hisob-kitoblarni bajaradivar()CSS o‘zgaruvchilaridan foydalanadirgb(),hsl()Rang funksiyalarimin(),max(),clamp()Moslashuvchan o‘lchamlashurl()Tashqi resurslarni (masalan, rasmlarni) yuklaydiattr()HTML atributlari qiymatlarini o‘qiydirotate()HTML elementni aylantiradiscale()HTML element o‘lchamini masshtablaydiperspective()HTML elementga 3D effekt qo‘llaydi
CSS calc() funksiyasi
calc() funksiyasi xususiyat qiymati sifatida ishlatiladigan matematik hisob-kitobni bajaradi.
U qo‘shish, ayirish, ko‘paytirish va bo‘lish amallarini qo‘llab-quvvatlaydi hamda piksel va foiz kabi turli o‘lchov birliklarini birgalikda ishlata oladi.
Quyidagi misol konteyner har doim kenglikni to‘liq egallashini, lekin yon panel/ichki bo‘shliq (padding) uchun joy (150px) qoldirishini ta’minlaydi:
Misol
.container {
width: calc(100% - 150px);
border: 1px solid black;
padding: 10px;
}
O‘zingiz sinab ko‘ring »
CSS var() funksiyasi
var() funksiyasi CSS o‘zgaruvchisining qiymatini qo‘yish uchun ishlatiladi.
CSS o‘zgaruvchilaridan foydalanishning yaxshi usullaridan biri — dizayningiz ranglari bilan ishlash. Bir xil ranglarni qayta-qayta nusxalab joylashtirish o‘rniga, ularni o‘zgaruvchilarga joylashtirishingiz mumkin.
Quyidagi misolda uchta global o‘zgaruvchi (--main-bg-color, --main-txt-color, --main-padding) e’lon qilinadi, so‘ngra uslublar jadvalining keyingi qismida o‘zgaruvchilar qiymatlarini qo‘yish uchun var() funksiyasidan foydalaniladi:
Misol
:root {
--main-bg-color: linen;
--main-txt-color: gray;
--main-padding: 10px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
O‘zingiz sinab ko‘ring »
Shaffoflik (opacity) bilan CSS rgb() funksiyasi
rgb() funksiyasi rangni Red-Green-Blue (qizil-yashil-ko‘k) rang modeli (RGB) yordamida belgilaydi. Shuningdek, ixtiyoriy alfa komponentini ham qo‘shish mumkin (u rangning shaffofligini bildiradi).
Quyidagi misol element matnining shaffofligini o‘zgartirmagan holda fon rangiga shaffoflik qo‘shadi:
CSS hsl() funksiyasi
hsl() funksiyasi rangni Hue-Saturation-Lightness (tus-to‘yinganlik-yorug‘lik) rang modeli (HSL) yordamida belgilaydi. Shuningdek, ixtiyoriy alfa komponentini ham qo‘shish mumkin (u rangning shaffofligini bildiradi).
Quyidagi misolda yashil rang (120) turli yorug‘lik darajalarida ko‘rsatilgan:
Misol
#p1 {background-color:hsl(120 100% 50%);}
#p2 {background-color:hsl(120 100% 75%);}
#p3 {background-color:hsl(120 100% 25%);}
O‘zingiz sinab ko‘ring »
Quyidagi misolda shaffoflikka ega bir nechta HSL ranglari ko‘rsatilgan:
Misol
#p1 {background-color:hsl(120 100% 25% / 20%);}
#p2 {background-color:hsl(290 60% 70% / 0.3);}
O‘zingiz sinab ko‘ring »
CSS min() funksiyasi
min() funksiyasi o‘lchamlarni egiluvchan belgilash orqali moslashuvchan (responsive) maketlar yaratishga yordam beradi.
min() funksiyasi vergul bilan ajratilgan qiymatlar ro‘yxatidagi eng kichik qiymatni xususiyat qiymati sifatida ishlatadi.
Quyidagi misol #div1 kengligini 50% va 300px qiymatlaridan qaysi biri kichik bo‘lsa, o‘shanga o‘rnatadi:
CSS max() funksiyasi
max() funksiyasi o‘lchamlarni egiluvchan belgilash orqali moslashuvchan (responsive) maketlar yaratishga yordam beradi.
max() funksiyasi vergul bilan ajratilgan qiymatlar ro‘yxatidagi eng katta qiymatni xususiyat qiymati sifatida ishlatadi.
Quyidagi misol #div1 kengligini 50% va 300px qiymatlaridan qaysi biri katta bo‘lsa, o‘shanga o‘rnatadi:
CSS clamp() funksiyasi
clamp() funksiyasi ko‘rish maydoni (viewport) o‘lchamiga qarab minimal qiymat, afzal qiymat va maksimal qiymat oralig‘ida moslashuvchan o‘zgaradigan qiymatni o‘rnatish uchun ishlatiladi.
Quyidagi misol div elementining font-size xususiyatini 2.5vw ga o‘rnatadi, lekin u hech qachon 1rem dan kichik yoki 2rem dan katta bo‘lmaydi:
CSS url() funksiyasi
url() funksiyasi rasmlar va shriftlar kabi tashqi resurslarni yuklash uchun ishlatiladi.
Quyidagi misol sahifa uchun fon rasmini o‘rnatadi:
CSS attr() funksiyasi
attr() funksiyasi atribut qiymatini kontentga qo‘yish uchun ishlatiladi.
Quyidagi misol blockquote matnidan keyin cite atributining qiymatini qo‘shadi:
Misol
blockquote:after {
content: " (source: " attr(cite) ") ";
color: hotpink;
}
O‘zingiz sinab ko‘ring »
CSS rotate() funksiyasi
rotate() funksiyasi elementni aylantirish uchun ishlatiladi.
Quyidagi misol bir nechta <div> elementini aylantiradi:
Misol
#myDiv1 {
transform: rotate(25deg);
}
#myDiv2 {
transform: rotate(45deg);
}
#myDiv3 {
transform: rotate(-45deg);
}
O‘zingiz sinab ko‘ring »
CSS scale() funksiyasi
scale() funksiyasi element o‘lchamini masshtablash uchun ishlatiladi.
Quyidagi misolda sichqoncha rasm ustiga olib borilganda rasm biroz kattalashadi:
CSS perspective() funksiyasi
perspective() funksiyasi HTML elementga bevosita 3D effekt qo‘llash uchun ishlatiladi.
Xulosa
CSS funksiyalari quyidagilar uchun foydali vositalardir:
- Dinamik hisob-kitoblarni bajarish
- Moslashuvchan o‘lchamlardan foydalanish
- Qayta ishlatiladigan uslublarni qo‘llash
- Maket va ranglarni moslashuvchan tarzda boshqarish
Tegishli sahifalar
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!