HTML என்பது வலைப்பக்கங்களின் கட்டமைப்பை வழங்கப் பயன்படும் மொழியாகும், மேலும் கூறுகளுக்கு பாணிகளைப் பயன்படுத்த CSS அனுமதிக்கிறது. ஒரு வலைப்பக்கத்தில், பின்னணி-வண்ணம், எழுத்துரு அளவு, எல்லை, எல்லை-ஆரம் மற்றும் பெட்டி-நிழல் போன்ற வெவ்வேறு பாணிகளைப் பயன்படுத்துவதற்கு வெவ்வேறு சொத்து மதிப்புகள் அமைக்கப்பட்டுள்ளன.

HTML உறுப்புகளுக்கு நிழல் விளைவுகளைப் பயன்படுத்துவதற்கான முறையை இந்த வலைப்பதிவு விவாதிக்கும்.

CSS ஐப் பயன்படுத்தி HTML கூறுகளில் நிழல் விளைவை எவ்வாறு கைவிடுவது?

' பெட்டி-நிழல் 'பண்பு ஒரு உறுப்பைச் சுற்றி ஒரு நிழலைச் சேர்க்கிறது, அங்கு இரண்டு அல்லது அதற்கு மேற்பட்ட கூடுதல் விளைவு மதிப்புகள் காற்புள்ளிகளால் பிரிக்கப்படலாம்.

பெட்டி-நிழல் சொத்தின் தொடரியல் கீழே விவரிக்கப்பட்டுள்ளது.

தொடரியல்

பெட்டி-நிழல் : எதுவும் இல்லை |h-offset v-offset மங்கலான பரவல் நிறம் | உட்செலுத்துதல் | ஆரம்ப | நீங்கள் மரபுரிமை ;

மேலே குறிப்பிடப்பட்ட தொடரியல் விளக்கம் கீழே பட்டியலிடப்பட்டுள்ளது:

' எதுவும் இல்லை ”: இது பாக்ஸ்-ஷேடோ சொத்தின் இயல்புநிலை மதிப்பாகும்.
' h-ஆஃப்செட் ”: இந்த மதிப்பு கிடைமட்ட தூரத்தைக் குறிக்கிறது.
' v-ஆஃப்செட் ”: இந்த மதிப்பு செங்குத்து தூரத்தை வரையறுக்கிறது.
' தெளிவின்மை ”: மூன்றாவது மதிப்பு மங்கலாகும். அதன் மதிப்பை அதிகரிப்பது மங்கலான விளைவை அதிகரிக்கும்.
' பரவுதல் ”: நான்காவது மதிப்பு நிழல் பரவலைக் குறிக்கிறது. இது நேர்மறை அல்லது எதிர்மறை மதிப்புகளை வைத்திருக்க முடியும், அங்கு நேர்மறை மதிப்பு பரவலை அதிகரிக்கிறது, மற்றும் எதிர்மறை மதிப்பு அதை குறைக்கிறது.
' நிறம் ”: இந்த மதிப்பு விருப்பமானது, இது தற்போதைய நிறத்தைக் குறிக்கிறது.
' ஆரம்ப ”: இந்த மதிப்பு அதன் ஆரம்ப மதிப்பின் சொத்தை அமைக்கிறது.
' நீங்கள் மரபுரிமை ”: இந்த மதிப்பு அதன் மூல உறுப்பின் சொத்தைப் பெறுகிறது.
' உட்செலுத்துதல் ”: பெட்டியின் உள்ளே நிழல்களை உருவாக்க இன்செட் மதிப்பு பயன்படுத்தப்படுகிறது.

ஒரு நடைமுறை உதாரணம் மூலம் நிழல் விளைவு எப்படி இருக்கிறது என்று பார்ப்போம்.

உதாரணமாக

HTML கோப்பில், முதலில், ''

”. இந்த

உறுப்புக்குள், வலைப்பக்கத்திற்கு உள்ளடக்கத்தை வழங்க

மற்றும்
குறிச்சொற்களைச் சேர்க்கவும்.

HTML

< div >

< h1 > பெட்டி நிழல் < / h1 >

< ப > பெட்டி நிழல்: 3px 8px < / ப >

< / div >

இப்போது, சேர்க்கப்பட்ட HTML உறுப்புகளுக்கு CSS பண்புகளைப் பயன்படுத்தவும்.

CSS

div {

பெட்டி-நிழல் : 3px 8px ;

}

'டிவ் உறுப்பு ' பெட்டி-நிழல் 'மதிப்புடன்' 3px 8px ”, இது கிடைமட்ட ஆஃப்செட் மற்றும் செங்குத்து ஆஃப்செட்டைக் குறிக்கிறது.

வெளியீடு

அடுத்த பகுதியில், HTML உறுப்புகள் வெவ்வேறு பண்புகளுடன் வடிவமைக்கப்படும்.

CSS

div {

எல்லை : 5px திடமான rgb ( 255 , 111 , 1 ) ;

பெட்டி-நிழல் : 3px 8px 9px 4px #f4af1b ;

}

பின்வரும் கூடுதல் CSS பண்புகள் div உறுப்புக்கு பயன்படுத்தப்படுகின்றன:

' எல்லை ”பண்புக்கு 5px திடமான rgb(255, 111,1) மதிப்பு ஒதுக்கப்படுகிறது, இதில் 5px எல்லையின் அகலத்தைக் குறிக்கிறது, திடமானது எல்லையின் பாணியைக் குறிக்கிறது மற்றும் rgb(255, 111, 1) நிறம்.
' பெட்டி-நிழல் ”மதிப்பு 3px 8px 9px 4px #f4af1b என்பது h-ஆஃப்செட்டை 3px ஆகவும், v-ஆஃப்செட் 8px ஆகவும், 9px ஆக மங்கலாகவும், 4px ஆகவும், #f4af1b நிறத்தைக் குறிப்பிடுகிறது.

மேலே கொடுக்கப்பட்ட குறியீடு கீழே காட்டப்பட்டுள்ளபடி div உறுப்பைக் காண்பிக்கும்:

இப்போது, அடுத்த பகுதியில், இரண்டு div கூறுகளைக் குறிக்கும் இரண்டு பெட்டிகளை உருவாக்கவும். ஒவ்வொன்றுக்கும் வெவ்வேறு பல பெட்டி-நிழல் மதிப்புகளைக் கொடுத்து முடிவுகளைக் கவனிப்போம்.

HTML

<டிவி ஐடி = 'பெட்டி1' >

> பெட்டி நிழல் >

> பெட்டி-நிழல் : 3px 8px 9px 4px #f4af1b >

> > >

<டிவி ஐடி = 'box2' >

> பெட்டி நிழல் >

> பெட்டி-நிழல் : 3px 8px 9px 4px #f4af1b >

>

உடை பெட்டி1 டிவி

#பெட்டி1 {

அகலம் : 40% ;

உயரம் : 140px ;

எல்லை : 5px திடமான #ff9c83 ;

பெட்டி-நிழல் : 8px 10px 15px 20px #807f7f ;

}

இங்கே:

' #பெட்டி1 'ஐடி பெட்டி1 உடன் div ஐ அணுக பயன்படுகிறது.
' அகலம் 'உறுப்பின் அகலத்தை அமைப்பதற்கு சொத்து பயன்படுத்தப்படுகிறது.
' உயரம் ”பண்பு உறுப்புகளின் உயரத்தை அமைக்கிறது.
' எல்லை ” க்கு 5px திடமான #ff9c83 மதிப்பு கொடுக்கப்பட்டுள்ளது, இதில் 5px என்பது எல்லையின் அகலத்தைக் குறிக்கிறது, திடமானது எல்லையின் பாணியைக் குறிக்கிறது, மேலும் #ff9c83 என்பது வண்ணம்.
' பெட்டி-நிழல் 'சொத்து' என அமைக்கப்படும் 8px 10px 15px 20px #807f7f ” இதில் 8px என்பது கிடைமட்ட ஆஃப்செட், 10px என்பது செங்குத்து ஆஃப்செட், 15px என்பது மங்கலான விளைவு, 20px என்பது ஸ்ப்ரெட் விளைவு, மற்றும் #807f7f என்பது நிழலின் நிறம்.

உடை பெட்டி2 டிவி

#பெட்டி2 {

அகலம் : 40% ;

உயரம் : 140px ;

எல்லை : 5px திடமான rgb ( 255 , 111 , 1 ) ;

பெட்டி-நிழல் : உட்செலுத்துதல் 4px 8px #f4af1b ;

விளிம்பு-இடது : 350px ;

}

அதே பண்புகளுடன் box2 divஐ வடிவமைத்திருப்பதைக் காணலாம்:

போனஸ் உதவிக்குறிப்பு: HTML உறுப்புகளில் பல நிழல்களைச் சேர்த்தல்

' பெட்டி-நிழல் ஒரு HTML உறுப்புக்கு பல நிழல் விளைவுகளைச் சேர்க்க சொத்து பயன்படுத்தப்படலாம். கீழே உள்ள எடுத்துக்காட்டில் காட்டப்பட்டுள்ளபடி ஒவ்வொரு நிழலுக்கும் இடையில் காற்புள்ளிகளைப் பயன்படுத்தி இதைச் செய்யலாம்:

பெட்டி-நிழல் : 6px 6px rgb ( 91 , 0 , 143 ) , 12px 5px rgb ( 201 , 8 , 8 ) , 16px 16px 8px rgb ( 226 , 213 , 29 ) ;

நீங்கள் பார்க்க முடியும் என, பல நிழல்கள் வெற்றிகரமாக பயன்படுத்தப்பட்டன:

இது CSS எல்லை நிழலின் பயன்பாட்டைப் பற்றியது.

முடிவுரை

' பெட்டி-நிழல் HTML உறுப்புகளுக்கு நிழல் விளைவுகளைப் பயன்படுத்த CSS இல் உள்ள சொத்து பயன்படுத்தப்படுகிறது. இந்த சொத்து முக்கியமாக இரண்டு மதிப்புகளைக் கொண்டுள்ளது, அவை கிடைமட்ட ஆஃப்செட் மற்றும் செங்குத்து ஆஃப்செட்டுகளுக்கானவை, ஆனால் மங்கலான விளைவு, பரவல் ஆரம் விளைவு, நிறம் மற்றும் பல போன்ற பல மதிப்புகள் இருக்கலாம். மேலும், ஒவ்வொரு பெட்டி-நிழல் பண்புக்கும் இடையே காற்புள்ளிகளைப் பயன்படுத்தி உறுப்புகளில் பல நிழல்களைச் சேர்க்கலாம். இந்த கட்டுரை CSS பெட்டி-நிழல் பண்புகளை நடைமுறை எடுத்துக்காட்டுகளுடன் விளக்கியுள்ளது.

CSS எல்லை நிழல்