🎨

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

Созандаи визуалии box-shadow-и CSS бо пешнамоиши зинда, дастабандии бисёрқабата, интихобгари ранг, тағйирдиҳандаи inset ва нусхабардории якклика. Пешбурдҳои Material, неоморфизм ва дурахшро дар бар мегирад.

Дар браузери шумо кор мекунадБе бақайдгирӣ, бе равзанаҳои пайдошавандаВоридшавӣ лозим нестҲамеша ройгон

Ҳамин ки бор шуд офлайн кор мекунад

Пасманзари пешнамоиш

Қуттиро барои ҷойгир кардани сояи қабати фаъол кашед - барои назорати дақиқ Shift-ро нигоҳ доред

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Пешфарзҳо

Ранги қуттӣ

Радиуси канор (16px)

x (0px)

y (4px)

норавшанӣ (12px)

паҳноӣ (0px)

Ранг

Норавшанӣ (15%)

Сояи дарунӣ

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

Тавлидгари box-shadow як абзори пурра тарафи-мизоҷи React аст — на сервер, на китобхона. Он рӯйхати объектҳои қабати сояро дар ҳолат нигоҳ медорад, сатрҳои дурусти CSS box-shadow-ро дар ҳар тағйирот бо формати дастнависи rgba() месозад ва онҳоро бевосита ба элементи пешнамоиш тавассути хусусияти услуби React татбиқ мекунад, то муҳаррики худи тасвиркунии браузер натиҷаро фавран кашад.

1
Параметрҳои қабат формулагузорро ғизо медиҳанд
Ҳар қабати соя гузаришҳои x/y, торикшавӣ, паҳншавӣ, ранги шонздаҳӣ ва қиммати шаффофиятро захира мекунад. Дар ҳар тағйирот, функсияи хурди shadowToCss ранги шонздаҳиро ба ҷузъҳои RGB бо ифодаи муназзам табдил дода, сипас сатри rgba()-ро месозад — масалан, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Қабатҳои чандгона бо вергул пайваст мешаванд.
2
Браузер пешнамоиши зиндаро тасвир мекунад
Сатри ҷамъшуда бевосита дар JSX ба хусусияти услуби boxShadow-и элементи div таъин карда мешавад. React атрибути DOM-ро нав мекунад, ва муҳаррики CSS-и браузер сояро фавран мекашад — на canvas, на WebGL дахл дорад, танҳо тасвиркунии дарунсохти CSS.
3
Кашола-ба-мавқеъгузорӣ API-и Pointer Events-ро истифода мебарад
Зер кардан ва кашола кардани қуттии пешнамоиш setPointerCapture-ро дар элемент даъват мекунад, сипас гузаришҳои onPointerMove-ро пайгирӣ мекунад, то x ва y-и қабати фаъолро дар вақти воқеӣ нав кунад. Нигоҳ доштани Shift омили миқёси 0.25x-ро барои мавқеъгузории нозук татбиқ мекунад.
4
Натиҷа ба ҳофиза нусхабардорӣ мешавад
Абзор аз ҳамон маълумоти қабат ду формати натиҷа тавлид мекунад: як эъломияи стандартии CSS box-shadow ва синфи қиммати дилхоҳи Tailwind (shadow-[...]), ки дар он фосилаҳо бо зерхат мутобиқи қоидаҳои синтаксиси Tailwind иваз карда мешаванд. Нусхабардории якзер navigator.clipboard.writeText-ро истифода мебарад.