Ruka hadi maudhui makuu
LibraTool logoLibraTool

Jenereta ya Kivuli cha Sanduku la CSS bila malipo

Mjenzi wa kuona kwa box-shadow ya CSS na mwonekano wa moja kwa moja, mrundikano wa tabaka nyingi, kichaguo cha rangi, kubadilisha inset, na kunakili kwa kubonyeza mara moja. Inajumuisha violezo vya Material, neumorphism, na mwanga.

Inafanya kazi bila mtandao mara ikishapakia
Hakikisha muundo wa nyuma

Buruta sanduku ili kuweka utani wa kiwango kinachofanya kazi - shikilia Shift kwa udhibiti wa kina

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

Mipangilio ya awali

Matumizi ya kawaida

  • Aikoni ya Card UIKujenga upendo wa aikoni ya aikoni kwa ajili ya dashboards, grid ya bidhaa, na dashboards.
  • Kamilisha Matokeo ya KihusishiKujenga aikoni za kihusishi inayoiga kina halisi na kuwa na hali.
  • Neumorphism Soft UITengeneza muundo wa neumorphism na aini nene na aikoni nyeusi.
  • Modal & Popover AikoniTengeneza muundo wa juu na ndoto kwa ajili ya mazungumzo na kumweka chini.
  • Mwanga na Athari za Uzani wa KuzingatiaTengeneza madhara ya mwanga unaolemazima, vizingiti vya uzani, na alama za mtindo wa neon.

Jinsi Inavyofanya Kazi

Kitengenezea box-shadow ni kifaa cha React cha upande wa mteja kikamilifu β€” hakuna seva, hakuna maktaba. Kinaweka orodha ya vitu vya tabaka la kivuli kwenye hali, kujenga mfuatano halali wa CSS box-shadow kwa kila mabadiliko kwa kutumia kiundaji cha rgba() kilichoandikwa mwenyewe, na kukitumia moja kwa moja kwenye kipengele cha onyesho la awali kupitia kipengele cha mtindo cha React ili injini ya uonyeshaji ya kivinjari chenyewe ichore matokeo papo hapo.

  1. 1
    Vigezo vya tabaka vinalisha kiundaji
    Kila tabaka la kivuli linahifadhi nyongeza za x/y, ukungu, kuenea, rangi ya hex, na thamani ya uwazi. Kwa kila mabadiliko, kazi ndogo ya shadowToCss inabadilisha rangi ya hex kuwa vipengele vya RGB kwa usemi wa kawaida, kisha kujenga mfuatano wa rgba() β€” kwa mfano, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Tabaka nyingi zinaunganishwa kwa koma.
  2. 2
    Kivinjari kinaonyesha onyesho la awali la moja kwa moja
    Mfuatano uliojengwa unawekwa kwenye kipengele cha mtindo cha boxShadow cha kipengele cha div moja kwa moja kwenye JSX. React inasasisha sifa ya DOM, na injini ya CSS ya kivinjari inapaka kivuli papo hapo β€” hakuna canvas au WebGL inayohusika, ni uonyeshaji wa kawaida wa CSS tu.
  3. 3
    Kuweka nafasi kwa kuburuta kunatumia Pointer Events API
    Kubofya na kuburuta kisanduku cha onyesho la awali kunaita setPointerCapture kwenye kipengele, kisha kufuatilia tofauti za onPointerMove kusasisha nyongeza za x na y za tabaka linalotumika papo hapo. Kushikilia Shift kunatumia kipengele cha kipimo cha 0.25x kwa uwekaji nafasi wa kina.
  4. 4
    Matokeo yananakiliwa kwenye clipboard
    Kifaa kinatoa miundo miwili ya matokeo kutoka data ile ile ya tabaka: tamko la kawaida la CSS box-shadow, na klasi ya thamani-huru ya Tailwind (shadow-[...]) ambapo nafasi zinabadilishwa na mistari ya chini kulingana na kanuni za sintaksia za Tailwind. Nakala ya kubofya mara moja inatumia navigator.clipboard.writeText.

Zana Zinazohusiana

β—–

Jenereta ya Radius ya Mpaka wa CSS

Buni pembe za mviringo kwa kuona na udhibiti wa kujitegemea kwa kila pembe. Inasaidia sintaksia ya X/Y ya duaradufu kwa maumbo ya blob yanayoonekana ya asili.

Jaribu
🟦

Kitengenezea CSS Grid

Zungu CSS grid β€” tracks, vitengo na pengo β€” na kunakili CSS na HTML iliyozalishwa.

Jaribu
↔️

Kitengenezea CSS Flexbox

Jaribu mwelekeo wa kubana, songa, na justifikasi kwenye vitu vya moja kwa moja β€” na kunakili CSS.

Jaribu

Maswali Yanayoulizwa Mara Kwa Mara