CSS ਫਿਲਟਰ ਕੀ ਹਨ?

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 ਫਿਲਟਰ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਵਿਆਪਕ ਤੌਰ 'ਤੇ ਸਮਰਥਿਤ ਹਨ, ਜਿਨ੍ਹਾਂ ਵਿੱਚ Chrome, Firefox, Safari, Edge, ਅਤੇ Opera ਸ਼ਾਮਲ ਹਨ। ਹਾਲਾਂਕਿ, ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਵਰਗੇ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ ਇਹਨਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ ਹਨ।