Box Shadow გენერატორი

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

box-shadow არის CSS თვისება, რომელიც ხატავს ჩრდილს ელემენტის უკან (ან შიგნით). ხელით დაწერისას ის იღებს ხუთამდე მნიშვნელობას თანმიმდევრობით — ჰორიზონტალური წანაცვლება, ვერტიკალური წანაცვლება, ბუნდოვანების რადიუსი, გავრცობის რადიუსი და ფერი — პლუს არასავალდებულო inset საკვანძო სიტყვა, და ამ ყველაფრის აღრევა ან პირველივე მცდელობისას ზედმეტად სუსტი/ზედმეტად მძიმე შედეგის მიღება ადვილია.

ეს ხელსაწყო ამას პირდაპირ მანიპულირებად ხდის: გადაათრიეთ სლაიდერი, უყურეთ ჩრდილის ცვლილებას ცოცხალ წინასწარი ხედვის ყუთზე და დააკოპირეთ ზუსტი CSS კოდი, როცა შედეგი კარგად გამოიყურება. ფერის ამომრჩეველი გამჭვირვალობის სლაიდერთან ერთად ავტომატურად აგენერირებს სწორ rgba() მნიშვნელობას, რადგან გამჭვირვალე ჩრდილები, ჩვეულებრივ, უკეთესად გამოიყურება, ვიდრე სრულიად გაუმჭვირვალენი.

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

• ცოცხალი წინასწარი ხედვა მყისიერად განახლდება ნებისმიერი პარამეტრის შეცვლისას — ნახეთ ზუსტი ჩრდილი, სანამ კოდში გადაიტანთ.
• სრული კონტროლი X-წანაცვლებაზე, Y-წანაცვლებაზე, ბუნდოვანებაზე, გავრცობაზე, ფერსა და გამჭვირვალობაზე ერთ ადგილას.
• ერთი დაწკაპუნება ამატებს inset-ს ჩაზნექილი გარეგნობისთვის, მოცურავე ვარდნადი ჩრდილის ნაცვლად.
• გამოაქვს ჩასასმელად მზა CSS კოდი, სადაც ფერი უკვე გადაყვანილია rgba()-ში თქვენ მიერ არჩეული გამჭვირვალობით.
• მთლიანად თქვენს ბრაუზერში მუშაობს — არაფერი, რასაც აკონფიგურირებთ, არსად იტვირთება.
• უფასოა, რეგისტრაციის გარეშე, მუშაობს მობილურზეც.

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

1. დააყენეთ X და Y წანაცვლება ჩრდილის მდებარეობის დასადგენად — დადებითი მნიშვნელობები მას მარჯვნივ/ქვევით სწევს, უარყოფითი — მარცხნივ/ზევით.
2. გაზარდეთ ბუნდოვანების რადიუსი ჩრდილის კიდის დასარბილებლად; გაზარდეთ გავრცობა, რომ ჩრდილი თავად ელემენტზე დიდი გახდეს.
3. აირჩიეთ ფერი და დაარეგულირეთ გამჭვირვალობა — ყველაზე რეალისტური ჩრდილები იყენებენ 15–40% გამჭვირვალობას სუფთა შავის ნაცვლად.
4. მონიშნეთ 'inset', თუ გსურთ, ჩრდილი ელემენტის საზღვრის შიგნით გამოჩნდეს მის უკან ყოფნის ნაცვლად.
5. დააკოპირეთ გენერირებული CSS კოდი და ჩასვით თქვენს სტილების ფაილში.

მაგალითი

შეყვანა

წანაცვლება: 0px, 10px · ბუნდოვანება: 20px · გავრცობა: 0px · ფერი: შავი 35% გამჭვირვალობით

შედეგი

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

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

ერთი ჩრდილი vs. ფენებად დაწყობილი ჩრდილები

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

box-shadow-ის გავრცელებული ნიმუშები

• ბარათის მსუბუქი აწევა: მცირე წანაცვლება (0–4px), ზომიერი ბუნდოვანება (8–16px), შავი 10–20% გამჭვირვალობით.
• აწეული მოდალი/ჩამოსაშლელი მენიუ: უფრო დიდი წანაცვლება (4–10px) და ბუნდოვანება (20–30px), 20–35% გამჭვირვალობა ცურვის უფრო ძლიერი შეგრძნებისთვის.
• დაჭერილი/ჩაზნექილი ღილაკი: მონიშნეთ inset, გამოიყენეთ პატარა, „უარყოფითი“ შეგრძნების წანაცვლება და ზომიერი ბუნდოვანება, რომ ჩრდილი ჩაზნექილობად აღიქმებოდეს და არა აწევად.
• ფერადი ნათება: შავის ნაცვლად აირჩიეთ ბრენდის ფერი, აწიეთ გამჭვირვალობა 40–60%-მდე და ოდნავ გაზარდეთ გავრცობა ღილაკების გარშემო რბილი ნათების ეფექტისთვის.
• მკვეთრი/მკაცრი ჩრდილი: დააყენეთ ბუნდოვანება 0-ზე და გავრცობა 0-ზე მყარი, წანაცვლებული სილუეტისთვის, რბილი ჩრდილის ნაცვლად.

შერწყმა მომრგვალებულ კუთხეებთან

ჩრდილები და მომრგვალებული კუთხეები მუდმივად გამოიყენება ერთად — ბარათები, ღილაკები და მოდალები თითქმის ყოველთვის აერთიანებენ ორივეს. გამოიყენეთ Border Radius გენერატორი იმავე ელემენტის კუთხეების დასამრგვალებლად, შემდეგ გამოიყენეთ ორივე გენერირებული CSS დეკლარაცია ერთად.

→ Border Radius გენერატორი

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