🎚️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 అనేది నిర్దేశించిన ఎలిమెంట్ వెనుక కనిపించే భాగానికి ఎఫెక్ట్‌ను వేసే ప్రాపర్టీ, ఫ్రాస్టెడ్ గ్లాస్ వంటి ప్రదర్శనలకు ఉపయోగిస్తారు.