Dear Amazing Women! ❤️
Today is your day! ✨ You bring beauty, strength, and inspiration to the world. 💛
Keep chasing your dreams, believe in yourself, and never let your light fade. Education is your greatest power—it will take you to great heights. 📚💡
Wishing you endless happiness, success, and love! 💙
With respect,
Mushtariy❤️

🌞 Good Morning, Developers!

🔹 Bugun ham yangi bilimlar, kuchli loyihalar va kreativ g‘oyalar siz bilan bo‘lsin! 💻🚀

@Mushtariydeveloper | Front-end magic, back-end logic.

🎨 CSS display xususiyati – elementlar joylashuvi

📌 display – HTML elementlarning sahifada qanday joylashishini boshqaradi.

🔹 Asosiy qiymatlar:
1️⃣ block – yangi qatorga o‘tadi, to‘liq kenglik egallaydi.

✅ Misol: <div>, <p>, <h1-h6>
📌 CSS
div { display: block; }

2️⃣ inline – faqat o‘z tarkibicha joylashadi, kenglik va balandlik qo‘shib bo‘lmaydi.

✅ Misol: <span>, <a>, <strong>
📌 CSS
span { display: inline; }

3️⃣ inline-block – inline kabi yonma-yon turadi, lekin kenglik va balandlik qo‘shish mumkin.

✅ Misol: <button>, <input>
📌 CSS
button { display: inline-block; }

4️⃣ none – elementni butunlay yashiradi (sahifada joy egallamaydi).

✅ Misol:
.hidden { display: none; }
✨ Vizual ta’sirni tushunish uchun:
🟥 block | 🟨 inline | 🟩 inline-block

💡display xususiyati sayt dizaynini moslashuvchan qilish uchun muhim vosita! 🚀

🚀 CSS Flexbox – moslashuvchan joylashuv

📌 Flexbox – elementlarni moslashuvchan boshqarish uchun eng kuchli CSS xususiyatlaridan biri!

1️⃣ display: flex;
Flexbox'ni faollashtiradi – konteyner ichidagi elementlar bir qatorga joylashadi.

.container {
display: flex;
background: #f0f0f0;
padding: 10px;
}
2️⃣ justify-content – Asosiy yo‘nalishda joylashuv

Elementlarni x va y o‘qida tekislash.
✅ Qiymatlar:

flex-start – chap tomonda
flex-end – o‘ng tomonda
center – markazda
space-between – oraliq teng
space-around – oraliq + bo‘sh joy

.container {
display: flex; justify-content: center;
}

3️⃣ align-items – Vertikal yo‘nalishda tekislash

✅ Qiymatlar:
flex-start – yuqorida
flex-end – pastda
center – markazda
stretch – butun balandlikni egallaydi
baseline – matn asosiga moslashadi

.container {
display: flex;
align-items: center; }

4️⃣ flex-wrap – Elementlarni qatorlarga ajratish

✅ Qiymatlar:
nowrap – bitta qatorda (default)
wrap – elementlar sig‘masa, yangi qatorga o‘tadi
wrap-reverse – orqadan boshlab joylashadi
.container {
display: flex;
flex-wrap: wrap;
}
5️⃣ flex-direction – Yo‘nalishni o‘zgartirish

✅ Qiymatlar:
row – standart (chapdan o‘ngga)
row-reverse – o‘ngdan chapga
column – yuqoridan pastga
column-reverse – pastdan yuqoriga

.container {
display: flex; flex-direction: column;
}

🔹 Xulosa:
Flexbox – responsiv dizayn uchun mukammal yechim! 🎯 🚀

📝 CSS Font-family haqida

📌 Font-family – matn uchun shrift to‘plamini belgilaydi.

🔹 Ikkita shrift turi mavjud:

1️⃣ Serif – harflari bezakli (Times New Roman, Georgia)

2️⃣ Sans-serif – silliq va oddiy (Arial, Helvetica)


💡 Kod misoli:

p {
font-family:"Arial",sans-serif;
}

📁 CSS Font Kengaytmalari

📌 Vebda ishlatiladigan shrift formatlari:

1️⃣ TTF (TrueType Font) – Eng ko‘p ishlatiladigan format, lekin og‘irroq.
2️⃣ OTF (OpenType 📁 CSS Font Kengaytmalari

📌 Vebda ishlatiladigan shrift formatlari:

1️⃣ TTF (TrueType Font) – Eng ko‘p ishlatiladigan format, lekin og‘irroq.
2️⃣ OTF (OpenType Font) – TTF dan yaxshiroq, qo‘shimcha imkoniyatlar bilan.
3️⃣ WOFF (Web Open Font Format) – Internet uchun optimallashtirilgan, eng ko‘p qo‘llaniladi.
4️⃣ WOFF2 – WOFF ning siqilgan va tezroq versiyasi.
5️⃣ EOT (Embedded OpenType) – Faqat Internet Explorer uchun (eskirgan).
6️⃣ SVG Fonts – Ikki o‘lchamli vektor shriftlar, kam ishlatiladi.

🔹 Webda shrift ulash:

@font-face {
font-family: 'MyFont';
src:url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype');

}

🚀 WOFF va WOFF2 eng yaxshi variant!
) – TTF dan yaxshiroq, qo‘shimcha imkoniyatlar bilan.
3️⃣ WOFF (Web Open Font Format) – Internet uchun optimallashtirilgan, eng ko‘p qo‘llaniladi.
4️⃣ WOFF2 – WOFF ning siqilgan va tezroq versiyasi.
5️⃣ EOT (Embedded OpenType) – Faqat Internet Explorer uchun (eskirgan).
6️⃣ SVG Fonts – Ikki o‘lchamli vektor shriftlar, kam ishlatiladi.

🔹 Webda shrift ulash:
@font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); }
🚀 WOFF va WOFF2 eng yaxshi variant!

🎨 CSS Colors – Ranglar bilan ishlash
CSS da ranglar bilan ishlashning bir nechta usullari mavjud. Har bir usul o‘ziga xos va turli maqsadlarda qo‘llaniladi.

1️⃣ Rang nomlari (Color Names)

✅ "red", "blue", "green", "purple" va boshqa standart rang nomlari.

💡 Misol:
h1 {
color: blue;
}

2️⃣ HEX KODLAR (Hexadecimal Colors)

🔹 #RRGGBB formatida, har bir juftlik qizil, yashil va ko‘k (RGB) rang qiymatlarini bildiradi.

🔹 #000000 – qora, #FFFFFF – oq.

🔹 Qisqartirilgan format: #FFF (oq), #000 (qora)

💡 Misol:

p {
color: #ff5733; /* To‘q apelsin rangi */
}

3️⃣ RGB va RGBA (Red, Green, Blue, Alpha)

🔹 RGB – rgb(255, 0, 0) – qizil
🔹 RGBA – rgba(255, 0, 0, 0.5) – shaffof qizil

💡 Misol:
div { background-color: rgba(34, 193, 195, 0.5); /* Yarim shaffof */
}

4️⃣ HSL va HSLA (Hue, Saturation, Lightness, Alpha)

🔹 HSL(0-360, % to‘yinganlik, % yorqinlik)
🔹 HSLA() versiyasida oxirgi qiymat shaffoflik uchun.

💡 Misol:
button {
background-color: hsl(200, 100%, 50%); /* Yorqin moviy*/
}
💡 Ranglarni tanlashda UX dizayniga e’tibor bering!

🖼 CSS Background – Fon bilan ishlash

CSS da background xususiyati yordamida elementlarning orqa fonini sozlash mumkin. Keling, eng asosiy xususiyatlarni ko‘rib chiqamiz:

1️⃣ Background Color – Orqa fon rangi

🔹 Elementning fon rangini o‘zgartirish:
body {
background-color: lightblue;
}

2️⃣ Background Image – Fon rasmi

🔹 Elementning orqa foniga rasm qo‘yish:

div {
background-image: url('background.jpg');
}
3️⃣ Background Size – Rasm o‘lchami

🔹 Rasmni ekranga moslashtirish yoki qay tarzda ko‘rsatishni sozlash:

div {
background-size: cover; /* Butun ekran bo‘ylab */
}
⚡ cover – ekran to‘liq qoplanadi.
⚡ contain – rasm o‘z o‘lchamini saqlaydi.

4️⃣ Background Position – Rasm joylashuvi

🔹 Fon rasmi qayerda joylashishini belgilash:
div {
background-position: center center;
}
⚡ top left, bottom right, center kabi qiymatlar ishlatiladi.

5️⃣ Background Repeat – Takrorlanish
🔹 Rasmning takrorlanishiga ta’sir qiladi:

div {
background-repeat: no-repeat;
}
⚡ repeat – takrorlanadi.
⚡ no-repeat – takrorlanmaydi.
⚡ repeat-x yoki repeat-y – faqat gorizontal yoki vertikal takrorlanadi.

6️⃣ Background Attachment – Harakatlanish

🔹 Foydalanuvchi skroll qilganda fon rasmning harakatlanishini belgilaydi:

div {
background-attachment: fixed; }
⚡ fixed – fon harakatsiz qoladi.
⚡ scroll – sahifa bilan birga harakat qiladi.

💡 Fonni to‘g‘ri sozlash UI/UX dizaynda juda muhim!

Keyingi post – CSS Box Shadow haqida! 🚀

📦 CSS Box Shadow – Soyalar bilan ishlash

CSS da box-shadow xususiyati yordamida elementlarga soya berish mumkin. Bu elementlarni yanada chiroyli va chuqurroq ko‘rinishda chiqarishga yordam beradi.

1️⃣ Oddiy soya berish
🔹 Eng sodda ko‘rinishdagi soyani yaratish:
div {
box-shadow: 5px 5px 10px gray;
}

🔹 Bu yerda:
⚡ 5px – X o‘qi bo‘ylab siljish
⚡ 5px – Y o‘qi bo‘ylab siljish
⚡ 10px – Tumanlik (blur)
⚡ gray – Soya rangi

2️⃣ Tarqalgan (spread) soya
🔹 Soyani element atrofida kengaytirish:
div {
box-shadow: 5px 5px 10px 5px black;
}
⚡ Oxirgi qiymat (5px) – soyani qancha tarqalishini belgilaydi.

3️⃣ Ichki soya (Inset Shadow)

🔹 Ichkariga tushuvchi soya yaratish:
div {
box-shadow: inset 5px 5px 10px gray;
}

⚡ inset – soyani ichkariga yo‘naltiradi.

4️⃣ Bir nechta soyalar

🔹 Bir nechta soyalarni bir vaqtning o‘zida ishlatish mumkin:
div {
box-shadow: 5px 5px 10px gray, -5px -5px 10px lightgray;
}

⚡ Vergul orqali ajratilgan har bir box-shadow alohida ishlaydi.

💡 Box-shadow UI elementlarini aniqroq ko‘rsatish uchun juda foydali!

✍️ CSS Text Shadow – Matnga soya berish

Matnni yanada chiroyli ko‘rsatish uchun text-shadow xususiyatidan foydalaniladi. Bu matn atrofida soya hosil qiladi.

1️⃣ Oddiy text-shadow
h1 {
text-shadow: 2px 2px 5px gray;
}

Bu yerda:
🔹 2px – gorizontal siljish
🔹 2px – vertikal siljish
🔹 5px – tumanlik darajasi
🔹 gray – soya rangi

2️⃣ Rangli soya bilan o‘ynash
p {
text-shadow: 1px 1px 3px red;
}

🔸 Ranglar matnni yorqinroq yoki chuqurroq ko‘rsatadi.

3️⃣ Bir nechta soya qo‘llash
h2 {
text-shadow: 2px 2px 4px blue, -2px -2px 4px green;
}

🔹 Har bir soya vergul bilan ajratiladi
🔹 Har xil yo‘nalishdagi soyalar dizaynga ko‘rk beradi

Bonus: text-shadow effektlari bannerlar, logolar, sarlavhalarda ko‘p ishlatiladi.

Keyingi post: Gradient – o‘tish ranglari haqida! (Background gradient)

Hayrli tong 🌞

#kimiai #deepseek

Xitoyliklar yangi DeepSeek ya'ni Kimi k1.5 neyron tarmog‘ini taqdim etishdi va u barcha uchun bepul.

- 50 tagacha (!) faylni yuklash imkoniyati bor va neyron tarmoq hammasini qayta ishlaydi;
- Darhol qidiruv va "fikrlovchi rejim" mavjud - sun’iy intellekt barcha dolzarb ma’lumotlarni biladi va matematik masalalarni a’lo darajada yechadi;
- OpenAI o1 testlarida yuqori natijalarni ko‘rsatmoqda;
- 200 000 ta belgilik ulkan kontekst oynasiga ega.

@webmakon

Eid Muborak

Transform □ ✅

Selectorlar haqida gaplashamizmi?🚀

🌟 ID va Class - Asosiy CSS Sehrgarlarimiz!


🆔 ID Selektori
ID – bu faqat bitta maxsus element uchun tanilgan narsa, xuddi "VIP chipta" kabi! 🎫 Har bir ID noyob bo’lishi kerak va sahifada bir marta ishlatiladi.
Qanday foydalanamiz? # belgisi yordamida!

<div id="vip-box">VIP Kontent</div>

#vip-box {
  background-color: #FFD700; /* Oltin! 💛 */
  font-weight: bold;}

💼 Class Selektori
Class – bu bir nechta elementlarga qo‘llanadigan oddiy selektor. Bu esa "cheksiz kirish" kartasi 🎟️, shuning uchun istalgancha elementga bitta class berishimiz mumkin!
Qanday foydalanamiz? . (nuqta) belgisi bilan!

<div class="normal-box">Konteyner A</div>
<div class="normal-box">Konteyner B</div>

.normal-box {
  background-color: #87CEEB; /* Osmonday ko'k! 💙 */
  padding: 10px;
}


📌 Oson qoidalar bilan esda tuting:

ID = Yagona, Noyob (VIP)

Class = Bir nechta, Cheksiz qo'llanadi (Hamma kirish kartasi)

@Mushtariydeveloper

Front-end magic, back-end logic.

Assalomu aleykum.
IT dunyosiga qiziqqan do'stlar Bu yerda frontend, dasturlash, texnologiyalar, trendlari haqida eng qiziqarli va foydali postlarni topasiz. 😎🔥


🔥 Sizni oldinda ajoyib kontentlar kutmoqda! Obuna bo‘ling, qiziqarli postlarni o‘tkazib yubormang! Kanaldan chiqib ketmang, faqat oldinga! 🚀

@Mushtariydeveloper👩‍💻