CSS பெட்டி நிழலை எப்படி பயன்படுத்துவது: 13 தந்திரங்கள் மற்றும் உதாரணங்கள்

CSS பெட்டி நிழலை எப்படி பயன்படுத்துவது: 13 தந்திரங்கள் மற்றும் உதாரணங்கள்

CSS என்பது ஒரு வலைப்பக்கத்தை வடிவமைக்க மொழி உருவாக்குநர்கள் பயன்படுத்தும் மொழி. HTML கூறுகள் ஒரு திரையில், காகிதத்தில் அல்லது வேறு எந்த ஊடகத்திலும் காட்டப்படும் என்பதை இது கட்டுப்படுத்துகிறது. உங்கள் சொந்த படத்தில் வலைப்பக்கத்தை வடிவமைக்க CSS முழு தனிப்பயனாக்குதல் சக்தியை வழங்குகிறது.





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



CSS பெட்டி நிழல் என்றால் என்ன?

தி பெட்டி நிழல் சொத்து HTML கூறுகளுக்கு நிழலைப் பயன்படுத்த பயன்படுகிறது. ஸ்டைலிங் பெட்டிகள் அல்லது படங்களுக்கு இது மிகவும் பயன்படுத்தப்படும் CSS பண்புகளில் ஒன்றாகும்.





CSS தொடரியல்:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. கிடைமட்ட ஆஃப்செட்: கிடைமட்ட ஆஃப்செட் நேர்மறையாக இருந்தால், நிழல் பெட்டியின் வலதுபுறத்தில் இருக்கும். கிடைமட்ட ஆஃப்செட் எதிர்மறையாக இருந்தால், நிழல் பெட்டியின் இடதுபுறத்தில் இருக்கும்.
  2. செங்குத்து ஆஃப்செட்: செங்குத்து ஆஃப்செட் நேர்மறையாக இருந்தால், நிழல் பெட்டியின் கீழே இருக்கும். மேலும் செங்குத்து ஆஃப்செட் எதிர்மறையாக இருந்தால், நிழல் பெட்டிக்கு மேலே இருக்கும்.
  3. மங்கலான ஆரம்: அதிக மதிப்பு, நிழல் மிகவும் மங்கலாக இருக்கும்.
  4. பரப்பு ஆரம்: நிழல் எவ்வளவு பரவ வேண்டும் என்பதை இது குறிக்கிறது. நேர்மறை மதிப்புகள் நிழலின் பரவலை அதிகரிக்கின்றன, எதிர்மறை மதிப்புகள் பரவலைக் குறைக்கின்றன.
  5. நிறம்: இது நிழலின் நிறத்தைக் குறிக்கிறது. மேலும், இது rgba, hex அல்லது hsla போன்ற எந்த வண்ண வடிவமைப்பையும் ஆதரிக்கிறது.

மங்கலான, பரவல் மற்றும் வண்ண அளவுருக்கள் விருப்பமானது. பெட்டி நிழலின் மிகவும் சுவாரசியமான பகுதி என்னவென்றால், பெட்டி நிழல் மதிப்புகளை எத்தனை முறை வேண்டுமானாலும் பிரிக்க நீங்கள் கமாவைப் பயன்படுத்தலாம். உறுப்புகளில் பல எல்லைகள் மற்றும் நிழல்களை உருவாக்க இதைப் பயன்படுத்தலாம்.



1. பெட்டியின் இடது, வலது மற்றும் கீழே ஒரு மங்கலான பெட்டி நிழலைச் சேர்க்கவும்

உங்கள் இலக்கு HTML உறுப்புடன் பின்வரும் பெட்டி நிழல் CSS ஐப் பயன்படுத்தி பெட்டியின் மூன்று பக்கங்களிலும் (இடது, வலது மற்றும் கீழ்) மிகவும் மங்கலான நிழல்களைச் சேர்க்கலாம்:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

வெளியீடு:



2. அனைத்து பக்கங்களிலும் ஒரு மங்கலான பெட்டி நிழலைச் சேர்க்கவும்

உங்கள் இலக்கு HTML உறுப்புடன் பின்வரும் பெட்டி நிழல் CSS ஐப் பயன்படுத்தி பெட்டியின் அனைத்து பக்கங்களிலும் ஒளி நிழல்களைச் சேர்க்கலாம்:



box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

வெளியீடு:

3. கீழ் மற்றும் வலது பக்கங்களில் மெல்லிய பெட்டி நிழலைச் சேர்க்கவும்

உங்கள் இலக்கு HTML உறுப்புடன் பின்வரும் பெட்டி நிழல் CSS ஐப் பயன்படுத்தி பெட்டியின் கீழ் மற்றும் வலது பக்கத்தில் நிழல்களைச் சேர்க்கலாம்:

தகவல்@ மின்னஞ்சல் முகவரிக்கு மாற்று
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

வெளியீடு:

4. அனைத்துப் பக்கங்களிலும் டார்க் பாக்ஸ்-ஷேடோவைச் சேர்க்கவும்

உங்கள் இலக்கு HTML உறுப்புடன் பின்வரும் பெட்டி நிழல் CSS ஐப் பயன்படுத்தி பெட்டியின் அனைத்துப் பக்கங்களிலும் இருண்ட நிழலைச் சேர்க்கலாம்:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

வெளியீடு:

5. அனைத்துப் பக்கங்களிலும் பரவிய நிழலைச் சேர்க்கவும்

உங்கள் இலக்கு HTML உறுப்புடன் பின்வரும் கட்டளையைப் பயன்படுத்தி பெட்டியின் அனைத்து பக்கங்களிலும் பரவிய நிழலைச் சேர்க்கலாம்:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

வெளியீடு:

6. அனைத்து பக்கங்களிலும் ஒரு மெல்லிய எல்லை நிழலைச் சேர்க்கவும்

உங்கள் இலக்கு HTML உறுப்புடன் பின்வரும் CSS ஐப் பயன்படுத்தி பெட்டியின் அனைத்து பக்கங்களிலும் ஒரு எளிய எல்லை நிழலைச் சேர்க்கலாம்:

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

வெளியீடு:

7. கீழ் மற்றும் இடது பக்கங்களில் ஒரு பெட்டி நிழலைச் சேர்க்கவும்

உங்கள் இலக்கு HTML உறுப்புடன் பின்வரும் பெட்டி நிழல் CSS ஐப் பயன்படுத்தி பெட்டியின் கீழ் மற்றும் இடது பக்கங்களில் ஒரு நிழலைச் சேர்க்கலாம்:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

வெளியீடு:

8. மேல் மற்றும் இடது பக்கங்களுக்கு ஒரு மங்கலான பெட்டி நிழலைச் சேர்க்கவும், கீழ் மற்றும் வலது பக்கங்களுக்கு இருண்ட நிழலைச் சேர்க்கவும்

உங்கள் இலக்கு HTML உறுப்புடன் பின்வரும் CSS ஐப் பயன்படுத்தி பெட்டியின் மேல் மற்றும் இடது பக்கத்தில் ஒரு ஒளி நிழலையும், பெட்டியின் கீழ் மற்றும் வலது பக்கங்களிலும் ஒரு இருண்ட நிழலையும் சேர்க்கலாம்:

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

வெளியீடு:

9. அனைத்து பக்கங்களிலும் ஒரு மெல்லிய, வண்ண எல்லை நிழலைச் சேர்க்கவும்

உங்கள் இலக்கு HTML உறுப்புடன் பின்வரும் பெட்டி நிழல் CSS ஐப் பயன்படுத்தி பெட்டியின் அனைத்துப் பக்கங்களிலும் எளிய வண்ண எல்லை நிழலைச் சேர்க்கலாம்:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

வெளியீடு:

10. பெட்டியின் கீழ் மற்றும் இடது பக்கங்களில் பல வண்ண எல்லை நிழல்களைச் சேர்க்கவும்

உங்கள் இலக்கு HTML உறுப்புடன் பின்வரும் CSS ஐப் பயன்படுத்தி பெட்டியின் கீழ் மற்றும் இடது பக்கங்களில் பல வண்ண எல்லை நிழல்களைச் சேர்க்கலாம்:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

வெளியீடு:

ஐபோனில் ஆர்டிடி என்றால் என்ன

11. பல வண்ண எல்லை நிழல்களை கீழே சேர்க்கவும்

உங்கள் இலக்கு HTML உறுப்புடன் பின்வரும் பெட்டி நிழல் CSS ஐப் பயன்படுத்தி பெட்டியின் அடிப்பகுதியில் பல வண்ண எல்லை நிழல்களைச் சேர்க்கலாம்:

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

வெளியீடு:

12. பெட்டியின் கீழ் மற்றும் வலது பக்கங்களில் பல வண்ண எல்லை நிழல்களைச் சேர்க்கவும்

உங்கள் இலக்கு HTML உறுப்புடன் பின்வரும் CSS ஐப் பயன்படுத்தி பெட்டியின் கீழ் மற்றும் வலது பக்கங்களில் பல வண்ண எல்லை நிழல்களைச் சேர்க்கலாம்:

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

வெளியீடு:

13. இடது மற்றும் வலது பக்கங்களில் ஒளி நிழல்களைச் சேர்க்கவும், கீழே நிழல் பரப்பவும்

உங்கள் இலக்கு HTML உறுப்புடன் பின்வரும் பெட்டி நிழல் CSS ஐப் பயன்படுத்தி நீங்கள் இடது மற்றும் வலது பக்கங்களில் ஒளி நிழல்களைச் சேர்க்கலாம் மற்றும் பெட்டியின் கீழே நிழலைப் பரப்பலாம்:

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

வெளியீடு:

ஒரு HTML பக்கத்துடன் CSS ஐ ஒருங்கிணைக்கவும்

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

தொடர்புடையது: CSS கோப்புகளைச் சரிபார்க்கவும், சுத்தம் செய்யவும் மற்றும் மேம்படுத்த 11 பயனுள்ள கருவிகள்

நீங்கள் அதை HTML பக்கத்திலேயே உட்பொதிக்கலாம் அல்லது தனி ஆவணமாக இணைக்கலாம். ஒரு HTML ஆவணத்தில் CSS ஐ சேர்க்க மூன்று வழிகள் உள்ளன:

உள் CSS

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





CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}




Style 4





இன்லைன் CSS

ஒரு HTML உறுப்புக்கு தனித்துவமான பாணி விதிகளைச் சேர்க்க இன்லைன் CSS பயன்படுத்தப்படுகிறது. இது வழியாக ஒரு HTML உறுப்புடன் பயன்படுத்தலாம் பாணி பண்பு பாணி பண்பு வடிவத்தில் CSS பண்புகளைக் கொண்டுள்ளது 'சொத்து: மதிப்பு' அரைப்புள்ளியால் பிரிக்கப்பட்டது ( ; )

தொடர்புடையது: சிஎஸ்எஸ் கட்டத்துடன் இரண்டு பரிமாண வலைத்தளங்களை எவ்வாறு உருவாக்குவது என்பதை அறிக

அனைத்து CSS பண்புகளும் ஒரே வரியில் இருக்க வேண்டும் அதாவது CSS பண்புகளுக்கு இடையில் வரி இடைவெளிகள் இருக்கக்கூடாது. ஒரு HTML ஆவணத்துடன் இன்லைன் CSS ஐ எவ்வாறு பயன்படுத்துவது என்பதை நிரூபிக்கும் ஒரு எடுத்துக்காட்டு இங்கே:





CSS box-shadow



Style 4





வெளிப்புற CSS

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

உடன் ஒரு புதிய CSS கோப்பை உருவாக்கவும் .css நீட்டிப்பு இப்போது அந்தக் கோப்பில் பின்வரும் CSS குறியீட்டைச் சேர்க்கவும்:

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

கடைசியாக, ஒரு HTML ஆவணத்தை உருவாக்கி, அந்த ஆவணத்திற்குள் பின்வரும் குறியீட்டைச் சேர்க்கவும்:

கேலக்ஸி எஸ் 8 திரையை மாற்றுவதற்கான செலவு




CSS box-shadow




Style 4





CSS கோப்பு HTML ஆவணத்துடன் இணைக்கப்பட்டுள்ளது என்பதை நினைவில் கொள்க குறிச்சொல் மற்றும் href பண்பு

மேலே உள்ள மூன்று முறைகளும் (இன்டர்னல் சிஎஸ்எஸ், இன்லைன் சிஎஸ்எஸ் மற்றும் வெளிப்புற சிஎஸ்எஸ்) ஒரே வெளியீட்டை காட்டும்-

CSS மூலம் உங்கள் வலைப்பக்கத்தை நேர்த்தியாக ஆக்குங்கள்

CSS ஐப் பயன்படுத்துவதன் மூலம் உங்கள் வலைப்பக்கத்தின் ஸ்டைலிங் மீது உங்களுக்கு முழு கட்டுப்பாடு உள்ளது. பல்வேறு CSS பண்புகளைப் பயன்படுத்தி ஒவ்வொரு HTML உறுப்புகளையும் நீங்கள் தனிப்பயனாக்கலாம். உலகம் முழுவதிலுமிருந்து தேவர்கள் CSS புதுப்பிப்புகளுக்கு பங்களித்து வருகின்றனர், மேலும் 1996 இல் வெளியானதிலிருந்து அவர்கள் அதைச் செய்கிறார்கள். அதுபோல, தொடக்கக்காரர்கள் கற்றுக்கொள்ள நிறைய இருக்கிறது!

அதிர்ஷ்டவசமாக, CSS தொடக்க நட்பு. சில எளிய கட்டளைகளுடன் தொடங்கி உங்கள் படைப்பாற்றல் உங்களை எங்கு அழைத்துச் செல்கிறது என்பதைப் பார்ப்பதன் மூலம் நீங்கள் சில சிறந்த பயிற்சிகளைப் பெறலாம்.

பகிர் பகிர் ட்வீட் மின்னஞ்சல் 10 எளிய CSS குறியீடு உதாரணங்கள் நீங்கள் 10 நிமிடங்களில் கற்றுக்கொள்ளலாம்

CSS உடன் உதவி தேவையா? தொடங்குவதற்கு இந்த அடிப்படை CSS குறியீடு எடுத்துக்காட்டுகளை முயற்சிக்கவும், பின்னர் அவற்றை உங்கள் சொந்த வலைப்பக்கங்களுக்குப் பயன்படுத்தவும்.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்
  • நிரலாக்க
  • வலை வடிவமைப்பு
  • CSS
எழுத்தாளர் பற்றி யுவராஜ் சந்திரா(60 கட்டுரைகள் வெளியிடப்பட்டன)

யுவராஜ் இந்தியாவின் டெல்லி பல்கலைக்கழகத்தில் கணினி அறிவியல் இளங்கலை மாணவர். அவர் முழு ஸ்டாக் வலை மேம்பாட்டில் ஆர்வம் கொண்டவர். அவர் எழுதாதபோது, ​​அவர் பல்வேறு தொழில்நுட்பங்களின் ஆழத்தை ஆராய்கிறார்.

யுவராஜ் சந்திராவின் மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்