CSS Filter Generator

Rekebisha athari kama blur na mwangaza kwa kutumia slaida, na tengeneza kanuni ya CSS filter wakati wa kutazama hakiki

Taarifa za sasishoOngeza CSS Filter Generator, tengeneza kwa kubadilisha burudike na mwangazaAngalia Habari za Sasisho

Sifa

Athari 9 za aina mbalimbali na slaida

Kila wakati unachofanya, preview na kanuni ya CSS hubadilika kwa wakati mmoja

Jaribu na picha yako mwenyewe

Orodhesha picha yako hapa chini katika kivinjari na tazama athari

Picha asili wakati unacobofya

Linganisha picha kabla na baada ya athari hapa hapa

Rekebisha kutoka kwa mifano 8

Rekebisha kulingana na mifano kama sepia na vintage

Jinsi ya Kutumia

Chagua picha

Chagua picha yako hapa chini kwa 'Chagua picha yako mwenyewe'. Ikiwa hautachagua, unaweza kujaribu na picha ya mfano iliyojengwa

Rekebisha athari

Chagua mfano wenye majibu sawa, au rekebisha nguvu za athari kwa kila slaida

Linganisha kabla na baada

Bofya 'Linganisha na picha asili' - picha bila athari itaonyeshwa wakati tu unabobofya

Nakili kanuni

Kwa kitufe 'Nakili', nakili safu moja ya filter na ubandike katika CSS yako mwenyewe

Matumizi

Urahisi wa kusoma maandishi juu ya picha za background

Fanya picha ya background iwe na blur kidogo, ili kichwa juu yake kiwe rahisi kusoma

Kufanya rangi za picha ziwe sawa

Fanya picha za timu au gani nyeusi-nyeupe au sepia ili iwe sawa

Kuamua nambari na picha unayotumia

Tumia picha unayotumia halisi na kuamua nambari za kuvuta macho na vintage

Kurekebisha picha kwa ajili ya hali ya giza

Kuamua nambari za kupunguza mwangaza na kontrasti ili picha isiweze kuumiza macho juu ya background nyeusi

Ujumbe wa Msingi

Kazi na vitengo vya filter

Sifa ya filter ya CSS ni sifa inayofanya kazi za blur, sepia, na kadhalika kwa picha au elementi, ambapo kazi huandikwa kwa kutenganisha na nafasi.

px (pikseli)：Kazi ya blur ni kazi ambayo hubainisha kipenyo cha blur kwa px; ikiwa utabainisha px 4, rangi itakufa katika eneo la radius ya pikseli 4.
% (asilimia)：Kazi za brightness na sepia ni kazi ambazo hubainisha nguvu ya athari kwa %; kwa brightness, 100% ni mwangaza asili, na 120% ni mwangaza wenye ongezeko la 20%.
deg (digrii)：Kazi ya hue-rotate ni kazi ambayo hubainisha digrii za kuzunguka rangi kwenye chakra ya rangi kwa deg; ikiwa utabainisha deg 180, rangi itakwenda upande wa nyingine wa chakra.

Kwa nini matokeo yanabadilika na mpangilio wa uandishi

Kazi zilizoandiwa katika filter hutumiwa kutoka kushoto kwenda kulia, na athari inayofuata hutumiwa kwa matokeo ya athari ya awali, kwa hivyo matokeo yanaweza kubadilika wakati mpangilio unapobadilika. Kwa mfano, ikiwa utafanya nyeusi-nyeupe kwanza kisha sepia, rangi ya kahawia itabaki; lakini ikiwa utafanya sepia kwanza kisha nyeusi-nyeupe, rangi ya kahawia itapotea. Katika zana hii, mpangilio wa matumizi umebainishwa, lakini unaweza kubadilisha mpangilio kwa kurekebisha kanuni ya CSS iliyotengenezwa.

Tofauti na backdrop-filter

Filter na backdrop-filter ni sifa ambazo zinaweza kutumia kazi sawa, lakini lengo la athari ni tofauti.

filter：Filter ni sifa inayofanya athari kwa elementy yenyewe (picha, maandishi, nk).
backdrop-filter：Backdrop-filter ni sifa inayofanya athari kwa sehemu inayoonekana nyuma ya elementi, inayotumiwa kwa mtindo kama glasi iliyokatika.