Тавлидкунандаи градиенти CSS-и ройгон

Чӣ тавр он кор мекунад

Тавлидгари градиент сатрҳои градиенти CSS-ро бевосита дар браузер месозад — на китобхона, на сервер, на боркунӣ. Функсияи дастнавис синтаксиси дурусти linear-gradient, radial-gradient ё conic-gradient-ро аз рангистонҳо ва зовияи шумо дар вақти воқеӣ ҷамъ мекунад, сипас натиҷаро барои ҳадафи натиҷаи интихобии шумо форматбандӣ мекунад.

1. 1
   Рангистонҳо ва самтро танзим кунед

   Байни 2 ва 6 рангистони рангӣ бо истифодаи интихобгари дарунсохти ранги браузер танзим мекунед, сипас ҳар рангистонро дар меҳвари 0–100% бо лағжонаки диапазон мавқеъгузорӣ мекунед. Барои градиентҳои хатти ва мухрутӣ инчунин зовия (0–360°) интихоб мекунед; барои градиентҳои радиалӣ шакл (эллипс ё доира) ва калидвожаи андозаро, ки чӣ андоза градиент паҳн мешавад назорат мекунад, интихоб мекунед.
2. 2
   buildCss сатри градиентро ҷамъ мекунад

   Дар ҳар тағйирот, функсияи маҳаллии buildCss параметрҳои шуморо ба даъвати дурусти функсияи CSS пайваст мекунад — масалан linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Ягон китобхона дахл надорад; сатр бо мантиқи қолабии одии JavaScript сохта, бевосита аз массиви рангистон пайваст карда мешавад.
3. 3
   Пешнамоиши зинда тавассути услуби inline тасвир мешавад

   Сатри градиенти ҷамъшуда бевосита ба элементи div ҳамчун услуби заминаи inline татбиқ карда мешавад, бинобар ин муҳаррики худи CSS-и браузер пешнамоишро тасвир мекунад. На canvas, на тасвир дахл дорад — он чи мебинед айнан ҳамон хусусияти CSS татбиқшуда мебошад.
4. 4
   Натиҷаи омода-барои-нусхабардорӣ дар чор формат

   Интихобгари формат ҳамон сатри градиентро ба CSS-и одӣ (background: ...), блоки CSS-и бо заминаи сахти солид, синфи қиммати дилхоҳи Tailwind ё эъломияи тағйирёбандаи SCSS табдил медиҳад. Зер кардани Нусхабардорӣ натиҷаи интихобшударо тавассути navigator.clipboard.writeText ба ҳофиза менависад. Градиенти ҷорӣ инчунин дар хатти URL рамзгузорӣ мешавад, бинобар ин метавонед онро нишона гузоред ё мубодила кунед.

Абзорҳои марбут