CSS Box Shadow உருவாக்கி
CSS Box Shadow என்றால் என்ன?
CSS box-shadow பண்பு ஒரு உறுப்பின் சட்டகத்தைச் சுற்றி நிழல் விளைவுகளை சேர்க்கிறது. நிழல்களை இடமாற்றம், மங்கல், பரவல், வண்ணமிடல் மற்றும் inset (உள் நிழல்) ஆகியவற்றாக அமைக்கலாம். கோடியால் பிரிக்கப்பட்ட பல நிழல்களை வளமான விளைவுகளுக்காக அடுக்கலாம். இந்த உருவாக்கி சிக்கலான பல-அடுக்கு நிழல்களை காட்சி வழியில் உருவாக்கவும் நகலெடுக்க தயாரான CSS-ஐ கிளிப்போர்டுக்கு நகலெடுக்கவும் உங்களை அனுமதிக்கிறது.
Box Shadow உருவாக்கியை எப்படி பயன்படுத்துவது
-
நிழலை நிலைப்படுத்தவும் வடிவமைக்கவும் Offset X/Y, Blur மற்றும் Spread சறுக்கிகளை சரிசெய்யவும்.
-
நிழலின் வண்ணத்தை தேர்ந்தெடுக்க வண்ண மாதிரியில் கிளிக் செய்யவும், வெளிப்படைத்தன்மைக்கு Opacity சறுக்கியை பயன்படுத்தவும்.
-
உள் ஒளி அல்லது அழுத்திய விளைவை உருவாக்க 'Inset' மாற்றவும்.
-
பல நிழல்களை அடுக்க '+ அடுக்கு சேர்க்கவும்' கிளிக் செய்யவும்.
-
உருவாக்கப்பட்ட CSS-ஐ நகலெடுத்து உங்கள் ஸ்டைல்ஷீட்டில் ஒட்டவும்.
அடிக்கடி கேட்கப்படும் கேள்விகள்
box-shadow மற்றும் drop-shadow filter க்கு இடையே என்ன வேறுபாடு? box-shadow என்பது உপாதனத்தின் செவ்வக எல்லைப் பெட்டியைச் சுற்றிய நிழல்களைச் சேர்க்கிறது மற்றும் inset நிழல்களை ஆதரிக்கிறது. CSS filter: drop-shadow() உபாதனத்தின் ஒளிக்குறிப்பு வடிவத்திற்குப் பொருந்துகிறது (transparency உட்பட), வெளிப்படையான பின்னணி கொண்ட PNG களைப் போல் செவ்வக அல்லாத விளிம்புகளைப் பின்பற்றுகிறது.
Material Design கார்டு உயர்வு விளைவை எவ்வாறு உருவாக்குவது? இரண்டு பெட்டி நிழல்களை அடுக்கவும்: soft ambient shadow (பெரிய blur, குறைந்த opacity, சற்று spread) மற்றும் key shadow (சிறிய blur, அதிக opacity, திசை offset). உதாரணமாக: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
box-shadow பக்கப் பிரிவுக்கை பாதிக்கிறதா? இல்லை. box-shadow உபாதனத்தின் அளவு அல்லது ஆவணப் ஓட்டத்தில் அதன் நிலைகளை பாதிக்காது. outline போல் அல்லாமல், இது பக்கப் பிரிவு தெரிந்து கொள்ளாது மற்றும் மற்ற உபாதனங்களை நகர்த்த மாட்டாது.
box-shadow ஐ animate செய்ய முடியுமா? ஆம். box-shadow ஐ CSS transitions மற்றும் animations உடன் animate செய்ய முடியும். செயல்திறனுக்கு, தேவைப்படும் போது மட்டுமே box-shadow ஐ animate செய்வதே சாலை — உலாவிகள் transform அல்லது opacity போல் box-shadow மாற்றங்களை GPU-accelerate செய்ய முடியாது.
Keywords: CSS box shadow உருவாக்கி, box-shadow CSS, CSS நிழல் கருவி, CSS drop shadow, inset shadow, பல-அடுக்கு நிழல், CSS shadow ஆன்லைன்