Border Radius
CSS-ல் உள்ள border எனும் பண்பு நமது content-ஐ சுற்றி ஒரு border-ஐ உருவாக்கும். CSS3-ல் உள்ள border-radius எனும் பண்பு அவ்வாறு உருவாக்கப்பட்ட border-ன் நான்கு முனைகளையும் கூரியதாக இல்லாமல், ஓர் அழகிய வளைவாக மாற்றும். இந்தப் பண்பின் மதிப்பினை 25px, 50px, 100px எனக் கொடுத்து அந்த வளைவு எவ்வாறெல்லாம் மதிப்பிற்கு ஏற்ப மாறுகிறது என்பதை கவனிக்கவும்.
அதற்கு பின்வருமாறு ஒரு heading-ஐ program-ல் உருவாக்கிவிட்டு பின்னர் அதற்கான style section-ல் அதன்கீழ் உள்ளவாறு கொடுக்கவும்.
<h1>This is my Country</h1>
h1 {border-radius: 25px; border: 2px solid black; padding:20px; width: 200px; height: 100px;}
இங்கு border-radiusன் மதிப்பு வெறும் 25px என இருப்பதால், border-ன் நான்கு மூலைகளும் 25px-க்கு வளைக்கப்பட்டு விடும். ஒவ்வொரு மூலையும் எந்த அளவிற்கு வளைக்கப்பட வேண்டும் என்பதை தனித்தனியே கூற விரும்பினால் border-radius: 15px 25px 50px 100px; என்று தனித்தனியாகவும் கொடுக்கலாம்.
Gradients
பல நிறங்கள் கலக்கப்பட்ட நிலையில் ஒரு division-ஐ நிரப்புவதற்கு gradient எனும் பண்பு பயன்படுகிறது. இதனை linear-gradient, radical-gradient என்று இரண்டு வகையாகப் பிரிக்கலாம்.
linear-gradient என்பது கொடுக்கப்படும் நிறங்களை இடமிருந்து வலமாகவோ அல்லது மேலிருந்து கீழாகவோ கலக்கச் செய்யும். radical-gradient என்பது நிறங்களை உள்ளிருந்து வெளியாகக் கலக்கச் செய்யும்.
பின்வருமாறு ஒரு division-ஐ program-ல் உருவாக்கிவிட்டு பின்னர் அதற்கான style section-ல் அதன்கீழ் உள்ளவாறு கொடுக்கவும்.
<div></div>
div {height: 200px; background: linear-gradient(red, blue); }
இது linear-gradient ஆகும். நிறங்கள் மேலிருந்து கீழாகக் கலக்கப்படும். இதனை இடமிருந்து வலமாகக் கலக்க விரும்பினால், linear-gradient(to right, red, blue) என்று கொடுக்கலாம்.
அவ்வாறே உள்ளிருந்து வெளியாகக் கலக்கச் செய்வதற்கான radical-gradient பின்வருமாறு அமையும்.
div {height: 200px; background: radical-gradient(red, blue, green); }
Displaying Texts
நாம் வெளிப்படுத்தும் வரிகளைச் சுற்றி ஒரு border உள்ளதெனில் அதற்குள் வரிகளை எவ்வாறு அடக்கப்பட வேண்டும் என்பதை CSS3-ல் கூற முடியும். இதற்காக text-overflow, word-wrap, word-break எனும் 3 பண்புகள் உள்ளன.
text-overflow என்பது border-க்குள் அடங்காதவற்றை வெளிப்படுத்தாது. இதன் மதிப்பு clip என்றிருந்தால் border-ஐத் தாண்டிச் செல்லும் எழுத்துக்களை அந்த இடத்திலேயே துண்டித்து விடும். ellipsis என்றிருந்தால் border-ஐ ஒரு வார்த்தை தாண்டப் போகிறதெனில் அந்த வார்த்தையைத் துண்டித்துவிட்டு அதற்கு பதிலாக மூன்று புள்ளிகளை … வெளிப்படுத்தும்.
மேலும் text-overflow என்பது அதன் துணைப்பண்பான overflow-ன் மதிப்பைப் பொறுத்து மீதி எழுத்துக்களை வெளிப்படுத்தலாமா வேண்டாமா என்பதை முடிவு செய்யும். overflow-ன் மதிப்பு hidden என்றிருக்கும்போது மீதி எழுத்துக்கள் வெளிப்படாமலும், visible என்றிருக்கும்போது மீதி எழுத்துக்களை வெளிப்படுத்தவும் முடியும்.
இவை பின்வருமாறு
<body>
<p class=”a”>India is my country. All Indians are my brothers and sisters. I love my country.</p>
<p class=”b”>India is my country. All Indians are my brothers and sisters. I love my country.</p>
<div class=”test” style=”text-overflow:ellipsis;”>This is some long text that will not fit in the box</div><br>
<div class=”test” style=”text-overflow:clip;”>This is some long text that will not fit in the box</div>
</body>
<style>
p.a{white-space: nowrap; width: 200px; border: 1px solid black; overflow: hidden; text-overflow: clip;}
p.b{white-space: nowrap; width: 200px; border: 1px solid black; overflow: hidden; text-overflow: ellipsis;}
div.test {white-space: nowrap; width: 200px; overflow: hidden; border: 1px solid black;}
div.test:hover {text-overflow: inherit; overflow: visible;}
</style>
word-wrap என்பது பெரியதாக இருக்கும் ஒரு வார்த்தையை அதன் border-ஐ விட்டுத் தாண்டிச் செல்ல விடாமல் அடுத்த வரிக்குள் மடக்கிக் காட்டப் பயன்படுகிறது.
இது பின்வருமாறு.
<p> CognizantTechnologySolutions. The bestplacetowork.</p>
p{width: 150px; border: 1px solid green; word-wrap: break-word;}
word-wrap எனும் பண்பு அது பெரும் மதிப்பினைப் பொறுத்து ஒரு முழு வார்த்தையை அடுத்த வரியில் மடக்கிக் காட்டியோ அல்லது அப்படியே எல்லையைத் தாண்டியோ வெளிப்படுத்தும்.
word-wrap ஆனது break-all எனும் மதிப்பினைப் பெறும்போது வார்த்தைகளை மடக்கி அடுத்த வரியிலும், keep-all மதிப்பினைப் பெறும்போது வார்த்தைகளை மடக்காமல் எல்லைகளைத் தாண்டினாலும் பரவாயில்லை என்று அதே வரியிலும் வெளிப்படுத்தும்.
இது பின்வருமாறு.
<p class=”a”>CognizantTechnologySolutions. The bestplacetowork.</p>
<p class=”b”>CognizantTechnologySolutions. The bestplacetowork.</p>
p.a{width: 140px; border: 1px solid black; word-break: keep-all;}
p.b{width: 140px; border: 1px solid black; word-break: break-all;}
— முற்றும்
து. நித்யா
தொடரின் பிற பகுதிகளைப் படிக்க – www.kaniyam.com/category/css-in-tamil/