CSS‑Doodle bilan dinamik generativ dizayn yaratish: boshlang‘ich qo‘llanma

Web‑dizayn dunyosida CSS‑Doodle – bu CSS‑ning imkoniyatlarini kengaytiruvchi, kod orqali tasodifiy grafikalar, animatsiyalar va murakkab grid‑strukturalarni yaratishga mo‘ljallangan open‑source kutubxona. Bu maqolada CSS‑Doodle’ning asosiy selektorlari, funksiyalari va amaliy misollarini ko‘rib chiqamiz.

CSS‑Doodle nima?

CSS‑Doodle – custom element sifatida ishlaydigan <css-doodle> tegi orqali HTML sahifasida generativ san’at yaratadi. Uning asosiy afzalligi – JavaScriptga ehtiyoj sezmasdan, faqat CSS sintaksisi yordamida dinamik tasvirlar yaratish.

Asosiy selektorlar

• :doodle – komponentning o‘zini ifodalaydi. Bu yerda @grid, gap va --s kabi o‘zgaruvchilarni belgilash mumkin.
• :container – grid ichidagi barcha hujayralarni o‘z ichiga olgan konteyner. Bu selektor orqali gap, transform kabi xususiyatlarni sozlash mumkin.
• @nth(...), @even, @odd – :nth-child ga o‘xshash, lekin qisqaroq sintaksis.
• @at(col, row) – aniq bir ustun va qatorni tanlash imkonini beradi.
• @random([ratio]) – tasodifiy hujayralarni tanlaydi; ratio 0‑1 oralig‘ida bo‘lishi mumkin.

Matematik funksiyalar va o‘zgaruvchilar

CSS‑Doodle’da @ prefiksi bilan turli matematik funksiyalar (sin, cos, tan, abs, pow) va doimiylar (π) mavjud. Masalan, @rand(0, 360deg) tasodifiy burchak, @calc(@row * @col) esa joriy hujayra koordinatalarini hisoblaydi.

Quyidagi o‘zgaruvchilar kod ichida keng qo‘llaniladi:

• @index – hujayra indeksini qaytaradi.
• @row va @col – joriy qator va ustun raqamlari.
• @size – griddagi jami hujayra soni.
• @pick(...), @pick-n(...), @pick-d(...) – berilgan ro‘yxatdan tasodifiy yoki ketma‑ketma qiymatni tanlaydi.

Animatsiya va transformatsiyalar

CSS‑Doodle transition, transform va clip-path kabi CSS xususiyatlarini to‘g‘ridan‑to‘g‘ri hujayralarga qo‘llashni qo‘llab‑quvvatlaydi. Misol uchun, :doodle(:hover) { --s: 1; } orqali hover holatida animatsiya yaratish mumkin.

Grafik shakllar va gradientlar

Kutubxona @stripe, @shape, @plot kabi maxsus funksiyalar orqali gradient chiziqlar, polygon va clip‑path shakllarini avtomatik yaratadi. Bu funksiyalar yordamida murakkab rangli chiziqlar, konus gradientlari yoki hatto SVG‑filtrlar qo‘shish osonlashadi.

Amaliy misol

<css-doodle>
  @grid: 8 / 6rem;
  gap: 2px;
  @random {
    background: @pick(#ff6b6b, #4ecdc4, #ffe66d);
    transform: rotate(@rand(360deg));
  }
  :after {
    content: @index;
    color: #fff;
    font-size: .7rem;
  }
</css-doodle>

Yuqoridagi kod 8×8 grid yaratadi, har bir hujayra tasodifiy rang va burchakga ega bo‘ladi, va indeks raqami ko‘rinadi. Natijada rang‑baho va harakatli tasvir hosil bo‘ladi.

Nega CSS‑Doodle’ni tanlash kerak?

• Yengil va tez – faqat CSS‑ni yuklaydi, JavaScriptga qo‘shimcha yuk qo‘shmaydi.
• Responsive – grid o‘lchamlari va @size orqali ekran o‘lchamiga moslashadi.
• Open‑source – GitHub’da faol hamjamiyat, kengaytirilgan hujjatlar.
• Kod‑soddaligi – murakkab animatsiyalarni bir necha qatorda ifodalash mumkin.

CSS‑Doodle web‑dizaynerlar, front‑end dasturchilar va generativ san’at ixlosmandlari uchun ajoyib vosita. Uni rasmiy saytdan o‘rnatish va hujjatlarni o‘rganish tavsiya etiladi.