Kizalishi cha CSS Box Shadow

Zana zote

Tengeneza vivuli vya CSS box-shadow vilivyowekwa tabaka kwa kutumia vitelezi vya moja kwa moja vya umbali, ukungu, usambazaji, rangi, uwazi na inset — angalia muundo kwenye kipengele halisi na nakili CSS tayari kupachika papo hapo.

Hakikisho la moja kwa moja
Hakikisho la moja kwa moja
CSS
box-shadow: —;

Kila kitu kinasasishwa moja kwa moja kwenye kivinjari chako — hakuna upakiaji, hakuna usajili, bila malipo kabisa.

Tabaka za kivuli
px
px
px
px
Rangi ya kivuli
20%
Kipengele na turubai
16px
Vigezo vya awali

Kuhusu Kizalishi cha CSS Box Shadow

Kizalishaji cha Box Shadow cha CSS kinakuwezesha kubuni vivuli vya kisanduku kwa macho badala ya kukisia thamani kwenye msimbo. Buruta viteleza vya mwelekeo wa mlalo na wima, upana wa ukungu (blur), upana wa kuenea (spread), rangi na uwazi — pamoja na swichi ya inset — na uone kipengele halisi kikibadilika papo hapo. Kikifika sahihi, nakili CSS iliyo tayari kubandikwa kwa mbofyo mmoja.

Vivuli vya kisasa vya UI mara chache huwa tabaka moja. Kizalishaji hiki kinasaidia tabaka za vivuli zilizopangwa: ongeza, nakili, ficha au ondoa tabaka, na onyesha kwa kutazama tabaka lililochaguliwa peke yake au tabaka zote pamoja. Kuweka kivuli kidogo cheusi chini ya kivuli laini kipana ndio jinsi kadi na vitufe vinavyopata kina chake.

Unaweza pia kubuni kipengele cha onyesho lenyewe — rangi ya kisanduku, mviringo wa mpaka na mandhari ya turubai — ili kivuli kihukumiwe dhidi ya muktadha halisi, ikiwemo nyuso za giza. Anza na muundo tayari, bofya "Randomize layer" kupata mawazo, na weka upya wakati wowote unapotaka kuanzia upya. Kila kitu kinaendeshwa kwenye kivinjari chako.

Jinsi ya kutumia Kizalishi cha CSS Box Shadow

  1. Rekebisha viteleza vya mwelekeo wa mlalo, mwelekeo wa wima, ukungu, kuenea, rangi na uwazi, na washa "Inset shadow" ikiwa unataka kivuli cha ndani.
  2. Bofya "Add layer" au "Duplicate layer" ili kupanga vivuli kwa tabaka, na badilisha hali ya onyesho kati ya "This layer" na "All layers" ili kuboresha kila moja.
  3. Rekebisha kipengele na turubai — rangi ya kisanduku, mviringo wa mpaka na mandhari ya nyuma — ili onyesho lifanane na muundo wako halisi.
  4. Tumia muundo tayari au "Randomize layer" ikiwa unataka mwanzo badala ya viteleza tupu.
  5. Nakili kanuni kamili ya CSS (au thamani tu) na uibandike kwenye stylesheet yako.

Maswali yanayoulizwa mara kwa mara

Blur inalainisha ukingo wa kivuli — upana wa juu wa ukungu unafanya kivuli kienee zaidi. Spread inaongeza au kupunguza ukubwa wa kivuli kabla ya kufifisha: thamani chanya zinaenea zaidi ya kipengele, thamani hasi zinavuta ndani kwa kivuli kikali zaidi.

Kina halisi kwa kawaida kinahitaji vivuli angalau viwili: kimoja kidogo na cheusi zaidi karibu na kipengele kwa mguso, na kingine kikubwa, laini zaidi na chenye uwazi zaidi kwa mwanga wa mazingira. Kizalishaji hupanga tabaka nyingi kadri unavyotaka kwenye thamani moja ya box-shadow yenye koma.

Kivuli cha inset kinachorwa ndani ya kipengele badala ya nyuma yake, jambo linalofanya uso uonekane umebonyezwa au umezama ndani. Kinatumika sana kwa sehemu za kuingiza data, mashimo na hali za vitufe vilivyobonyezwa.

Ndiyo. Vidhibiti vya kipengele na turubai vinakuruhusu kubadilisha rangi ya kisanduku, mviringo wa mpaka na mandhari ya turubai, hivyo unaweza kuhakikisha kivuli bado kinasomeka vizuri kwenye nyuso za giza kabla ya kunakili CSS.

Ndiyo, ni bure kabisa. Onyesho na CSS iliyozalishwa vinahesabiwa papo hapo kwenye kivinjari chako, bila kujisajili na bila kikomo cha vivuli ngapi unavyoweza kutengeneza.
Shiriki hii
Zana Zinazohusiana
Kitengenezaji Sahihi ya Barua Pepe Buni sahihi ya barua pepe ya HTML yenye umbo la kitaalamu kutoka kwa templeti 30, ibinafsishe na uihifadhi. Bila Malipo
Kiformati cha Msimbo Pamba HTML, CSS na JavaScript — ingiza upya na ongeza mapumziko ya mistari ili msimbo uliochanganyikiwa au uliofupishwa usomeke. Bila Malipo
Kizalishi cha Msimbo wa QR Tengeneza msimbo wa QR (URL, maandishi, Wi-Fi, vCard…) kama PNG. Bila Malipo
Ikoni hadi PNG Geuza Bootstrap Icons, Font Awesome na zaidi kuwa picha maalum za PNG — bure, ndani ya kivinjari chako. Bila Malipo
Kiunda Ikoni za Programu Unda seti kamili ya ikoni za programu iliyo tayari kwa duka kwa ajili ya App Store na Google Play — mandharinyuma bora ya gredienti, mesh na ruwaza, iliyoundwa kutoka nembo yako. Bila Malipo
Kitengeneza Favicon Tengeneza kifurushi kamili cha favicon kutoka kwa nembo, ikoni ya fonti au monogram — favicon.ico, PNG za kisasa, Apple touch icon, PWA icons, web manifest na kijisehemu cha HTML. Bila Malipo
Utafutaji maarufu
jenereta ya CSS box shadow box shadow CSS jenereta ya kivuli mtandaoni kitengeneza kivuli CSS box shadow ya tabaka kivuli cha ndani CSS
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.
Ripoti tatizo

Ongeza zana hii ya bure kwenye tovuti yako mwenyewe — nakili na ubandike msimbo ulio hapa chini.