🎚️የCSS ፊልተር መፍጠሪያ

የfilter ተግባራትና መለኪያዎች

የCSS filter ንብረት የምስል ወይም የክፍል ገጽታ ላይ ውጤት የሚያስገኝ ንብረት ሲሆን፣ blur እና sepia የመሳሰሉ ተግባራትን በግማሽ ስፔስ ተለያይተው ይጻፋሉ።

• px (ፒክሰል)：blur ተግባር የብዥታውን ራዲየስ በpx የሚገልጽ ተግባር ሲሆን፣ 4px ሲገለጽ በ4 ፒክሰል ራዲየስ ውስጥ ቀለሞች ይዋሃዳሉ።
• % (በመቶኛ)：brightness እና sepia ተግባራት የውጤቱን ጥንካሬ በ% የሚገልጹ ተግባራት ሲሆኑ፣ brightness ተግባር ላይ 100% ዋናው ብርሃንነት ሲሆን፣ 120% በ20% የበለጠ ብሩህ ያደርገዋል።
• deg (ዲግሪ)：hue-rotate ተግባር በቀለም ክብ ላይ ቀለምን የሚያዞርበትን አንግል በdeg የሚገልጽ ተግባር ሲሆን፣ 180deg ሲገለጽ ቀለሙ ወደ ተቃራኒው ጎን ይዞራል።

ለምን የመጻፊያ ቅደም ተከተል ውጤቱን ይቀይራል

በfilter ውስጥ የተቀመጡ ተግባራት ከግራ ወደ ቀኝ በቅደም ተከተል ይተገበራሉ፣ የቀደመው ውጤት ከተከፈለ በኋላ ቀጣዩ ውጤት ስለሚተገበር፣ የቅደም ተከተል ሲቀየር ገጽታውም ሊቀየር ይችላል። ለምሳሌ ጥቁርና ነጭ ካደረጉ በኋላ ሴፒያ ካደረጉ ቡናማነት ይቀራል፣ ሴፒያ ካደረጉ በኋላ ጥቁርና ነጭ ካደረጉ ቡናማነት ይጠፋል። በዚህ መሣሪያ የመተግበሪያ ቅደም ተከተል ተወስኗል፣ ነገር ግን የተፈጠረውን የCSS ኮድ በማስተካከል ቅደም ተከተሉን መቀየር ይችላሉ።

ከbackdrop-filter ያለው ልዩነት

filter እና backdrop-filter ተመሳሳይ ተግባራትን የሚጠቀሙ ንብረቶች ናቸው፣ ነገር ግን ውጤቱ የሚተገበርበት ነገር ይለያያል።

• filter：filter የተገለጸውን ክፍል ራሱ (ምስል ወይም ጽሑፍ ወዘተ) ገጽታ ላይ ውጤት የሚያስገኝ ንብረት ነው።
• backdrop-filter：backdrop-filter የተገለጸው ክፍል ከኋላ የሚታየውን ክፍል ላይ ውጤት የሚያስገኝ ንብረት ሲሆን፣ እንደ ደበዛዛ መስታወት ያለ አገላለጽ ለማሳየት ይጠቅማል።