CSS Shape Outside: பிரத்தியேக வடிவங்களைச் சுற்றி உரையை மடக்குவதில் தேர்ச்சி பெறுதல்

வலை வடிவமைப்பு உலகில், பயனர்களின் கவனத்தை ஈர்ப்பதற்கு பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் தனித்துவமான தளவமைப்புகளை உருவாக்குவது மிகவும் முக்கியம். பாரம்பரிய CSS தளவமைப்பு நுட்பங்கள் ஒரு உறுதியான அடித்தளத்தை வழங்கினாலும், `shape-outside` பண்பு ஒரு புதிய பரிமாண படைப்பாற்றல் சாத்தியங்களைத் திறக்கிறது. இந்தப் பண்பு, பிரத்தியேக வடிவங்களைச் சுற்றி உரையை மடக்க உங்களை அனுமதிக்கிறது, சாதாரண வலைப்பக்கங்களை வசீகரிக்கும் காட்சி அனுபவங்களாக மாற்றுகிறது.

CSS `shape-outside` என்றால் என்ன?

CSS Shapes Module Level 1-இன் ஒரு பகுதியான `shape-outside` பண்பு, ஒரு வடிவத்தை வரையறுக்கிறது, அதைச் சுற்றி உரை போன்ற இன்லைன் உள்ளடக்கம் பாயும். செவ்வக பெட்டிகளுக்குள் அடைக்கப்படுவதற்குப் பதிலாக, உரை நீங்கள் வரையறுத்த வடிவத்தின் விளிம்புகளுக்கு நேர்த்தியாக மாற்றியமைத்து, ஒரு மாறும் மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய விளைவை உருவாக்குகிறது. இது குறிப்பாக பத்திரிக்கை பாணி தளவமைப்புகள், ஹீரோ பிரிவுகள், மற்றும் கடினமான, பெட்டி போன்ற கட்டமைப்புகளில் இருந்து விடுபட விரும்பும் எந்தவொரு வடிவமைப்பிற்கும் பயனுள்ளதாக இருக்கும்.

அடிப்படை தொடரியல் மற்றும் மதிப்புகள்

`shape-outside`-க்கான தொடரியல் ஒப்பீட்டளவில் நேரடியானது:

shape-outside: <shape-value> | <url> | none | inherit | initial | unset;

சாத்தியமான மதிப்புகளைப் பார்ப்போம்:

• `none`: வடிவத்தை முடக்குகிறது, மேலும் உள்ளடக்கம் அந்த உறுப்பு ஒரு செவ்வக வடிவத்தைக் கொண்டிருந்தால் பாய்வது போல் பாயும். இது இயல்புநிலை மதிப்பாகும்.
• `circle()`: ஒரு வட்ட வடிவத்தை உருவாக்குகிறது. தொடரியல் `circle(radius at center-x center-y)` ஆகும். எடுத்துக்காட்டாக, `circle(50px at 25% 75%)`.
• `ellipse()`: ஒரு நீள்வட்ட வடிவத்தை உருவாக்குகிறது. தொடரியல் `ellipse(radius-x radius-y at center-x center-y)` ஆகும். எடுத்துக்காட்டாக, `ellipse(100px 50px at 50% 50%)`.
• `inset()`: ஒரு உள்செருகப்பட்ட செவ்வகத்தை உருவாக்குகிறது. தொடரியல் `inset(top right bottom left round border-radius)` ஆகும். எடுத்துக்காட்டாக, `inset(20px 30px 40px 10px round 5px)`.
• `polygon()`: ஒரு பிரத்தியேக பலகோண வடிவத்தை உருவாக்குகிறது. தொடரியல் `polygon(point1-x point1-y, point2-x point2-y, ...)` ஆகும். எடுத்துக்காட்டாக, `polygon(50% 0%, 0% 100%, 100% 100%)` ஒரு முக்கோணத்தை உருவாக்குகிறது.
• `url()`: URL மூலம் குறிப்பிடப்பட்ட ஒரு படத்தின் ஆல்பா சேனலின் அடிப்படையில் ஒரு வடிவத்தை வரையறுக்கிறது. எடுத்துக்காட்டாக, `url(image.png)`. படம் வேறு டொமைனில் ஹோஸ்ட் செய்யப்பட்டிருந்தால் CORS-செயல்படுத்தப்பட்டதாக இருக்க வேண்டும்.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் செயல்படுத்தல்

எடுத்துக்காட்டு 1: ஒரு வட்டத்தைச் சுற்றி உரையை மடக்குதல்

ஒரு வட்டத்தைச் சுற்றி உரையை மடக்கும் ஒரு எளிய எடுத்துக்காட்டுடன் ஆரம்பிக்கலாம்:

.circle-shape {
  width: 200px;
  height: 200px;
  float: left; /* Important for text to flow around the shape */
  shape-outside: circle(50%);
  margin-right: 20px;
  background-color: #f0f0f0;
}

.text-container {
  width: 600px;
}

HTML:

<div class="circle-shape"></div>
<div class="text-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  ... (Long text here) ... </p>
</div>

இந்த எடுத்துக்காட்டில், `shape-outside: circle(50%)` உடன் ஒரு வட்ட உறுப்பை உருவாக்குகிறோம். `float: left` பண்பு மிகவும் முக்கியமானது; இது உரையை வடிவத்தைச் சுற்றி பாய அனுமதிக்கிறது. `margin-right` வடிவத்திற்கும் உரைக்கும் இடையில் இடைவெளியைச் சேர்க்கிறது.

எடுத்துக்காட்டு 2: `polygon()` ஐப் பயன்படுத்தி ஒரு முக்கோணத்தை உருவாக்குதல்

இப்போது, `polygon()` ஐப் பயன்படுத்தி ஒரு சிக்கலான வடிவத்தை உருவாக்குவோம்:

.triangle-shape {
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
  margin-right: 20px;
  background-color: #f0f0f0;
}

HTML:

<div class="triangle-shape"></div>
<div class="text-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... (Long text here) ... </p>
</div>

இங்கே, `polygon()` செயல்பாட்டைப் பயன்படுத்தி ஒரு முக்கோணத்தை வரையறுக்கிறோம். ஆயத்தொலைவுகள் முக்கோணத்தின் உச்சிகளைக் குறிப்பிடுகின்றன: (50% 0%), (0% 100%), மற்றும் (100% 100%).

எடுத்துக்காட்டு 3: ஒரு படத்துடன் `url()` ஐப் பயன்படுத்துதல்

`url()` செயல்பாடு ஒரு படத்தின் ஆல்பா சேனலின் அடிப்படையில் ஒரு வடிவத்தை வரையறுக்க உங்களை அனுமதிக்கிறது. இது இன்னும் அதிகமான படைப்பு சாத்தியங்களைத் திறக்கிறது.

.image-shape {
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: url(path/to/your/image.png);
  margin-right: 20px;
  background-size: cover; /* Important for proper scaling */
}

HTML:

<div class="image-shape"></div>
<div class="text-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... (Long text here) ... </p>
</div>

`url()`-க்கான முக்கியக் குறிப்புகள்:

• படத்திற்கு ஒரு வெளிப்படையான பின்னணி (ஆல்பா சேனல்) இருக்க வேண்டும்.
• படம் வேறு டொமைனில் ஹோஸ்ட் செய்யப்பட்டிருந்தால், அது CORS (Cross-Origin Resource Sharing) மூலம் அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யவும். பொருத்தமான `Access-Control-Allow-Origin` தலைப்பை அனுப்ப உங்கள் சேவையகத்தை நீங்கள் உள்ளமைக்க வேண்டியிருக்கலாம்.
• உறுப்புக்குள் படம் எவ்வாறு அளவிடப்படுகிறது என்பதைக் கட்டுப்படுத்த `background-size: cover` அல்லது `background-size: contain` ஐப் பயன்படுத்தவும்.

மேம்பட்ட நுட்பங்கள் மற்றும் கவனத்தில் கொள்ள வேண்டியவை

`shape-margin`

`shape-margin` பண்பு வடிவத்தைச் சுற்றி ஒரு மார்ஜினைச் சேர்க்கிறது, வடிவத்திற்கும் சுற்றியுள்ள உரைக்கும் இடையில் அதிக இடைவெளியை உருவாக்குகிறது. இது வாசிப்புத்திறன் மற்றும் காட்சி முறையீட்டை மேம்படுத்துகிறது.

.circle-shape {
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: circle(50%);
  shape-margin: 10px; /* Adds a 10px margin around the circle */
  margin-right: 20px;
  background-color: #f0f0f0;
}

`shape-image-threshold`

`shape-outside: url()` ஐப் பயன்படுத்தும்போது, `shape-image-threshold` பண்பு வடிவத்தைப் பிரித்தெடுக்கப் பயன்படுத்தப்படும் ஆல்பா சேனல் வரம்பை தீர்மானிக்கிறது. மதிப்புகள் 0.0 (முற்றிலும் வெளிப்படையானது) முதல் 1.0 (முற்றிலும் ஒளிபுகா) வரை இருக்கும். இந்த மதிப்பை சரிசெய்வது வடிவத்தைக் கண்டறிதலைச் செம்மைப்படுத்தலாம்.

.image-shape {
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: url(path/to/your/image.png);
  shape-image-threshold: 0.5; /* Adjust the threshold as needed */
  margin-right: 20px;
  background-size: cover;
}

CSS Transitions மற்றும் Animations உடன் இணைத்தல்

மாறும் மற்றும் ஊடாடும் விளைவுகளை உருவாக்க `shape-outside` ஐ CSS transitions மற்றும் animations உடன் இணைக்கலாம். எடுத்துக்காட்டாக, hover அல்லது scroll-இல் உரை மடக்கின் வடிவத்தை மாற்ற `shape-outside` பண்பை அனிமேட் செய்யலாம்.

.circle-shape {
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: circle(50%);
  margin-right: 20px;
  background-color: #f0f0f0;
  transition: shape-outside 0.3s ease;
}

.circle-shape:hover {
  shape-outside: ellipse(60% 40% at 50% 50%);
}

இந்த எடுத்துக்காட்டில், `shape-outside` பண்பு hover-இல் ஒரு வட்டத்திலிருந்து ஒரு நீள்வட்டத்திற்கு மாறுகிறது, இது ஒரு நுட்பமான ஆனால் ஈர்க்கக்கூடிய விளைவை உருவாக்குகிறது.

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

`shape-outside` ஆனது Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளில் நல்ல ஆதரவைப் பெற்றுள்ளது. இருப்பினும், பழைய உலாவிகள் இதை ஆதரிக்காமல் இருக்கலாம். ஒரு சீரான பயனர் அனுபவத்தை உறுதிசெய்ய பழைய உலாவிகளுக்கு ஒரு ஃபால்பேக்கை வழங்குவது மிகவும் முக்கியம்.

ஃபால்பேக் உத்திகள்:

• Feature Queries (`@supports`): உலாவி `shape-outside` ஐ ஆதரிக்கிறதா என்பதைக் கண்டறியவும், ஆதரித்தால் மட்டுமே வடிவத்தைப் பயன்படுத்தவும் feature queries-ஐப் பயன்படுத்தவும்.

@supports (shape-outside: circle(50%)) {
  .circle-shape {
    shape-outside: circle(50%);
  }
}

• Progressive Enhancement: உங்கள் தளவமைப்பை `shape-outside` இல்லாமல் செயல்படும் வகையில் வடிவமைத்து, பின்னர் அதை ஆதரிக்கும் உலாவிகளுக்கு வடிவத்துடன் படிப்படியாக மேம்படுத்தவும்.

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

`shape-outside` காட்சி முறையீட்டை மேம்படுத்த முடியும் என்றாலும், அணுகல்தன்மையைக் கருத்தில் கொள்வது மிகவும் முக்கியம். உரை படிக்கக்கூடியதாக இருப்பதையும், வடிவம் முக்கியமான உள்ளடக்கத்தை மறைக்கவில்லை என்பதையும் உறுதிப்படுத்தவும். பின்வருவனவற்றைக் கவனியுங்கள்:

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

உலகளாவிய வடிவமைப்புப் பரிசீலனைகள்

உலகளாவிய பார்வையாளர்களுக்காக `shape-outside` ஐச் செயல்படுத்தும்போது, பின்வருவனவற்றைக் கவனியுங்கள்:

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

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

`shape-outside` ஐ பல்வேறு படைப்பு வழிகளில் பயன்படுத்தலாம்:

• பத்திரிக்கை பாணி தளவமைப்புகள்: கட்டுரைகள் மற்றும் வலைப்பதிவு இடுகைகளுக்கு பார்வைக்கு ஈர்க்கக்கூடிய தளவமைப்புகளை உருவாக்கவும்.
• ஹீரோ பிரிவுகள்: உங்கள் வலைத்தளத்தின் ஹீரோ பிரிவிற்கு ஒரு தனித்துவமான தொடுதலைச் சேர்க்கவும்.
• தயாரிப்பு பக்கங்கள்: பிரத்தியேக வடிவங்கள் மற்றும் உரை மடக்கல்களுடன் தயாரிப்புகளைக் காட்சிப்படுத்தவும்.
• போர்ட்ஃபோலியோ வலைத்தளங்கள்: பார்வைக்கு பிரமிக்க வைக்கும் தளவமைப்புகளுடன் உங்கள் வேலையை முன்னிலைப்படுத்தவும்.

எடுத்துக்காட்டுகள்:

• ஒரு செய்தி வலைத்தளம் உலகளாவிய செய்தி சேகரத்தை அடையாளப்படுத்த, ஒரு பூகோளத்தின் படத்தை சுற்றி உரையை மடக்க `shape-outside` ஐப் பயன்படுத்துகிறது.
• ஒரு ஆன்லைன் கலைக்கூடம் கலைப்படைப்புகளைக் காண்பிக்க மாறும் தளவமைப்புகளை உருவாக்க `shape-outside` ஐப் பயன்படுத்துகிறது.
• ஒரு பயண வலைப்பதிவு வெவ்வேறு நாடுகளின் அடையாளச் சின்னங்களின் படங்களைச் சுற்றி உரையை மடக்க `shape-outside` ஐப் பயன்படுத்துகிறது.

பொதுவான சிக்கல்களைச் சரிசெய்தல்

• உரை மடக்காதது: `shape-outside` உள்ள உறுப்பு float செய்யப்பட்டிருப்பதை உறுதிசெய்யவும் (எ.கா., `float: left` அல்லது `float: right`).
• படம் சரியாகக் காட்டப்படாதது: படப் பாதை சரியாக இருப்பதையும், படம் அணுகக்கூடியதாக இருப்பதையும் சரிபார்க்கவும்.
• வடிவம் ரெண்டர் ஆகாதது: `shape-outside` மதிப்பில் தொடரியல் பிழைகளைச் சரிபார்க்கவும்.
• CORS சிக்கல்கள்: படம் வேறு டொமைனில் ஹோஸ்ட் செய்யப்பட்டிருந்தால் CORS-செயல்படுத்தப்பட்டிருப்பதை உறுதிசெய்யவும்.

முடிவுரை

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

மேலும் கற்றல் மற்றும் ஆதாரங்கள்

• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
• CSS Shapes Module Level 1: https://www.w3.org/TR/css-shapes-1/
• CSS Tricks: https://css-tricks.com/almanac/properties/s/shape-outside/