CSS டெக்ஸ்ட் டெக்கரேஷன் லேயர் கம்போசிஷன்: பல விளைவுகளை அடுக்கி தேர்ச்சி பெறுதல்

CSS உரையை வடிவமைக்க பல பண்புகளை வழங்குகிறது, மேலும் மிகவும் சுவாரஸ்யமான, ஆனால் அடிக்கடி கவனிக்கப்படாத ஒன்றான text-decoration-layer பண்பு ஆகும். இந்தப் பண்பு, மற்ற டெக்ஸ்ட் டெக்கரேஷன் பண்புகளுடன் இணைந்து, பல அலங்காரங்களை அடுக்கி, பார்வைக்கு பிரமிக்க வைக்கும் மற்றும் சிக்கலான உரை விளைவுகளை உருவாக்க டெவலப்பர்களை அனுமதிக்கிறது. இந்த விரிவான வழிகாட்டியில், text-decoration-layer-ன் நுணுக்கங்களை ஆழமாக ஆராய்ந்து, தனித்துவமான மற்றும் ஈர்க்கக்கூடிய உரை வடிவமைப்புகளை உருவாக்க அதை எவ்வாறு பயன்படுத்துவது என்பதை ஆராய்வோம்.

text-decoration-layer பண்பைப் புரிந்துகொள்ளுதல்

text-decoration-layer பண்பு, உரை அலங்காரங்கள் (அடிக்கோடுகள், மேல்கோடுகள் மற்றும் அடிக்கோடிட்டுக் காட்டுதல் போன்றவை) உரைக்குச் சார்பாக எந்த வரிசையில் வரையப்படுகின்றன என்பதைக் கட்டுப்படுத்துகிறது. இது இரண்டு மதிப்புகளை ஏற்றுக்கொள்கிறது:

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

மதிப்புகள் எளிமையானதாகத் தோன்றினாலும், அடுக்கப்பட்ட விளைவுகளை உருவாக்க text-decoration-layer-ஐ மற்ற உரை அலங்கார பண்புகளுடன் இணைப்பதில் உண்மையான சக்தி உள்ளது. இதை விளக்க பல நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்.

முக்கிய டெக்ஸ்ட் டெக்கரேஷன் பண்புகள்

மேம்பட்ட அடுக்கும் நுட்பங்களுக்குள் மூழ்குவதற்கு முன், நாம் பயன்படுத்தப் போகும் முக்கிய CSS டெக்ஸ்ட் டெக்கரேஷன் பண்புகளை விரைவாக மதிப்பாய்வு செய்வோம்:

• text-decoration-line: பயன்படுத்த வேண்டிய அலங்காரத்தின் வகையைக் குறிப்பிடுகிறது (எ.கா., underline, overline, line-through).
• text-decoration-color: உரை அலங்காரத்தின் நிறத்தை அமைக்கிறது.
• text-decoration-style: அலங்காரத்தின் பாணியை வரையறுக்கிறது (எ.கா., solid, double, dashed, dotted, wavy).
• text-decoration-thickness: அலங்காரக் கோட்டின் தடிமனைக் கட்டுப்படுத்துகிறது. இந்தப் பண்பு துல்லியமான காட்சி வடிவமைப்புகளை உருவாக்க `text-underline-offset` உடன் இணைந்து செயல்படுகிறது.
• text-underline-offset: அடிக்கோட்டிற்கும் உரையின் அடிக்குறிப்பிற்கும் இடையே உள்ள தூரத்தைக் குறிப்பிடுகிறது. அடிக்கோடுகள் டிசெண்டர்களை (descenders) மறைப்பதைத் தடுக்க இது முக்கியமானது.

அடிப்படை எடுத்துக்காட்டுகள்: களத்தை அமைத்தல்

text-decoration-layer உரையின் தோற்றத்தை எவ்வாறு பாதிக்கிறது என்பதை விளக்க சில அடிப்படை எடுத்துக்காட்டுகளுடன் தொடங்குவோம்.

எடுத்துக்காட்டு 1: ஆஃப்செட் உடன் எளிய அடிக்கோடு

இந்த எடுத்துக்காட்டு, உரையின் டிசெண்டர்களுடன் மோதுவதைத் தடுக்க, குறிப்பிட்ட ஆஃப்செட்டுடன் கூடிய எளிய அடிக்கோட்டைக் காட்டுகிறது.

.underlined {
  text-decoration: underline;
  text-decoration-color: blue;
  text-underline-offset: 0.3em;
}

HTML:

<p class="underlined">இந்த உரை ஒரு ஸ்டைலான அடிக்கோட்டைக் கொண்டுள்ளது.</p>

எடுத்துக்காட்டு 2: உரையின் கீழே கோடிட்ட மேல்கோடு

இங்கே, நாங்கள் text-decoration-layer: below-ஐப் பயன்படுத்தி உரையின் கீழே ஒரு கோடிட்ட மேல்கோட்டை வைக்கிறோம், இது ஒரு நுட்பமான பின்னணி விளைவை உருவாக்குகிறது.

.overlined {
  text-decoration: overline dashed;
  text-decoration-color: lightgray;
  text-decoration-layer: below;
}

HTML:

<p class="overlined">அதன் பின்னால் ஒரு மேல்கோடு உள்ள உரை.</p>

மேம்பட்ட நுட்பங்கள்: பல அலங்காரங்களை அடுக்கி வைத்தல்

சூடோ-எலிமென்ட்களைப் (::before மற்றும் ::after) பயன்படுத்தி அல்லது பல text-decoration பண்புகளைப் பயன்படுத்துவதன் மூலம் பல உரை அலங்காரங்களை அடுக்கும்போது உண்மையான மாயம் நிகழ்கிறது. இது ஒரு அலங்காரத்துடன் அடைய கடினமாகவோ அல்லது முடியாததாகவோ இருக்கும் சிக்கலான விளைவுகளை அனுமதிக்கிறது.

எடுத்துக்காட்டு 3: இரட்டை அடிக்கோட்டு விளைவு

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

.double-underline {
  position: relative;
  display: inline-block;
}

.double-underline::before,
.double-underline::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px; /* Adjust for thickness */
  background-color: currentColor; /* Inherit text color */
}

.double-underline::before {
  bottom: -0.2em; /* Adjust for spacing */
}

.double-underline::after {
  bottom: -0.4em; /* Adjust for spacing */
}

HTML:

<span class="double-underline">இரட்டை அடிக்கோடிட்ட உரை</span>

விளக்கம்: சூடோ-எலிமென்ட்களுக்கு ஒரு நிலைப்படுத்தல் சூழலை உருவாக்க பெற்றோர் உறுப்பில் position: relative-ஐப் பயன்படுத்துகிறோம். பின்னர் ::before மற்றும் ::after சூடோ-எலிமென்ட்கள் இரண்டு அடிக்கோடுகளை உருவாக்க முழுமையாக நிலைநிறுத்தப்படுகின்றன. அடிக்கோடுகளுக்கும் உரைக்கும் இடையிலான இடைவெளியைக் கட்டுப்படுத்த bottom பண்பு சரிசெய்யப்படுகிறது. `background-color`-ஐ `currentColor` என அமைப்பது அடிக்கோடுகள் உரையின் நிறத்தைப் பெறுவதை உறுதிசெய்கிறது, இது ஸ்டைலிங்கில் நெகிழ்வுத்தன்மையை வழங்குகிறது.

எடுத்துக்காட்டு 4: பின்னணி ஹைலைட்டுடன் அடிக்கோடு

இந்த எடுத்துக்காட்டு, உரைக்கு கவனத்தை ஈர்க்க ஒரு அடிக்கோட்டை ஒரு நுட்பமான பின்னணி ஹைலைட்டுடன் இணைக்கிறது. இந்த விளைவுக்குப் படிக்க எளிதாக இருப்பதை உறுதிப்படுத்த வண்ண மாறுபாட்டை கவனமாகக் கருத்தில் கொள்ள வேண்டும்.

.highlight-underline {
  position: relative;
  display: inline-block;
}

.highlight-underline::before {
  content: '';
  position: absolute;
  left: -0.1em; /* Adjust for padding */
  right: -0.1em; /* Adjust for padding */
  bottom: -0.2em; /* Position the highlight */
  height: 0.4em;  /* Adjust for highlight height */
  background-color: rgba(255, 255, 0, 0.3); /* Semi-transparent yellow */
  z-index: -1; /* Place behind the text */
}

.highlight-underline {
  text-decoration: underline;
  text-decoration-color: darkgoldenrod;
  text-underline-offset: 0.1em;
}

HTML:

<span class="highlight-underline">ஹைலைட் செய்யப்பட்ட அடிக்கோடு</span>

விளக்கம்: பின்னணி ஹைலைட்டை உருவாக்க நாங்கள் ::before சூடோ-எலிமென்ட்டைப் பயன்படுத்துகிறோம். நாங்கள் அதை z-index: -1-ஐப் பயன்படுத்தி உரையின் பின்னால் நிலைநிறுத்துகிறோம் மற்றும் அதன் அளவு மற்றும் நிலையை கட்டுப்படுத்த left, right, மற்றும் bottom பண்புகளை சரிசெய்கிறோம். rgba() வண்ண மதிப்பு ஒரு பகுதி-வெளிப்படையான ஹைலைட்டை உருவாக்க எங்களை அனுமதிக்கிறது. பின்னர் `text-decoration` பண்புகளைப் பயன்படுத்தி ஒரு நிலையான அடிக்கோட்டைப் பயன்படுத்துகிறோம். பார்வைக்கு ஈர்க்கக்கூடிய முடிவுகளை உருவாக்க ஆஃப்செட் மற்றும் ஹைலைட் அளவை சரிசெய்வது முக்கியம்.

எடுத்துக்காட்டு 5: வண்ண சரிவுடன் அலை அலையான அடிக்கோடு

இந்த எடுத்துக்காட்டு ஒரு சரிவு விளைவுடன் அலை அலையான அடிக்கோட்டை உருவாக்குகிறது. இது பல பண்புகள் மற்றும் உகந்த முடிவுகளுக்கு SVG-யையும் இணைக்கும் ஒரு மேம்பட்ட நுட்பமாகும்.

.wavy-gradient-underline {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

HTML:

<p class="wavy-gradient-underline">அலை அலையான சரிவு அடிக்கோட்டு உரை</p>

விளக்கம்: நாங்கள் ஒரு `wavy` அடிக்கோட்டு பாணியுடன் தொடங்குகிறோம். பின்னர், உண்மையான அடிக்கோடு தெரியாதபடி `text-decoration-color`-ஐ `transparent` என அமைக்கிறோம். பின்னர் நாங்கள் ஒரு நேரியல் சரிவுடன் `background-image`-ஐப் பயன்படுத்துகிறோம். பின்னணி சரிவை உரைக்கு கிளிப் செய்ய `background-clip: text` மற்றும் அதன் விற்பனையாளர் முன்னொட்டு சமமான `-webkit-background-clip: text`-ஐப் பயன்படுத்துவதே முக்கியமாகும். இறுதியாக, உரை நிறத்தை `transparent` ஆக அமைக்கிறோம், இதனால் பின்னணி சரிவு திறம்பட உரை நிறம் மற்றும் அடிக்கோட்டின் நிறமாக மாறும். இதற்கு `-webkit-background-clip`-க்கான உலாவி ஆதரவு தேவை, மேலும் வலுவான குறுக்கு-உலாவி பொருந்தக்கூடிய தன்மைக்கு நீங்கள் SVG-ஐப் பயன்படுத்தக் கருத்தில் கொள்ளலாம்.

அணுகல்தன்மைப் பரிசீலனைகள்

உரை அலங்கார விளைவுகளைப் பயன்படுத்தும்போது, அணுகல்தன்மையைக் கருத்தில் கொள்வது அவசியம். இதோ சில முக்கிய வழிகாட்டுதல்கள்:

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

உலாவி இணக்கத்தன்மை

பெரும்பாலான முக்கிய டெக்ஸ்ட் டெக்கரேஷன் பண்புகள் நவீன உலாவிகளில் நன்கு ஆதரிக்கப்படுகின்றன. இருப்பினும், text-decoration-layer பண்புக்கு ஒப்பீட்டளவில் குறைந்த ஆதரவே உள்ளது. தயாரிப்பில் பயன்படுத்துவதற்கு முன் இணக்கத்தன்மை அட்டவணைகளை (எ.கா., MDN வலை ஆவணங்களில்) சரிபார்க்கவும். பழைய உலாவிகளுக்கு, இதே போன்ற விளைவுகளை அடைய சூடோ-எலிமென்ட்கள் போன்ற மாற்று நுட்பங்களைப் பயன்படுத்த வேண்டியிருக்கலாம்.

பயன்பாட்டு நிகழ்வுகள் மற்றும் உத்வேகங்கள்

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

• செயலுக்கான அழைப்புகள்: செயலுக்கான அழைப்பு பொத்தான்களை பார்வைக்கு மேலும் ஈர்க்கக்கூடியதாகவும் கவனத்தை ஈர்ப்பதாகவும் மாற்ற அடிக்கோடுகள் மற்றும் பின்னணி ஹைலைட்களின் கலவையைப் பயன்படுத்தவும்.
• தலைப்புகள் மற்றும் தலைப்புகள்: ஆழம் மற்றும் காட்சி ஆர்வத்தைச் சேர்க்க அடுக்கு உரை அலங்காரங்களைப் பயன்படுத்தி தனித்துவமான மற்றும் மறக்கமுடியாத தலைப்புகளை உருவாக்கவும்.
• வலியுறுத்தல் மற்றும் ஹைலைட் செய்தல்: ஒரு பத்திக்குள் குறிப்பிட்ட வார்த்தைகள் அல்லது சொற்றொடர்களை வலியுறுத்த நுட்பமான அலங்காரங்களைப் பயன்படுத்தவும்.
• பிராண்டிங் மற்றும் காட்சி அடையாளம்: உங்கள் பிராண்டின் காட்சி அடையாளத்துடன் ஒத்துப்போகும் உரை அலங்கார விளைவுகளை இணைக்கவும்.
• ஊடாடும் விளைவுகள்: பயனர் தொடர்புகளுக்கு (எ.கா., ஹோவர் விளைவுகள்) பதிலளிக்கும் டைனமிக் உரை அலங்கார விளைவுகளை உருவாக்க CSS மாற்றங்கள் மற்றும் அனிமேஷன்களைப் பயன்படுத்தவும்.
• அணுகல்தன்மை-விழிப்புணர்வு வடிவமைப்புகள்: அனைவருக்கும் பயனர் அனுபவத்தை மேம்படுத்த, அணுகல்தன்மை சிறந்த நடைமுறைகளை எப்போதும் மனதில் கொண்டு, உரை அலங்காரங்களை உத்தி ரீதியாகப் பயன்படுத்தவும்.

நிஜ-உலக எடுத்துக்காட்டுகள் & சர்வதேச பரிசீலனைகள்

உலகளாவிய பார்வையாளர்களை மனதில் கொண்டு, இந்த நுட்பங்களின் சில நிஜ-உலகப் பயன்பாடுகளைக் கருத்தில் கொள்வோம்:

• இ-காமர்ஸ் தயாரிப்புப் பட்டியல்கள் (உலகளாவிய): தயாரிப்புப் பெயர்களில் ஒரு நுட்பமான பின்னணி ஹைலைட் அதிக கவனத்தை சிதறடிக்காமல் கண்ணை ஈர்க்கும். நிறத்திற்கான கலாச்சார விருப்பத்தேர்வுகள் கணிசமாக வேறுபடுவதால், வண்ணத் தேர்வுகளை கவனமாகக் கருத்தில் கொள்வது அவசியம். எடுத்துக்காட்டாக, சிவப்பு சில ஆசிய நாடுகளில் நல்ல அதிர்ஷ்டத்தைக் குறிக்கலாம், ஆனால் மேற்கத்திய கலாச்சாரங்களில் ஆபத்தைக் குறிக்கலாம்.
• செய்திக் கட்டுரைத் தலைப்புகள் (சர்வதேச செய்திகள்): ஒரு இரட்டை அடிக்கோடு அல்லது ஒரு தனித்துவமான மேல்கோடு பாணி செய்தித் தலைப்புகளுக்கு ஒரு நுட்பமான மற்றும் தொழில்முறை தோற்றத்தை உருவாக்க முடியும். அச்சுக்கலைத் தேர்வுகளில் கவனமாக இருங்கள்; சில எழுத்துருக்கள் மற்ற மொழிகளை விட சில மொழிகளில் சிறப்பாக ரெண்டர் ஆகும். பயன்படுத்தப்படும் எழுத்துரு இலக்கு மொழியின் எழுத்துத் தொகுப்பை ஆதரிக்கிறது என்பதை உறுதிப்படுத்தவும்.
• கல்வித் தளங்கள் (பன்மொழி): கல்வி உள்ளடக்கத்தில் முக்கிய சொற்களை ஒரு நுட்பமான அடிக்கோடு மற்றும் பின்னணி நிறத்துடன் ஹைலைட் செய்வது புரிதலுக்கு உதவும். ஹைலைட் நிறம் அணுகக்கூடியதாகவும், குறிப்பாக சிக்கலான எழுத்துத் தொகுப்புகள் அல்லது டயக்ரிடிக்ஸ் கொண்ட மொழிகளுக்குப் படிக்க எளிதாக இருப்பதை உறுதிசெய்யவும்.
• லேண்டிங் பேஜ் செயலுக்கான அழைப்புகள் (உலகளாவிய சந்தைப்படுத்தல்): செயலுக்கான அழைப்பு பொத்தான்களில் அலை அலையான அடிக்கோடு அல்லது சரிவு விளைவைப் பயன்படுத்துவது ஈடுபாட்டை அதிகரிக்கும். இருப்பினும், கவனத்தை சிதறடிக்கும் அல்லது ஒளிஉணர்திறன் கால்-கை வலிப்பைத் தூண்டக்கூடிய அனிமேஷன்கள் அல்லது விளைவுகளைப் பயன்படுத்துவதைத் தவிர்க்கவும். கருத்துக்களைப் பெற எப்போதும் ஒரு பன்முக பார்வையாளர்களுடன் வடிவமைப்பைச் சோதிக்கவும்.

முடிவுரை: உங்கள் படைப்பாற்றலை கட்டவிழ்த்து விடுங்கள்

text-decoration-layer பண்பு, மற்ற டெக்ஸ்ட் டெக்கரேஷன் பண்புகள் மற்றும் சூடோ-எலிமென்ட்கள் போன்ற படைப்பு நுட்பங்களுடன் இணைந்து, இணையத்தில் உரையின் காட்சி முறையீட்டை மேம்படுத்துவதற்கான ஒரு சக்திவாய்ந்த கருவித்தொகுப்பை வழங்குகிறது. அடுக்குதல், வண்ண மாறுபாடு மற்றும் அணுகல்தன்மை ஆகியவற்றின் கொள்கைகளைப் புரிந்துகொள்வதன் மூலம், உங்கள் வலைத்தளத்தின் பயனர் அனுபவத்தை உயர்த்தும் பிரமிக்க வைக்கும் மற்றும் ஈர்க்கக்கூடிய உரை வடிவமைப்புகளை நீங்கள் உருவாக்கலாம். அணுகல்தன்மைக்கு முன்னுரிமை அளித்து, உங்கள் வடிவமைப்புகளை முழுமையாகச் சோதித்து, அனைத்து பயனர்களுக்கும், அவர்களின் திறன்கள் அல்லது உலாவல் சூழலைப் பொருட்படுத்தாமல் அவை நன்றாக வேலை செய்வதை உறுதிசெய்யவும்.

உங்கள் சொந்த தனித்துவமான டெக்ஸ்ட் டெக்கரேஷன் ஸ்டைல்களைக் கண்டறிய பண்புகள் மற்றும் நுட்பங்களின் வெவ்வேறு கலவைகளுடன் பரிசோதனை செய்யுங்கள். சாத்தியங்கள் கிட்டத்தட்ட முடிவற்றவை!