Opacity (Shaffoflik)

Udemere UI’da elementlarning shaffoflik darajasini boshqarish uchun opacity xususiyati qo‘llanadi. Bu hujjat: tez ko‘rsatma, amaliy misollar, eng yaxshi amaliyotlar va keng tarqalgan xatolar bilan.

Tez ko‘rsatma (Quick Reference)

• Qiymat diapazoni: 0 (butunlay ko‘rinmas) → 1 (to‘liq ko‘rinadigan). Masalan: opacity: 0.6;
• Meros: Yo‘q, lekin vizual ta’sir bolalar (child) elementlarga ham qo‘llanadi (butun blok xiralashadi).
• Farqi: opacity butun elementga ta’sir qiladi; rgba()/hsla()/#RRGGBBAA esa faqat rangga alfa qo‘llaydi.
• Animatsiya: CSS transition/animation bilan silliq o‘tishlar uchun juda qulay.

Sintaksis

.selector {
  opacity: <son>; /* 0 dan 1 gacha */
}

Misollar:

.card { opacity: 1; }      /* to‘liq ko‘rinadi */
.muted { opacity: 0.5; }    /* 50% shaffof */
.hidden { opacity: 0; }     /* ko‘rinmaydi, lekin joy egallaydi */

HTML/CSS Oddiy Misollar

1) Hover’da xiralashtirish

<div class="card">Hover me</div>
<style>
.card {
  width: 240px; padding: 16px; border-radius: 12px;
  background: #f5f7fb; transition: opacity .2s ease;
}
.card:hover { opacity: .6; }
</style>

2) Rasmni xiralashtirish va ustiga matn

<div class="hero">
  <img src="image.jpg" alt="" class="bg" />
  <h2 class="title">Udemere</h2>
</div>
<style>
.hero { position: relative; width: 100%; height: 260px; overflow: hidden; }
.hero .bg { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.hero .title { position: absolute; inset: 0; display: grid; place-items: center; }
</style>

3) Faqat fonni shaffof qilish (bolalarni xiralashtirmasdan)

<div class="panel">
  <strong>Matn aniq qoladi</strong>
</div>
<style>
.panel {
  /* opacity emas! fon rangida alfa ishlatamiz */
  background: rgba(0, 0, 0, .1);
  /* yoki modern: background: #0000001A;  */
  color: #111; padding: 16px; border-radius: 8px;
}
</style>

RGBA/HSLA va opacity farqi

Overlay usuli (bolalarni xiralashtirmasdan fonni xiralashtirish):

.box { position: relative; }
.box::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.3); border-radius: inherit; /* faqat fon xira */
}

Tailwind CSS (Udemere Frontend uchun)

• Element shaffofligi: opacity-0 … opacity-100
• Hover bilan: hover:opacity-60
• Transition: transition-opacity duration-200
• Faqat rang alfa: bg-black/10, text-white/80, border-zinc-900/20

Misol:

<button class="px-4 py-2 rounded-2xl bg-indigo-600 text-white/90 hover:opacity-80 transition-opacity">
  Tugma
</button>

Faqat fonni xiralashtirish (matn aniq):

<div class="p-4 rounded-xl bg-black/10">
  <b>Matn tiniq</b>
</div>

React misollari

// Inline style
<div style={{ opacity: 0.5 }}>Half transparent</div>
 
// Class bilan (Tailwind)
<div className="opacity-60 hover:opacity-100 transition-opacity">Hello</div>

JavaScript orqali boshqarish

<div id="toast" class="toast">Saved</div>
<style>
.toast{opacity:0; transition:opacity .25s ease}
.toast.show{opacity:1}
</style>
<script>
const t = document.getElementById('toast');
function showToast(){
  t.classList.add('show');
  setTimeout(()=>t.classList.remove('show'), 2000);
}
showToast();
</script>

SVG-da shaffoflik

• opacity: butun SVG elementiga ta’sir.
• fill-opacity / stroke-opacity: faqat to‘ldirish yoki chiziqqa ta’sir.

<svg width="120" height="60">
  <circle cx="30" cy="30" r="24" fill="tomato" opacity=".4"/>
  <circle cx="90" cy="30" r="24" fill="tomato" fill-opacity=".4"/>
</svg>

Animatsiya (CSS)

.fade-in { animation: fade-in .25s ease both; }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
 
.fade-out { animation: fade-out .25s ease both; }
@keyframes fade-out { from { opacity: 1 } to { opacity: 0 } }

Qo‘llanish ssenariylari

• Hover/active holatlarda vizual feedback
• Modallar, tooltiplar, toastlar uchun paydo bo‘lish/yo‘qolish animatsiyasi
• Background rasmlarni xiralashtirib ustiga matn qo‘yish
• Disabled holat ko‘rsatish (opacity-50, cursor-not-allowed)

Keng tarqalgan xatolar

1. Butun kontent xiralashib qolishi: Matn ham xiralashadi → rgba() yoki overlay pseudo-elementdan foydalaning.
2. Kliklanadigan lekin ko‘rinmas element: opacity:0 bo‘lsa ham klik oladi → kerak bo‘lsa pointer-events:none yoki visibility:hidden/display:none.
3. Kontrast pasayishi: Juda past opacity o‘qish imkonini buzadi → AA/AAA kontrastni tekshiring.
4. Stacking context: opacity < 1 element yangi stacking context yaratishi mumkin → z-index muammolarini tekshiring.

Brauzer qo‘llab-quvvatlashi

opacity barcha zamonaviy brauzerlarda qo‘llab-quvvatlanadi (Chrome, Firefox, Safari, Edge, mobil brauzerlar). Legacy IE8- uchun prefikslar kerak edi, ammo Udemere’da legacy qo‘llab-quvvatlash talab qilinmaydi.

Performance va UX tavsiyalari

• opacity GPU tomonidan tez-tez samarali kompozitlanadi → animatsiya uchun yaxshi.
• Silliq animatsiya uchun: will-change: opacity; ni faqat dinamik elementlarda va ehtiyotkorlik bilan qo‘llang.
• Modal/overlaylarda opacity + transform kombinatsiyasi judayam silliq ishlaydi.

Misol (modal paydo bo‘lishi):

.modal { opacity:0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.modal.open { opacity:1; transform: translateY(0); }

Qisqa retseptlar

• Disabled tugma: class="opacity-50 cursor-not-allowed"
• Hover highlight: class="transition-opacity hover:opacity-80"
• Faqat fon xira: class="bg-black/10" (matn xiralashmaydi)
• Tooltip: boshlanishida opacity-0 pointer-events-none, ko‘ringanda opacity-100 pointer-events-auto.

Test ro‘yxati (Checklist)

• Bolalar elementi xiralashib ketmasligi kerakmi? → rgba() yoki overlay.
• Interaktivlik kerakmi? → pointer-events ni tekshiring.
• Kontrast yetarlimi? → Past opacity matnni o‘qish qiyinlashtirmasin.
• Animatsiya silliqmi? → transition/will-change.

Savol-Javob

Q: opacity:0 va display:none farqi?

J: opacity:0 elementni ko‘rinmas qiladi, lekin layout va interaktivlik saqlanib qoladi. display:none esa elementni layoutdan butunlay olib tashlaydi.

Q: Matnni xiralashtirmay fonni qanday xira qilaman?

J: rgba()/hsla() rang alfa kanali yoki ::before overlay ishlating.

Q: Tailwind’da tez yozmoqchiman?

J: opacity-0/25/50/75/100, hover:opacity-80, bg-black/20, text-white/80.

Yakuniy maslahat

opacity – kuchli, lekin ehtiyotkorlik bilan ishlating: o‘qish mumkinligi va interaktivlikni tekshirib boring. Ko‘p holatda rang alfa (rgba/hsla//NN) usuli bilan kombinatsiya qilish eng to‘g‘ri yechim beradi.