CSS Box Shadow பண்புகளைப் புரிந்துகொள்ளுதல்
இணைய வடிவமைப்பில் ஒரு தனிமத்திற்கு (element) முப்பரிமாணத் தோற்றத்தையும் ஆழத்தையும் வழங்க box-shadow CSS பண்பு பயன்படுத்தப்படுகிறது. இந்த பண்பு, தனிமத்தின் சட்டகத்தைச் சுற்றி ஒன்று அல்லது அதற்கு மேற்பட்ட நிழல்களை உருவாக்க அனுமதிக்கிறது. ஒரு நிழலின் தோற்றத்தை அதன் கிடைமட்ட மற்றும் செங்குத்து நகர்வுகள், மங்கல் விளிம்பு, பரவும் அளவு, நிறம் மற்றும் ஒளிபுகாத்தன்மை ஆகிய ஐந்து முக்கிய காரணிகள் தீர்மானிக்கின்றன.
பாக்ஸ் ஷேடோ உருவாக்கி கருவியானது இந்த மதிப்புகளை ஸ்லைடர்கள் மூலம் எளிதாகச் சரிசெய்து, நிகழ்நேரத்தில் அதன் காட்சி மாற்றங்களைக் காண உதவுகிறது. இதன் மூலம் குறியீட்டை கைமுறையாக எழுதிச் சரிபார்க்கும் நேரத்தைக் குறைத்து, துல்லியமான நிழல் விளைவுகளை உருவாக்க முடியும்.
நகர்வு, மங்கல் மற்றும் பரப்பு ஆகியவற்றின் செயல்பாடுகள்
நிழலின் வடிவம் மற்றும் திசையைத் தீர்மானிப்பதில் நகர்வு (offset), மங்கல் (blur) மற்றும் பரப்பு (spread) ஆகிய மூன்று அளவீடுகள் முக்கியப் பங்கு வகிக்கின்றன:
- கிடைமட்ட நகர்வு (Horizontal offset): இது நிழலை இடது அல்லது வலது பக்கமாக நகர்த்துகிறது. இதன் அளவு -50px முதல் 50px வரை இருக்கும். எதிர்மறை (negative) மதிப்புகள் நிழலை இடதுபுறமாகவும், நேர்மறை (positive) மதிப்புகள் வலதுபுறமாகவும் நகர்த்துகின்றன.
- செங்குத்து நகர்வு (Vertical offset): இது நிழலை மேல் அல்லது கீழாக நகர்த்துகிறது. இதன் அளவு -50px முதல் 50px வரை இருக்கும். எதிர்மறை மதிப்புகள் நிழலை மேல்நோக்கியும், நேர்மறை மதிப்புகள் கீழ்நோக்கியும் நகர்த்துகின்றன.
- Blur (மங்கல்): இது நிழலின் விளிம்புகளை மென்மையாக்குகிறது. இதன் அளவு 0px முதல் 100px வரை இருக்கும். 0px என்பது மிகக் கூர்மையான விளிம்பைக் கொடுக்கும், மதிப்பு அதிகரிக்க அதிகரிக்க நிழல் மென்மையாக மாறும்.
- பரப்பு (Spread): இது நிழல் மங்குவதற்கு முன்பு அதன் அளவை விரிவுபடுத்துகிறது அல்லது சுருக்குகிறது. இதன் அளவு -50px முதல் 50px வரை இருக்கும். நேர்மறை மதிப்பு நிழலை வெளிப்புறமாக விரிவுபடுத்தும், எதிர்மறை பரப்பு மதிப்பு நிழலை உள்நோக்கி இழுத்துச் சுருக்கும்.
சாதாரண நிழல் மற்றும் உள் நிழல் வேறுபாடுகள்
இயல்பாக, ஒரு தனிமத்திற்கு நிழல் கொடுக்கும்போது அது வெளிப்புறமாக விழும். இது அந்த தனிமம் பக்கத்திலிருந்து மேலே உயர்த்தப்பட்டிருப்பது போன்ற தோற்றத்தை ஏற்படுத்துகிறது.
மாறாக, உள் நிழல் (Inset shadow) விருப்பத்தைச் செயல்படுத்தும்போது, நிழல் தனிமத்தின் விளிம்பிற்கு உள்ளே திரும்புகிறது. இது தனிமத்தின் உள்ளே ஒளி விழுவது போன்ற தோற்றத்தை ஏற்படுத்தி, அது உள்ளே அழுத்தப்பட்டது போன்ற (pressed in) அல்லது குழிவான (sunken) விளைவை உருவாக்குகிறது. படிவங்களின் உள்ளீட்டுப் பெட்டிகள் (inputs) அல்லது அழுத்தப்பட்ட நிலையில் உள்ள பொத்தான்களை வடிவமைக்க இந்த உள் நிழல் முறை பயன்படுத்தப்படுகிறது.
பல அடுக்குகள் மூலம் ஆழமான நிழல்களை உருவாக்குதல்
ஒற்றை நிழல் அடுக்கு பல நேரங்களில் தட்டையாகவும் செயற்கையாகவும் தோன்றும். நிஜ வாழ்க்கையில் ஒளியானது பல்வேறு கோணங்களில் சிதறி விழுவதால், நிழல்கள் பல அடுக்குகளாகவும் மென்மையாகவும் இருக்கும்.
இதை இணைய வடிவமைப்பில் கொண்டுவர, பல நிழல் அடுக்குகளை ஒன்றன் மேல் ஒன்றாக அடுக்க வேண்டும். பாக்ஸ் ஷேடோ உருவாக்கி கருவியில் ஐந்து அடுக்குகள் வரை முன்கூட்டியே ரெண்டர் செய்யப்பட்டுள்ளன. இதில் முதல் அடுக்கு இயல்பாக 0 8 24 -4 என்ற மதிப்புகளுடனும், 18% ஒளிபுகாத்தன்மை கொண்ட கருப்பு நிறத்துடனும் அமைக்கப்பட்டிருக்கும், மற்ற அடுக்குகள் தொடக்கத்தில் மறைக்கப்பட்டிருக்கும்.
புதிய அடுக்கைச் சேர்க்கும்போது அது இயல்பு மதிப்புகளுடன் உருவாகும். பல அடுக்குகளைப் பயன்படுத்தும்போது, CSS வெளியீட்டில் அவை ஒவ்வொன்றும் கமாவால் பிரிக்கப்பட்ட மதிப்புகளாக (comma-separated values) வரிசைப்படுத்தப்படும். ஒரு அடர்த்தியான நெருக்கமான நிழலையும், ஒரு மென்மையான பரந்த நிழலையும் இணைப்பதன் மூலம் மிக எதார்த்தமான முப்பரிமாண ஆழத்தை உருவாக்க முடியும்.
தரவு செயலாக்கம் மற்றும் தனியுரிமை
இந்தக் கருவியைப் பயன்படுத்தும்போது தனியுரிமை முழுமையாகப் பாதுகாக்கப்படுகிறது. நீங்கள் அமைக்கும் ஒவ்வொரு நிழல் அமைப்பும் மற்றும் அதன் மதிப்புகளும் உங்கள் உலாவியிலேயே ரெண்டர் செய்யப்படுகின்றன. நீங்கள் இங்கு அமைக்கும் எந்தவொரு தரவும் BroBroGo-விற்கு பதிவேற்றப்படாது.
அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)
கேள்வி: offset, blur மற்றும் spread ஆகியவை எதைக் கட்டுப்படுத்துகின்றன?
பதில்: Offset நிழலை இடது/வலது மற்றும் மேல்/கீழாக நகர்த்துகிறது, blur அதன் விளிம்புகளை மென்மையாக்குகிறது, மற்றும் spread மங்குவதற்கு முன்பு அதை விரிவுபடுத்துகிறது அல்லது சுருக்குகிறது. எதிர்மறை (negative) spread நிழலை உள்ளே இழுக்கிறது, இது இறுக்கமான, நெருக்கமான நிழலுக்கு பயனுள்ளதாக இருக்கும்.
கேள்வி: inset விருப்பம் என்ன செய்கிறது?
பதில்: ஒரு சாதாரண நிழல் உறுப்புக்கு வெளியே விழுகிறது, இது உயர்த்தப்பட்ட அட்டைக்கு பின்னால் உள்ள ஒளியைப் போன்றது. Inset நிழலை உள்ளே திருப்புகிறது, இதனால் உறுப்பு உள்ளே அழுத்தப்பட்டது போல் தோன்றும் — இது குழிவான உள்ளீடுகள் (inputs) அல்லது அழுத்தப்பட்ட பொத்தான்களுக்கு பயனுள்ளதாக இருக்கும்.
கேள்வி: ஒன்றுக்கும் மேற்பட்ட நிழல் அடுக்குகளை ஏன் அடுக்க வேண்டும்?
பதில்: ஒரு குறிப்பிட்ட அளவிற்கு மேல் ஒற்றை நிழல் தட்டையாகத் தோன்றும். உண்மையான முப்பரிமாண தோற்றம் பொதுவாக ஒரு அடர்த்தியான, இருண்ட நிழலையும், மென்மையான, பரந்த நிழலையும் இணைக்கிறது — அந்த விளைவைப் பெற இரண்டாவது அடுக்கைச் சேர்த்து, ஒவ்வொன்றையும் தனித்தனியாகச் சரிசெய்யவும்.
கேள்வி: அடுக்கைச் சேர் மற்றும் அடுக்கை நீக்கு பொத்தான்கள் எவ்வாறு செயல்படுகின்றன?
பதில்: "அடுக்கைச் சேர்" பொத்தானை அழுத்தும்போது இயல்பு மதிப்புகளுடன் கூடிய புதிய நிழல் அடுக்கு உருவாக்கப்படும். "அடுக்கை நீக்கு" பொத்தானை அழுத்தும்போது நீங்கள் தேர்ந்தெடுத்த குறிப்பிட்ட நிழல் அடுக்கு நீக்கப்படும்.