CSS ფილტრის გენერატორი
შექმენით და ვიზუალიზაცია გაუკეთეთ CSS-ის საკუთარი სურათების ფილტრებს
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
სტილუსის CSS-ში გადამყვანი
გარდაქმენით თქვენი SCSS კოდი CSS-ად. სწრაფად, მარტივად და უსაფრთხოდ.
შექმენით იდეალური Flexbox განლაგებები
ვიზუალიზაცია გაუკეთეთ, პერსონალიზირება გაუკეთეთ და გენერირება გაუკეთეთ CSS flexbox კოდს ჩვენი ინტუიციური გადათრევის და ჩაშვების ინტერფეისის გამოყენებით.
CSS-ის გალამაზება
დააფორმატეთ და გაალამაზეთ თქვენი CSS კოდი პროფესიონალური სიზუსტით
SHA-512/256 ჰეშის კალკულატორი
სწრაფად და მარტივად შექმენით SHA-512/256 ჰეშები
Pantone-დან HSV-მდე
ზუსტი ფერის კონტროლისთვის, Pantone-ის ფერების HSV მნიშვნელობებად გადაქცევა
უფასო CSS ღილაკების გენერატორი
Erstellen Sie ansprechende, საპასუხო Schaltflächen für Ihre ვებსაიტი. Wählen Sie aus über 70 vorgefertigten Stilen oder passen Sie Ihre eigenen mit unseren erweiterten Steuerelementen an.