Preview
CSS Code
ფილტრის მართვის საშუალებები
პოპულარული ფილტრები
Vintage
Neon Glow
Polaroid
ვინტაჟური ფილმი
ციფრული ხელოვნება
როგორ გამოვიყენოთ CSS ფილტრები
რა არის CSS ფილტრები?
CSS ფილტრები საშუალებას გაძლევთ ელემენტზე გამოიყენოთ გრაფიკული ეფექტები, როგორიცაა დაბინდვა ან ფერის შეცვლა. ისინი ხშირად გამოიყენება სურათებისთვის, ფონებისა და საზღვრებისთვის.
ფილტრების გამოყენება შესაძლებელია ვიზუალური ეფექტების შესაქმნელად, სურათების გასაუმჯობესებლად ან უნიკალური დიზაინის ელემენტების შესაქმნელად გარე გამოსახულების რედაქტირების ხელსაწყოების საჭიროების გარეშე.
მხარდაჭერილი CSS ფილტრის თვისებები
-
blur()- ელემენტზე გაუსის დაბინდვას ახდენს. -
brightness()- არეგულირებს ელემენტის სიკაშკაშეს. -
contrast()- ელემენტის კონტრასტის რეგულირება. -
grayscale()- გარდაქმნის ელემენტს ნაცრისფერ ფერებში. -
hue-rotate()- ელემენტზე ფერის როტაციას იყენებს. -
invert()- ელემენტის ფერების ინვერსია. -
opacity()- არეგულირებს ელემენტის გამჭვირვალობას. -
saturate()- აჯერებს ან ამცირებს ელემენტის გაჯერებას. -
sepia()- ელემენტს სეფიად გარდაქმნის.
როგორ გამოვიყენოთ ფილტრები
ამ ხელსაწყოს მიერ გენერირებული CSS კოდის გამოყენებით, შეგიძლიათ ფილტრები ნებისმიერ HTML ელემენტზე გამოიყენოთ. აი, როგორ:
1. აირჩიეთ ელემენტი
აირჩიეთ HTML ელემენტი, რომელზეც გსურთ ფილტრის გამოყენება. ეს შეიძლება იყოს სურათი, ფონი ან ნებისმიერი სხვა ელემენტი.
2. დაამატეთ კლასი ან ID
თუ ელემენტს უკვე არ აქვს კლასი ან ID, დაამატეთ ის, რათა CSS-ით მიზნობრივი შერჩევა უფრო ადვილი იყოს.
3. ფილტრის გამოყენება
გამოიყენეთ CSSfilterთქვენს სტილის ფურცელში ან ჩასმულ სტილში პარამეტრის გამოყენება გენერირებული ფილტრის გამოსაყენებლად.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. რამდენიმე ფილტრის გაერთიანება
შეგიძლიათ გააერთიანოთ რამდენიმე ფილტრის ფუნქცია მათი ერთმანეთის მიყოლებით, ინტერვალებით გამოყოფილი ჩამოთვლით.
filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);ბრაუზერის თავსებადობა
CSS ფილტრები ფართოდ არის მხარდაჭერილი თანამედროვე ბრაუზერებში, მათ შორის Chrome, Firefox, Safari, Edge და Opera. თუმცა, ძველი ბრაუზერები, როგორიცაა Internet Explorer, მათ არ უჭერენ მხარს.
Related Tools
შექმენით იდეალური Flexbox განლაგებები
ვიზუალიზაცია გაუკეთეთ, პერსონალიზირება გაუკეთეთ და გენერირება გაუკეთეთ CSS flexbox კოდს ჩვენი ინტუიციური გადათრევის და ჩაშვების ინტერფეისის გამოყენებით.
სტილუსის CSS-ში გადამყვანი
გარდაქმენით თქვენი SCSS კოდი CSS-ად. სწრაფად, მარტივად და უსაფრთხოდ.
CSS-ის გალამაზება
დააფორმატეთ და გაალამაზეთ თქვენი CSS კოდი პროფესიონალური სიზუსტით
ტემპერატურის ერთეულების გადამყვანი
ტემპერატურის სხვადასხვა ერთეულებს შორის ზუსტი გადაყვანა თქვენი სამეცნიერო და ყოველდღიური საჭიროებებისთვის
HSV-დან CMYK-მდე
ბეჭდვის დიზაინისთვის HSV ფერის კოდების CMYK მნიშვნელობებად გადაქცევა
PayPal-ის საკომისიოს კალკულატორი
გამოთვალეთ PayPal-ის საკომისიო თქვენი ტრანზაქციებისთვის ჩვენი მარტივი კალკულატორის გამოყენებით.