CSS Glassmorphism-ის გენერატორი

ეს ინსტრუმენტი აგებს CSS მბჟუტავი მინის (glassmorphism) ეფექტს ნახევრად გამჭვირვალე ფონისა და backdrop-filter: blur()-ის კომბინაციით — გადაათრიეთ სლაიდერები ფერადი გადახედვის ზემოთ, რომ ნახოთ, როგორ ბუნდოვნდება მინის ბარათის უკან მდებარე ყველაფერი, შემდეგ დააკოპირეთ CSS კოდი. ის ასევე გამოსცემს -webkit-backdrop-filter პრეფიქსს, რომელიც Safari-ს სჭირდება, რადგან backdrop-filter მას იქ კვლავ მოითხოვს.

რა არის ეს ხელსაწყო?

Glassmorphism არის ინტერფეისის სტილი, სადაც ელემენტი გამოიყურება როგორც მბჟუტავი მინა: ნახევრად გამჭვირვალე ფონი აძლევს საშუალებას მის უკან მდებარე ფერებს გამოჩნდნენ, ხოლო backdrop-filter: blur() ბუნდოვნებს ამ ფონს ისე, რომ ის მინასავით აღიქმება და არა უბრალო გამჭვირვალე პანელივით. თხელი, ნახევრად გამჭვირვალე ჩარჩო და მომრგვალებული კუთხეები ჩვეულებრივ ასრულებს ამ იერს.

ეს ინსტრუმენტი გაძლევთ საშუალებას ამ ეფექტის ვიზუალურად აშენების. გადახედვა მოთავსებულია მოძრავი გრადიენტული ფონის ზემოთ სპეციალურად იმისთვის, რომ ბუნდოვანება ჩანდეს — glassmorphism სწორად აღიქმება მხოლოდ მისი უკან ფერისა თუ დეტალების მქონე ფონზე, და არა უბრალო თეთრ გვერდზე. დაარეგულირეთ ფონის ფერის გამჭვირვალობა, ბუნდოვანების სიძლიერე, ჩარჩოს გამჭვირვალობა და კუთხის რადიუსი, შემდეგ დააკოპირეთ გენერირებული CSS კოდი.

წყარო: Filter Effects Module Level 1, W3C — განსაზღვრავს backdrop-filter-ს, თვისებას, რომელზეც ეს ეფექტია აგებული.

რატომ გამოვიყენო ის?

ცოცხალი გადახედვა ფერადი ანიმირებული ფონის ზემოთ, რათა ნამდვილად ნახოთ მბჟუტავი მინის ეფექტი, ცარიელ ფონზე ბუნდოვანების მნიშვნელობების გამოცნობის ნაცვლად.
სრული კონტროლი ფონის გამჭვირვალობაზე, backdrop-ის ბუნდოვანების სიძლიერეზე, ჩარჩოს გამჭვირვალობასა და border-radius-ზე ერთ ადგილას.
ავტომატურად გამოსცემს როგორც backdrop-filter-ს, ისე -webkit-backdrop-filter პრეფიქსს, რომ არ დაგავიწყდეთ Safari-ს მხარდაჭერა.
მთლიანად თქვენს ბრაუზერში მუშაობს — თქვენ მიერ დაკონფიგურირებული არაფერი ატვირთვება არსად.
უფასოა, რეგისტრაციის გარეშე, მუშაობს მობილურზეც.

როგორ გამოვიყენო

აირჩიეთ ფონის ფერი და დაარეგულირეთ მისი გამჭვირვალობა — დაბალი გამჭვირვალობა (10–25%) მინასავით აღიქმება; უფრო მაღალი გამჭვირვალობა უფრო მყარ, შეფერილ პანელს ჰგავს.
გაზარდეთ ბუნდოვანების სიძლიერე, რომ დააბუნდოვნოთ ელემენტის უკან მდებარე ყველაფერი — სწორედ ეს ქმნის რეალურად მბჟუტავი მინის იერს, თავად გამჭვირვალობისგან განსხვავებით.
დაარეგულირეთ ჩარჩოს გამჭვირვალობა, რომ დაამატოთ ნატიფი ღია კიდე, რაც ეხმარება მინის ბარათს, აღიქმებოდეს ცალკე ზედაპირად და არა ერწყმოდეს ფონს.
დააყენეთ border-radius მომრგვალებული კუთხეებისთვის — glassmorphism ბარათები თითქმის ყოველთვის მომრგვალებულია, იშვიათად მკვეთრკუთხოვანი.
დააკოპირეთ გენერირებული CSS კოდი და ჩასვით თქვენს სტილების ფურცელში. გახსოვდეთ, ელემენტს სჭირდება მის უკან ფერისა თუ ტექსტურის მქონე რაღაც — glassmorphism უხილავია ერთფეროვან, ბრტყელ ფონზე.

მაგალითი

შეყვანა

ფონი: თეთრი, 20% გამჭვირვალობით · ბუნდოვანება: 10px · ჩარჩოს გამჭვირვალობა: 30% · რადიუსი: 16px

შედეგი

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

მბჟუტავი მინის ბარათის კლასიკური სტილი, რომელსაც იყენებენ შესვლის პანელებში, ნავიგაციის ზოლებსა და დაშბორდის ვიჯეტებში ფერადი ან ფოტოფონის ზემოთ.

Safari-სა და ბრაუზერების მხარდაჭერა

backdrop-filter მხარდაჭერილია Chrome, Firefox, Edge და Safari-ის მიმდინარე ვერსიებში, თუმცა Safari-ს ისტორიულად ესაჭიროებოდა -webkit-backdrop-filter პრეფიქსი პრეფიქსის გარეშე თვისების გვერდით, რომ ბუნდოვანება აესახა — მის გარეშე Safari-ის ძველი ვერსიები უხმაუროდ უგულებელყოფენ ბუნდოვანებას და მხოლოდ ბრტყელ გამჭვირვალე ფონს აჩვენებენ. ამიტომ ეს ინსტრუმენტი ყოველთვის ორივე დეკლარაციას გამოსცემს.

ბრაუზერების თანამედროვე თავსებადობის დეტალებისთვის იხილეთ backdrop-filter-ის დოკუმენტაცია MDN-ზე: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

რატომ სჭირდება glassmorphism-ს რაღაც უკან

backdrop-filter ბუნდოვნებს მხოლოდ იმას, რაც ვიზუალურად ელემენტის უკან მდებარეობს — ფონურ სურათს, გრადიენტს, სხვა ფერად ელემენტს ან ქვემოთ სქროლვად კონტენტს. უბრალო თეთრ ან ერთფეროვან ფონზე დასაბუნდოვნებელი არაფერია, ამიტომ ეფექტი უხილავი ხდება და ელემენტი უბრალოდ ოდნავ შეფერილ, მომრგვალებულ ყუთს ჰგავს. glassmorphism-ის ელემენტები ყოველთვის განათავსეთ გრადიენტზე, ფოტოზე ან სხვაგვარად დეტალურ ფონზე, რომ ეფექტი სწორად აღიქმებოდეს.

სხვა CSS ეფექტებთან შეხამება

Glassmorphism ბარათები ხშირად აერთიანებენ ნატიფ box-shadow-ს ქვემოთ, დამატებითი სიღრმისთვის. გენერირეთ მბჟუტავი მინის CSS აქ, შემდეგ დაამატეთ რბილი ჩრდილი Box Shadow-ის გენერატორით და გამოიყენეთ ორივე დეკლარაცია ერთსა და იმავე ელემენტზე.

→ Box Shadow-ის გენერატორი · Border Radius-ის გენერატორი

ხშირად დასმული კითხვები

რატომ არ ჩანს მინის ეფექტი ჩემს გვერდზე?

backdrop-filter ბუნდოვნებს იმას, რაც ელემენტის უკან მდებარეობს. თუ თქვენი ელემენტი უბრალო თეთრ ან ერთფეროვან ფონზეა, იქ ვიზუალურად საინტერესო არაფერია დასაბუნდოვნებელი, ამიტომ ის უბრალოდ სუსტად შეფერილ ყუთს ჰგავს. განათავსეთ ის გრადიენტზე, სურათზე ან სხვა დეტალურ ფონზე, რომ მბჟუტავი მინის ეფექტი ჩანდეს.

საჭიროა თუ არა -webkit-backdrop-filter პრეფიქსი?

დიახ, თუ გსურთ ეფექტი საიმედოდ გამოისახოს Safari-ში. ეს ინსტრუმენტი ყოველთვის ერთად გამოსცემს როგორც სტანდარტულ backdrop-filter-ს, ისე -webkit- პრეფიქსიან ვერსიას, რადგან Safari-ს ისტორიულად პრეფიქსი სჭირდებოდა ბუნდოვანების გამოსაყენებლად.

რა განსხვავებაა ფონის გამჭვირვალობასა და ბუნდოვანებას შორის?

ფონის გამჭვირვალობა განსაზღვრავს, რამდენად ჩანს თქვენ მიერ არჩეული შეფერვის ფერი და რამდენად ჩანს მის უკან მდებარე ყველაფერი უცვლელად. ბუნდოვანება განსაზღვრავს, რამდენად არის ეს ხილული ფონი გაბუნდოვნებული/დარბილებული. Glassmorphism ორივეს ერთად იყენებს — გარკვეულ გამჭვირვალობასთან ერთად გარკვეულ ბუნდოვანებას — ცალკეულის ნაცვლად.

შემიძლია თუ არა backdrop-filter-ის ნებისმიერ ელემენტზე გამოყენება?

დიახ, მაგრამ ის მხოლოდ იმაზე მოქმედებს, რაც ვიზუალურად ამ ელემენტის უკან მდებარეობს გვერდის რენდერში, და არა ელემენტის საკუთარ შვილობილ ელემენტებზე. მას ასევე აქვს გარკვეული წარმადობითი ხარჯი ზოგიერთ მოწყობილობაზე, როცა ბევრ ელემენტზეა გამოყენებული ან ხშირად ანიმირებული, ამიტომ საუკეთესოა გამოყენება რამდენიმე გამორჩეული ინტერფეისის ზედაპირისთვის, როგორიცაა ბარათები, მოდალები ან ნავიგაციის ზოლები, ათობით პატარა ელემენტის ნაცვლად.

რატომ ჩანს ჩემი ჩარჩო ძლივს?

ამ ინსტრუმენტში ჩარჩო იყენებს ნახევრად გამჭვირვალე თეთრს, რომელიც ნატიფად არის ჩაფიქრებული — ღია კიდე, რომელიც ეხმარება მინის პანელს, აღიქმებოდეს ცალკე ზედაპირად მაგარი, გაუმჭვირვალე მოხაზულობის მსგავსად გამოჩენის გარეშე. აწიეთ ჩარჩოს გამჭვირვალობის სლაიდერი, თუ გსურთ უფრო თვალსაჩინო კიდე.