துளி நிழல் என்பது வலைப்பக்கத்தில் வழங்கும்போது தேர்ந்தெடுக்கப்பட்ட HTML உறுப்புகளுக்குப் பின்னால் ஒரு நிழலைக் குறைக்கும் அல்லது சேர்க்கும் ஒரு விளைவு ஆகும். இந்த விளைவைப் பயன்படுத்தி அடையலாம் ' துளி நிழல்() 'CSSக்கான மதிப்பாக முறை' வடிகட்டி 'சொத்து அல்லது பயன்படுத்தி' பெட்டி-நிழல் ”சொத்து. 'பாக்ஸ்-ஷேடோ' பண்பைப் பயன்படுத்துவதன் மூலம், காட்சி மேம்பாடு, பயனர் அனுபவம், முக்கியத்துவம் மற்றும் கவனம் ஆகியவை ஒரு குறிப்பிட்ட இலக்கு HTML உறுப்புக்கு ஈர்க்கப்படலாம்.
இந்த வழிகாட்டி பெட்டி-நிழல் பண்புகளைப் பயன்படுத்தி ஒரு துளி நிழல் விளைவை உருவாக்கும் செயல்முறையை விளக்குகிறது:
-
- பெட்டி-நிழல் பண்புகளைப் பயன்படுத்தி ஒரு திடமான சொட்டு நிழலை உருவாக்கவும்
- பாக்ஸ்-ஷாடோ சொத்தை பயன்படுத்தி மங்கலான சொட்டு நிழலை உருவாக்கவும்
- டிராப் ஷேடோ பகுதியை விரிவாக்குங்கள்
பாக்ஸ்-ஷேடோ சொத்தை பயன்படுத்தி CSS3 இல் டிராப் ஷேடோக்களை உருவாக்குவது எப்படி?
' பெட்டி-நிழல் ”பண்பு என்பது பக்கத்தில் உள்ள உறுப்புகளின் ஒப்பீட்டு நிலையைக் குறிப்பிடுவதன் மூலம் காட்சிப் படிநிலையை உருவாக்க டெவலப்பரை அனுமதிக்கிறது. இதைப் பயன்படுத்துவதன் மூலம், வலைப்பக்கத்தை உருவாக்குபவர்கள், பொருள்கள் மேற்பரப்பில் நிழலை வீசுவது போன்ற மாயையை உருவாக்கி, உறுப்புகளுக்கு அதிக ஊடாடும் உணர்வைக் கொடுக்கலாம்.
தொடரியல்
'பாக்ஸ்-ஷேடோ' சொத்து பின்வரும் தொடரியல் உள்ளது:
பெட்டி நிழல்: [ கிடைமட்ட ஆஃப்செட் ] [ செங்குத்து ஆஃப்செட் ] [ மங்கலான ஆரம் ] [ பரவலான ஆரம் ] [ நிறம் ] ;
மேலே உள்ள தொடரியல் பயன்படுத்தப்படும் சொற்களின் விளக்கம்:
-
- ஆரம்பத்தில், ' கிடைமட்ட ஆஃப்செட் 'எக்ஸ்-அச்சு நிலையை மீட்டெடுக்கிறது/ சேமிக்கிறது, மற்றும் ' எதிர்மறை ”மதிப்பு நிழலை இடதுபுறமாகவும் அதற்கு நேர்மாறாகவும் அமைக்கிறது.
- ' செங்குத்து ஆஃப்செட் 'மதிப்பு Y-அச்சு நிலையை சேமிக்கிறது, ' நேர்மறை 'மதிப்பு நிழலை கீழ்நோக்கி அமைக்கிறது, மேலும் நேர்மாறாக' எதிர்மறை ' மதிப்பு.
- அடுத்து, ' மங்கலான ஆரம் 'பெயரின் மதிப்பு நிழலின் தெளிவின்மையை அமைக்கிறது.
- ' பரவலான ஆரம் ” மதிப்பு என்பது நிழல் எவ்வளவு ஆரம் விரிவடைய வேண்டும் என்பதைக் குறிப்பிடுகிறது.
- ' நிறம் 'நிழல் நிறத்தை அமைக்கிறது, அது ' எச்.எஸ்.எல் ' அல்லது ' RGB ” வடிவமும்.
இப்போது, ஒரு சிறந்த புரிதலுக்காக இரண்டு உதாரணங்களைப் பார்ப்போம்:
எடுத்துக்காட்டு 1: பாக்ஸ்-ஷாடோ சொத்தை பயன்படுத்தி சாலிட் டிராப் ஷேடோவைப் பயன்படுத்துங்கள்
திடமான துளி நிழலை அமைப்பதற்கு, திசைகள் மற்றும் நிழல் வண்ணம் மட்டுமே மதிப்பாக செருகப்படும் ' பெட்டி-நிழல் 'சொத்து:
< பாணி >.boxShadow உதாரணம் {
அகலம்: 210px;
எல்லை: 2px திட சோளப் பட்டு;
உயரம்: 210px;
பின்னணி நிறம்: #f0f0f0;
box-shadow: 10px 10px காடுபச்சை;
}
பாணி >
மேலே உள்ள குறியீட்டில்:
-
- முதலில், HTML உறுப்பு '' என்ற வகுப்பைக் கொண்டு தேர்ந்தெடுக்கப்பட்டது. பெட்டி நிழல் உதாரணம் ”. மற்றும் மதிப்பு ' 210px '' க்கு வழங்கப்படுகிறது உயரம் 'மற்றும்' அகலம் 'பண்புகள். மேலும், பயன்படுத்தவும் ' எல்லை 'மற்றும்' பின்னணி நிறம் 'சிறந்த காட்சிப்படுத்தலுக்கான பண்புகள்.
- அடுத்து, 'இன் மதிப்பை அமைக்கவும் 10px 10px காடுபச்சை 'க்கு' பெட்டி-நிழல் ” CSS சொத்து. ' 10px ” என்பது கிடைமட்ட மற்றும் செங்குத்து ஆஃப்செட் ஆகும், இது நிழல் பயன்படுத்த வேண்டிய இடத்தை தீர்மானிக்கிறது. மற்றும் இந்த ' காடுபச்சை ” என்பது நிழலின் நிறம்.
தொகுத்த பிறகு, வலைப்பக்கம் இப்படி தோன்றும்:
பெட்டி-நிழல் பண்புகளைப் பயன்படுத்தி ஒரு திட-வகை துளி நிழல் வைக்கப்பட்டுள்ளதை வெளியீடு உறுதிப்படுத்துகிறது.
எடுத்துக்காட்டு 2: பாக்ஸ்-ஷாடோ சொத்தை பயன்படுத்தி மங்கலான சொட்டு நிழலைப் பயன்படுத்துங்கள்
ஏற்கனவே பயன்படுத்தப்பட்ட நிழலை மங்கலாக்க, வண்ணத்திற்கு முன் மேலும் ஒரு எண் மதிப்பு செருகப்பட்டது பெட்டி-நிழல் ”சொத்து. கீழே உள்ள மேம்படுத்தப்பட்ட குறியீட்டைப் பார்வையிடவும்:
< பாணி >.boxShadow உதாரணம் {
அகலம்: 210px;
எல்லை: 2px திட சோளப் பட்டு;
உயரம்: 210px;
பின்னணி நிறம்: வெண்புகை;
box-shadow: 10px 10px 15px காடுபச்சை;
}
பாணி >
மேலே உள்ள குறியீட்டின் படி, நிழல் இப்போது ' 15px ” மங்கலானது. தொகுத்தல் கட்டத்தின் முடிவில், வலைப்பக்கம் இப்படி இருக்கும்:
மேலே உள்ள படம் நிழல் இப்போது மங்கலாக இருப்பதைக் காட்டுகிறது.
எடுத்துக்காட்டு 3: டிராப் ஷேடோ பகுதியை விரிவுபடுத்துதல்
பரவல் மதிப்பு ' பெட்டி-நிழல் 'நிழலின் பகுதியை விரிவாக்குவதற்கான சொத்து. பரவலின் மதிப்பு எண் வடிவத்தில் இருக்க வேண்டும். கீழே உள்ள குறியீடு துணுக்கைப் போலவே, நிழல் பகுதி '' என விரிவுபடுத்தப்பட்டுள்ளது. 20px ”:
< பாணி >.boxShadow உதாரணம் {
அகலம்: 210px;
எல்லை: 2px திட சோளப் பட்டு;
உயரம்: 210px;
பின்னணி நிறம்: வெண்புகை;
box-shadow: 10px 10px 15px 20px காடுபச்சை;
}
பாணி >
செயல்படுத்திய பிறகு, துளி நிழல் இப்போது இப்படித் தோன்றும்:
நீங்கள் பார்க்க முடியும் என நிழலின் பகுதி இப்போது 20px அதிகரித்துள்ளது.
முடிவுரை
' பெட்டி-நிழல் 'சொத்து உருவாக்கப் பயன்படுகிறது' துளி நிழல் தேர்ந்தெடுக்கப்பட்ட HTML உறுப்புகளில் விளைவு. ' துளி நிழல் 'சொத்து ஐந்து மதிப்புகளை ஏற்றுக்கொள்கிறது,' கிடைமட்ட ஆஃப்செட் ”,” செங்குத்து ஆஃப்செட் ”,” மங்கலான ஆரம் ”,” பரவலான ஆரம் 'மற்றும்' நிறம் ”. 'கிடைமட்ட ஆஃப்செட்' மற்றும் 'செங்குத்து ஆஃப்செட்' மதிப்புகள் துளி நிழல் வெளிப்பட வேண்டிய நிழலுக்கான பரிமாணங்களை அமைக்கின்றன. 'மங்கலான ஆரம்' மதிப்பு நிழலை மங்கலாக்குகிறது மற்றும் 'பரப்பு ஆரம்' மதிப்பு நிழலின் பகுதியை நீட்டிக்கிறது.