CSS box-shadow එකක් සාදාගෙන කේතය කොපි කරගන්නේ කෙසේද?

සජීවී පෙරදසුන බලමින් x සහ y offset, blur, spread, වර්ණය සහ Opacity සඳහා වන ස්ලයිඩර් සකසන්න. ඉන්පසු CSS ප්රතිදානයේ ඇති පිටපත් කරන්න මත ක්ලික් කරන්න. ඔබට මෘදු, දිලිසීම හෝ Material 8 වැනි පූර්ව සකසීම් වලින් ද ආරම්භ කළ හැකිය.

එක් අංගයක් මත සෙවනැලි කිහිපයක් එක මත එක තැබිය හැකිද?

ඔව්. තවත් ස්තර එකතු කිරීමට + තවත් සෙවනැලි ස්තරයක් එකතු කරන්න ඔබන්න, ඉන්පසු ඒවායේ අනුපිළිවෙල වෙනස් කිරීමට, එක් එක් ස්තරය සඟවන්න හෝ ඉවත් කරන්න හැකිය. ස්තර තනි box-shadow අගයක් ලෙස කොමා මඟින් වෙන් කර සම්බන්ධ කෙරේ.

අභ්යන්තර සෙවනැල්ලක් (inset shadow) සාදා ගන්නේ කෙසේද?

ස්තරයක් තෝරා අභ්යන්තර සෙවනැල්ල සක්රිය කරන්න, නැතහොත් අභ්යන්තර පූර්ව සැකසුම යොදන්න. එවිට ප්රතිදානයට එම ස්තරය සඳහා inset යතුරුපදය ඇතුළත් වේ.

සාමාන්ය CSS වෙනුවට Tailwind පන්තියක් ලබා ගත හැකිද?

ඔව්. CSS ප්රකාශනයට අමතරව, මෙම මෙවලම මඟින් හිස්තැන් වෙනුවට යටි ඉරි යෙදූ shadow-[...] ආකාරයේ Tailwind අත්තනෝමතික-අගය පන්තියක් ප්රතිදානය කරයි, එය ඔබගේ කේතයට කෙලින්ම ඇලවිය හැක.

ස්ලයිඩර් වලට වඩා පහසුවෙන් සෙවනැල්ලේ පිහිටීම සැකසීමට ක්රමයක් තිබේද?

ඔව්. සක්රිය ස්තරයේ සෙවනැල්ල චලනය කිරීමට පෙරදසුන් පෙට්ටිය ඩ්රැග් කරන්න, සහ වඩාත් සියුම් පාලනයක් සඳහා Shift ඔබාගෙන සිටින්න. සෙවනැල්ල ඔබේ නිර්මාණයේ දිස්වන ආකාරය බැලීමට පෙරදසුන් පසුබිම සහ පෙට්ටියේ වර්ණය වෙනස් කිරීමටද හැකිය.

මෙය සැබැවින්ම නොමිලේද?

ඔව්. සෑම මෙවලමක්ම ගිණුමක් හෝ ක්රෙඩිට් කාඩ්පතක් නොමැතිව නොමිලේ භාවිත කළ හැක. ක්රියාවලිය අපගේ සේවාදායක වෙනුවට ඔබගේම උපාංගය මත ක්රියාත්මක වන අතර, මෙය නොමිලේ පවත්වාගෙන යාමට හැකි වන්නේ එබැවිනි.

ජංගම දුරකථනයේ ක්රියා කරයිද?

ඔව්. එය iOS සහ Android හි වත්මන් ජංගම බ්රවුසරවල ක්රියා කරයි, කිසිවක් ස්ථාපනය කිරීම අවශ්ය නැත.

🎨

නොමිලේ CSS Box Shadow සකසන්නා

සජීව පෙරදසුන, බහු-ස්ථර ස්ථාපනය, වර්ණ picker, inset toggle සහ එක් ක්ලික් පිටපත් කිරීම සහිත CSS box-shadow දෘශ්‍ය නිර්මාතෘ. Material, neumorphism සහ glow presets ඇතුළත් ය.

ඔබේ බ්‍රවුසරයේ ක්‍රියා කරයිලියාපදිංචි වීමක් නැත, පොප්-අප් නැතලොගිනය අවශ්‍ය නැතසදාකාලිකව නොමිලේ

load වූ පසු offline ක්‍රියා කරයි

පෙරදසුන් පසුබිම

සක්‍රීය ස්තරයේ සෙවනැල්ල ස්ථානගත කිරීමට පෙට්ටිය ඇදගෙන යන්න - සිහින් පාලනයක් සඳහා Shift තබා ගන්න

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

පූර්ව සකසීම්

පෙට්ටියේ වර්ණය

බෝඩර් අරය (16px)

x (0px)

y (4px)

බ්ලර් (12px)

ව්‍යාප්තිය (0px)

වර්ණය

අපාරදර්ශීතාව (15%)

අභ්‍යන්තර සෙවනැල්ල

පොදු භාවිත

කාඩ් UI ඉතිරුවටඩැෂ්බෝඩ්, නිෂ්පාදන ගෙලින සහ ඩැෂ්බෝඩ් සඳහා පිරිසිදු කාඩ් ඉතිරුවට ගිණුම කරන්න.
බටන ඒයිස් බිමසැබෑ සිතුවම ගිණුම සහ බිම සිතුවම නිර්ණයිතයි බටන ඉතිරුවට ගිණුම කරන්න.
Neumorphism Soft UIයුගල ෙහි + ඉතිරුවේ ඉතිරුවට සහිත සහිත UI neumorphism දෙස නිර්මාණය කරන්න.
ඉතිරුවේ සහ Popover ඉතිරුවටසිතුවම සිතුවම හා ඩ්‍රොපඩවුන සඳහා ඉතිරුවෙන් හසු දෙස ඉතිරිය ඉතිරිය.
Glow සහ Focus Ring ආචරණදීප්තිමත් උච්චාරණ ආචරණ, focus rings සහ neon-ශෛලියේ highlights සාදන්න.

එය ක්‍රියා කරන්නේ කෙසේද

box-shadow උත්පාදකය සම්පූර්ණයෙන්ම client-side React මෙවලමකි — සර්වරයක්, පුස්තකාලයක් නැත. එය state එකේ shadow layer objects ලැයිස්තුවක් තබා, සෑම වෙනසකදීම අතින් ලියන ලද rgba() formatter එකක් භාවිතයෙන් වලංගු CSS box-shadow strings එකලස් කර, බ්‍රවුසරයේම rendering එන්ජිම ප්‍රතිඵලය ක්ෂණිකව ඇඳින React ගේ style prop හරහා preview element එකකට කෙලින්ම යොදයි.

1
Layer parameters formatter එකට සපයයි
සෑම shadow layer එකක්ම x/y offsets, blur, spread, hex color එකක්, සහ opacity අගයක් ගබඩා කරයි. සෑම වෙනසකදීම, කුඩා shadowToCss ශ්‍රිතයක් regex එකකින් hex color එක RGB components වලට පරිවර්තනය කර, rgba() string එක එකලස් කරයි — උදාහරණයක් ලෙස, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). layers කිහිපයක් comma වලින් සම්බන්ධ කෙරේ.
2
බ්‍රවුසරය සජීවී පෙරදසුන නිරූපණය කරයි
එකලස් කළ string එක JSX තුළ කෙලින්ම div element එකක boxShadow style property එකට පවරනු ලැබේ. React DOM attribute එක යාවත්කාලීන කරන අතර, බ්‍රවුසරයේ CSS එන්ජිම වහාම shadow එක paint කරයි — canvas එකක් හෝ WebGL එකක් සම්බන්ධ නොවේ, native CSS rendering පමණි.
3
Drag-to-position Pointer Events API භාවිතා කරයි
preview box එක ක්ලික් කර drag කිරීම element එකේ setPointerCapture ඇමතුම් කර, පසුව active layer එකේ x සහ y offsets තථ්‍ය-කාලීනව යාවත්කාලීන කිරීමට onPointerMove deltas track කරයි. Shift තබාගැනීම සියුම් ස්ථානගත කිරීම සඳහා 0.25x scale factor එකක් යොදයි.
4
ප්‍රතිදානය clipboard වෙත පිටපත් කෙරේ
මෙවලම එකම layer දත්තවලින් ප්‍රතිදාන ආකෘති දෙකක් නිපදවයි: සම්මත CSS box-shadow ප්‍රකාශනයක්, සහ Tailwind ගේ syntax නීති අනුව hiස්තැන් underscores වලින් ආදේශ කරන Tailwind arbitrary-value class එකක් (shadow-[...]). එක්-ක්ලික් පිටපත් කිරීම navigator.clipboard.writeText භාවිතා කරයි.