რა არის 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. თუმცა, ძველი ბრაუზერები, როგორიცაა Internet Explorer, მათ არ უჭერენ მხარს.