தமிழ்

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

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;

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

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

எடுத்துக்காட்டு 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()`-க்கான முக்கியக் குறிப்புகள்:

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

`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 உள்ளிட்ட நவீன உலாவிகளில் நல்ல ஆதரவைப் பெற்றுள்ளது. இருப்பினும், பழைய உலாவிகள் இதை ஆதரிக்காமல் இருக்கலாம். ஒரு சீரான பயனர் அனுபவத்தை உறுதிசெய்ய பழைய உலாவிகளுக்கு ஒரு ஃபால்பேக்கை வழங்குவது மிகவும் முக்கியம்.

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

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

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

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

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

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

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

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

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

முடிவுரை

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

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