सीएसएस फिल्टर्स म्हणजे काय?

CSS फिल्टर्स तुम्हाला एखाद्या घटकावर ब्लर किंवा कलर शिफ्टिंगसारखे ग्राफिकल इफेक्ट्स लागू करण्याची परवानगी देतात. ते सामान्यतः प्रतिमा, पार्श्वभूमी आणि बॉर्डर्ससाठी वापरले जातात.

बाह्य प्रतिमा संपादन साधनांची आवश्यकता न पडता दृश्य प्रभाव तयार करण्यासाठी, प्रतिमा वाढविण्यासाठी किंवा अद्वितीय डिझाइन घटक तयार करण्यासाठी फिल्टरचा वापर केला जाऊ शकतो.

समर्थित CSS फिल्टर गुणधर्म

• blur()- घटकावर गॉसियन ब्लर लागू करते.
• brightness()- घटकाची चमक समायोजित करते.
• contrast()- घटकाचा कॉन्ट्रास्ट समायोजित करते.
• grayscale()- घटकाला ग्रेस्केलमध्ये रूपांतरित करते.
• hue-rotate()- घटकाला रंगछटा फिरवते.
• invert()- घटकाचे रंग उलटे करते.
• opacity()- घटकाची अपारदर्शकता समायोजित करते.
• saturate()- घटकाला संतृप्त किंवा असंतृप्त करते.
• sepia()- घटकाला सेपियामध्ये रूपांतरित करते.

फिल्टर कसे लावायचे

या टूलद्वारे जनरेट केलेल्या CSS कोडचा वापर करून, तुम्ही कोणत्याही HTML घटकावर फिल्टर लागू करू शकता. ते कसे करावे ते येथे आहे:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

ब्राउझर सुसंगतता

क्रोम, फायरफॉक्स, सफारी, एज आणि ऑपेरा यासारख्या आधुनिक ब्राउझरमध्ये CSS फिल्टर्स मोठ्या प्रमाणात समर्थित आहेत. तथापि, इंटरनेट एक्सप्लोररसारखे जुने ब्राउझर त्यांना समर्थन देत नाहीत.