მთავარ შინაარსზე გადასვლა
LibraTool logoLibraTool

CSS Box Shadow გენერატორი უფასოდ

ვიზუალური ინსტრუმენტი CSS box-shadow-ის შესაქმნელად პირდაპირი გადახედვით, მრავალ-ფენიანი დაწყობით, ფერის ამომრჩეველით, inset გადართვით და ერთი დაჭერის კოპირებით. მოიცავს Material, neumorphism და glow წინასწარ დაყენებებს.

მუშაობს ოფლაინ ჩატვირთვის შემდეგ
წინასწარი ხედი ფონი

გადაიტანეთ ყუთი აქტიური ფენის ჩრდილის პოზიციონირებისთვის - დაჭერით Shift წვრილი კონტროლისთვის

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

შაბლონები

გავრცელებული გამოყენება

  • Card UI Shadowsასოც elegant ბარათი ჩრდილი აკრეფილი, პროდუქტი grid და აკრეფილი.
  • Button Press Effectsასოც ღილაკი ჩრდილი რომელი ზღვარი რიალური სიღრმე და ხელი კვანძი.
  • Neumorphism Soft UIშექმენით რბილი UI-ის ნეუმორფიზმის სტილი წყვილი ღია და მუქი ჩრდილებით.
  • Modal & Popover Shadowsშექმნის აწეული, მათი განცდა უცხო კადრი და მოწერილი.
  • Glow & Focus Ring Effectsშექმენით ღრმა ეფექტები, ფოკუსირების რგოლი და ნეონის სტილის გამოჟამვა.

როგორ მუშაობს

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

  1. 1
    ფენის პარამეტრები კვებავს ფორმატერს
    თითოეული ჩრდილის ფენა ინახავს x/y წანაცვლებებს, ბუნდოვანებას, გავრცობას, თექვსმეტობით ფერს და გამჭვირვალობის მნიშვნელობას. ყოველ ცვლილებაზე, პატარა shadowToCss ფუნქცია გარდაქმნის თექვსმეტობით ფერს RGB კომპონენტებად რეგულარული გამოსახულებით, შემდეგ აწყობს rgba() სტრიქონს — მაგალითად, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). რამდენიმე ფენა მძიმეებით ერთიანდება.
  2. 2
    ბრაუზერი რენდერს ცოცხალ გადახედვას
    აწყობილი სტრიქონი ენიჭება div ელემენტის boxShadow სტილის თვისებას პირდაპირ JSX-ში. React ანახლებს DOM ატრიბუტს, და ბრაუზერის CSS ძრავი მაშინვე ხატავს ჩრდილს — canvas ან WebGL არ არის ჩართული, მხოლოდ ბუნებრივი CSS რენდერი.
  3. 3
    გადათრევით-პოზიციონირება იყენებს Pointer Events API-ს
    გადახედვის ყუთზე დაწკაპუნება და გადათრევა setPointerCapture-ს იძახებს ელემენტზე, შემდეგ თვალყურს ადევნებს onPointerMove-ის ცვლილებებს, აქტიური ფენის x და y წანაცვლების რეალურ დროში განსაახლებლად. Shift-ის დაჭერა 0.25x მასშტაბის კოეფიციენტს იყენებს ზუსტი პოზიციონირებისთვის.
  4. 4
    გამომავალი კოპირდება ბუფერში
    ხელსაწყო ერთი ფენის მონაცემებიდან ორ გამომავალ ფორმატს ქმნის: სტანდარტულ CSS box-shadow დეკლარაციას, და Tailwind თვითნებური-მნიშვნელობის კლასს (shadow-[...]), სადაც ხარვეზები ხაზგასმებით იცვლება Tailwind-ის სინტაქსის წესების მიხედვით. ერთი-დაწკაპუნებით კოპირება navigator.clipboard.writeText-ს იყენებს.

დაკავშირებული ინსტრუმენტები

◖

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

ვიზუალურად დიზაინი გაუკეთეთ მომრგვალებულ კუთხეებს თითოეული კუთხის დამოუკიდებელი კონტროლით. მხარს უჭერს ელიფსური X/Y სინტაქსს ორგანული blob ფორმებისთვის.

სცადე
🟦

CSS Grid შემქმნელი

ვიზუალურად დაამუშავეთ CSS grid — ტრეკები, ერთეულები და უფსები — და დააკოპიეთ გენერირებული CSS და HTML.

სცადე
↔️

CSS Flexbox შემქმნელი

აკეთეთ ექსპერიმენტი flex მიმართულებით, მოტეხვით, justify და align ცოცხლი ელემენტებით — და დააკოპიეთ CSS.

სცადე

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