CSS-ში box-shadow თვისების გამოყენება ერთ-ერთი ძირითადი გზაა ვებ-ელემენტების ვიზუალური იერარქიის, სიღრმისა და რეალისტური ტექსტურის შესაქმნელად. ჩრდილების (Box Shadow) გენერატორი საშუალებას გაძლევთ ინტერაქტიულად მართოთ ჩრდილის პარამეტრები სლაიდერების მეშვეობით, შექმნათ რთული მრავალშრიანი ეფექტები და მიიღოთ მზა კოდი პროექტებში გამოსაყენებლად.
ყოველი ჩრდილი მუშავდება თქვენს ბრაუზერში. თქვენ მიერ მითითებული მონაცემები BroBroGo-ზე არ იტვირთება, რაც უზრუნველყოფს მონაცემთა ლოკალურ დამუშავებას უშუალოდ თქვენს მოწყობილობაზე.
როგორ მუშაობს box-shadow თვისება CSS-ში
ვებ-დიზაინში ელემენტის ჩრდილი აღიწერება რამდენიმე პარამეტრით, რომლებიც განსაზღვრავენ მის მდებარეობას, სიმკვეთრეს, ზომასა და ფერს. ხელსაწყო საშუალებას გაძლევთ რეალურ დროში მართოთ თითოეული ეს მახასიათებელი:
- ჰორიზონტალური წანაცვლება: განსაზღვრავს ჩრდილის გადანაცვლებას X ღერძზე. სლაიდერის დიაპაზონია -50px-დან 50px-მდე. დადებითი მნიშვნელობა ჩრდილს აჩენს მარჯვნივ, ხოლო უარყოფითი — მარცხნივ.
- ვერტიკალური წანაცვლება: მართავს ჩრდილის გადანაცვლებას Y ღერძზე. სლაიდერის დიაპაზონია -50px-დან 50px-მდე. დადებითი მნიშვნელობა ჩრდილს წევს ქვემოთ, ხოლო უარყოფითი — ზემოთ.
- დრესვა (Blur): არბილებს ჩრდილის კიდეებს. პარამეტრი მერყეობს 0px-დან (აბსოლუტურად მკვეთრი კიდეები) 100px-მდე (მაქსიმალურად გაფანტული ჩრდილი).
- გავრცელება (Spread): ზრდის ან ამცირებს ჩრდილის ფართობს მის დრესვამდე. სლაიდერის დიაპაზონია -50px-დან 50px-მდე. უარყოფითი მნიშვნელობა ჩრდილს შიგნით სწევს, რაც სასარგებლოა მჭიდრო, ახლო ჩრდილების შესაქმნელად.
- ჩრდილის ფერი და გაუმჭვირვალობა: ფერის ამრჩევი და გაუმჭვირვალობის სლაიდერი საშუალებას გაძლევთ დაარეგულიროთ ჩრდილის ტონი და გამჭვირვალობის ხარისხი, რათა ის ბუნებრივად შეერწყას ფონს.
შიდა ჩრდილი (Inset) და მისი ეფექტები
სტანდარტული ჩრდილი ვრცელდება ელემენტის საზღვრებს გარეთ, რაც ქმნის შთაბეჭდილებას, რომ ელემენტი ფონის ზემოთაა აწეული. როდესაც აქტიურდება ოფცია შიდა ჩრდილი (Inset), ჩრდილის მიმართულება იცვლება და ის თავსდება ელემენტის შიგნით.
ეს პარამეტრი ფუნდამენტურად ცვლის ვიზუალურ აღქმას. შიდა ჩრდილი გამოიყენება იმისთვის, რომ ელემენტს მიეცეს ჩაღრმავებული, ჩაწნეხილი იერი. ეს ეფექტი ხშირად გამოიყენება ფორმის აქტიური ველების (input), დაჭერილი ღილაკების ან ინტერფეისის სხვადასხვა ჩაღრმავებული პანელების დიზაინის დროს.
სიღრმის შექმნა მრავალშრიანი ჩრდილებით
რეალურ სამყაროში სინათლის წყაროები იშვიათად ქმნიან მხოლოდ ერთ მარტივ ჩრდილს. ბუნებრივი და რბილი ეფექტის მისაღებად დიზაინერები ხშირად იყენებენ ჩრდილების რამდენიმე ფენის ერთმანეთზე დადებას.
ინსტრუმენტი მხარს უჭერს მრავალშრიან სტრუქტურას:
- ინტერფეისში წინასწარ გენერირებულია ხუთი ფენა. პირველ ფენას აქვს ნაგულისხმევი მნიშვნელობები: ჰორიზონტალური წანაცვლება
0, ვერტიკალური წანაცვლება8, დრესვა (Blur)24, გავრცელება (Spread)-4და 18%-იანი გამჭვირვალობის მქონე შავი ფერი. დანარჩენი ოთხი ფენა თავდაპირველად დამალულია. - ღილაკი ფენის დამატება საშუალებას გაძლევთ შექმნათ ახალი ჩრდილის ფენა ნაგულისხმევი პარამეტრებით.
- ღილაკი ფენის წაშლა აშორებს მონიშნულ ფენას.
როდესაც გამოიყენება რამდენიმე ფენა, გენერირებული CSS კოდი ავტომატურად აერთიანებს მათ მძიმით გამოყოფილი მნიშვნელობების სახით, რაც ბრაუზერს საშუალებას აძლევს მოახდინოს მათი ერთდროული ვიზუალიზაცია ერთ ელემენტზე.
ჩრდილის პარამეტრების გავლენა ვიზუალურ აღქმაზე
სხვადასხვა პარამეტრების კომბინაციით შესაძლებელია კონკრეტული ვიზუალური ეფექტების მიღწევა:
| ეფექტის ტიპი | წანაცვლება (X/Y) | დრესვა (Blur) | გავრცელება (Spread) | გამოყენების შემთხვევა |
|---|---|---|---|---|
| მჭიდრო, მკაცრი ჩრდილი | მცირე (მაგ. 1px - 3px) | დაბალი (0px - 4px) | 0px ან უარყოფითი | ბრტყელი (Flat) დიზაინის ელემენტები, მცირე ღილაკები |
| რბილი, ფართო ჩრდილი | საშუალო (მაგ. 5px - 15px) | მაღალი (20px - 50px) | უარყოფითი (მაგ. -5px) | ჰაეროვანი ბარათები, კონტეინერები, რომლებიც მკვეთრად უნდა გამოიყოს ფონისგან |
| ჩაწნეხილი (Pressed) ეფექტი | შიდა ჩრდილი (Inset) აქტიურია | საშუალო (5px - 10px) | 0px ან მცირე დადებითი | ფორმის აქტიური ტექსტური ველები, დაჭერილი ღილაკები |
უარყოფითი გავრცელება (Spread) განსაკუთრებით მნიშვნელოვანია ფართო ჩრდილების შექმნისას. ის საშუალებას იძლევა ჩრდილის კიდეები შეიკუმშოს, რაც თავიდან აცილებს ელემენტის გარშემო ჭუჭყიანი ან ზედმეტად მუქი კონტურის გაჩენას და ინარჩუნებს ვიზუალურ სისუფთავეს.
ხშირად დასმული კითხვები
რას მართავს წანაცვლება, დრესვა და გავრცელება?
წანაცვლება (offset) ჩრდილს გადააადგილებს მარცხნივ/მარჯვნივ და ზემოთ/ქვემოთ, დრესვა (blur) არბილებს მის კიდეებს, ხოლო გავრცელება (spread) ზრდის ან ამცირებს მას დრესვამდე. უარყოფითი გავრცელება ჩრდილს შიგნით სწევს, რაც სასარგებლოა მჭიდრო, ახლო ჩრდილებისთვის.
რას აკეთებს inset ოფცია?
ჩვეულებრივი ჩრდილი ელემენტის გარეთ ეცემა, როგორც სინათლე აწეული ბარათის უკან. Inset კი მას შიგნით აბრუნებს, რის გამოც ელემენტი ჩაწნეხილი ჩანს — ეს მოსახერხებელია ჩაღრმავებული ველებისა თუ დაჭერილი ღილაკებისთვის.
რატომ უნდა გამოვიყენო ჩრდილის რამდენიმე ფენა?
ერთი ჩრდილი გარკვეული ზომის შემდეგ ბრტყლად გამოიყურება. რეალური სიღრმის ეფექტი ხშირად აერთიანებს მკვეთრ, მუქ ჩრდილს რბილ და უფრო ფართო ჩრდილთან — დაამატეთ მეორე ფენა და დაარეგულირეთ თითოეული დამოუკიდებლად ამ ეფექტის მისაღებად.