CSS ფონის ნიმუშების გენერატორი

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

CSS-ს შეუძლია დახატოს განმეორებადი ნიმუშები სურათის ფაილების გარეშე გრადიენტების გამოყენებით — radial-gradient() და linear-gradient() — როგორც background-image, ელემენტზე პატარა background-size-თან ერთად, რათა გრადიენტი ერთფეროვნად მეორდეს. წერტილოვანი ნიმუშები იყენებენ repeating radial-gradient-ს, ზოლები და ჭადრაკის დაფები იყენებენ განმეორებად ან შრეებად linear-gradient()-ს, ხოლო ბადის ხაზები იყენებენ ორ გადამფარავ linear-gradient() ხაზს.

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

წყარო: CSS Images Module Level 3, W3C — განსაზღვრავს repeating-linear-gradient()-ს და repeating-radial-gradient()-ს, ფუნქციებს, საიდანაც აგებულია ეს ნიმუშები.

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

• სურათის ფაილების და HTTP მოთხოვნების გარეშე — ნიმუში წმინდა CSS-ია და მყისიერად ჩნდება ნებისმიერ გარჩევადობაზე, მათ შორის retina/მაღალი DPI ეკრანებზე.
• სრულად მორგებადი ფერი და დაშორება გრადიენტის სინტაქსის ხელით წერის ან ერთფეროვნების მათემატიკის გამოთვლის გარეშე.
• ცოცხალი გადახედვა აჩვენებს ზუსტ განმეორებად ნიმუშს, სანამ რაიმეს დააკოპირებთ.
• სუფთად მასშტაბირდება, რადგან ეს ვექტორული მათემატიკაა და არა რასტრული სურათი — ელემენტის ზომის შეცვლისას ბუნდოვანება არ ჩნდება.
• მთლიანად თქვენს ბრაუზერში მუშაობს — არაფერი, რასაც აკონფიგურირებთ, არსად იტვირთება.
• უფასოა, რეგისტრაციის გარეშე, მუშაობს მობილურზეც.

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

1. აირჩიეთ ნიმუშის ტიპი: წერტილოვანი ნიმუში, დიაგონალური ზოლები, ჭადრაკის დაფა ან ბადის ხაზები.
2. აირჩიეთ ნიმუშის ფერი და ფონის ფერი, რომელიც ჩანს ნიმუშის ფორმებს შორის/მიღმა.
3. მოარგეთ ზომის სლაიდერი, რომ წერტილები, ზოლები ან ბადის უჯრედები უფრო დიდი ან პატარა გახდეს — ეს ასევე აკონტროლებს, რამდენად მჭიდროდ მეორდება ნიმუში.
4. დააკოპირეთ გენერირებული CSS კოდი და ჩასვით იგი როგორც background-image (და background-size/background-position სადაც ნაჩვენებია) ნებისმიერი ელემენტისთვის.

მაგალითი

შეყვანა

ნიმუში: წერტილოვანი · ფერი: ლურჯი · ფონი: თეთრი · ზომა: 24px

შედეგი

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

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

როგორ არის აგებული თითოეული ნიმუში

• წერტილოვანი ნიმუში: radial-gradient() ხატავს ერთ პატარა შევსებულ წრეს, შემდეგ background-size ხდის მას განმეორებადად, როგორც წერტილების მოკირწყლულ ბადეს.
• დიაგონალური ზოლები: 45-გრადუსიანი repeating-linear-gradient() ცვლის ნიმუშის ფერსა და ფონის ფერს ფიქსირებული ინტერვალით.
• ჭადრაკის დაფა: ორი გადამფარავი 45-გრადუსიანი linear-gradient() შრე, ერთმანეთისგან ნახევარი ფილის ოდენობით გადანაცვლებული, ქმნის მონაცვლე ღია/მუქ კვადრატებს.
• ბადის ხაზები: ორი წვრილი linear-gradient() ხაზი — ერთი ჰორიზონტალური, ერთი ვერტიკალური — არჩეული დაშორებით მოკირწყლული ბადის შესაქმნელად, გრაფიკული ქაღალდის მსგავსად.

როდის გამოვიყენოთ CSS ნიმუშები სურათის ფაილების ნაცვლად

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

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

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

→ CSS Glassmorphism Generator · Border Radius Generator

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