CSS Border Radius

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

இதில் பல Css Code உள்ளன அவற்றில் மிகப்பெரும்பாலானவை பற்றி நாம் அடுத்தடுத்து வரும் பதிவுகளில் இவற்றை யெல்லாம் பார்ப்போம். இவற்றில் CSS Border Radius முக்கியமானதுதான் இன்றைய பதிவும் அது பற்றியதுதான் So அதையும் எவ்வாறு செய்வது என்று பார்ப்போம்.

What is CSS Border Radius ?

ஒரு உறுப்பின் Elements மூலைகளின் ஆரத்தை Radius மாற்றுவதற்கு நாம் இவற்றை பாவிக்கலாம். and ஒரு உறுப்பின் மூலையை எவ்வளவு அழகாக மாற்றலாமோ அந்த அளவு அது அழகாய் மாறும் அப்படி மாறும் பட்சத்தில் தான் எமது இணையப்பக்கம் அழகாய் மாறும். எப்போதும் பாவனையாளர்களை கவர்வதற்கு நமது இணையப்பக்கம் அழகாக இருக்கவேண்டும்;. வாடிக்கையாளர்களை அதிகம் கவர இந்த CSS Properties ஆனது மிகவும் அழகாய் மாற்றும்.

Actually இணையப்பக்கத்தை அழகாக மாற்றுவதே ஒரு கலைதான் அந்த கலையை சிறப்பாக மாற்றினால்தான் எமது பக்கத்திற்கு வரும் வாடிக்கையாளர்களின் எண்ணிக்கை அதிகரிக்கும். So எமது வியாபாரமும் சிறப்பாகச் செல்லும் CSS Property ஐ சரியாக Apply செய்து எமது பக்கத்தை சிறப்பாக வடிவமைக்க வேண்டும். So அதற்காகத்தான் இந்த பதிவு இவற்றையும் கொஞ்சம் வாசித்துக் கொள்ளுங்கள்.

How We can Use CSS Border Radius?

இங்கு நாம் Css Border Radius. 4 பெறுமதிகளை வழங்க வேண்டும்.

உதாரணத்திற்காக எவ்வாறு என்று பார்ப்போம்.

Four Values of CSS :- A , B , C , D

இங்கு என்ன என்ன பெறுமதி எவ்வாறு அமையுது என்று பார்ப்போம்.

A :-Top Left மேல்-இடது மூலை
B :- Top Right மேல்-வலது
C: -Bottom Right கீழ்-வலது மூலை
D:- Bottom Left கீழ்-இடது மூலை

முதல் மதிப்பு மேல்-இடது மூலைக்கும், இரண்டாவது மதிப்பு மேல்-வலது மூலைக்கும், மூன்றாவது மதிப்பு கீழ்-வலது மூலைக்கும், நான்காவது மதிப்பு கீழ்-இடது மூலைக்கும் பொருந்தும்).

Html இல் ஒரு Div Tag உருவாக்கியுள்ளேன் அத்துடன் அதற்கு "radius" எனப் ( ID) பெயரிட்டுள்ளேன்.

So Sample Code

    <div id="radius">CSS Border Radius</div>

முதலில் radius Div ஐ கொஞ்சம் அழகாக மாற்றுவதற்காக சில CSS Codeகளை

பாவித்துள்ளேன்

 <style>

        #radius {

            border-radius: 25px 25px 25px 25px;

            border: 2px solid #73AD21;

            padding: 20px;

            width: 200px;

            height: 150px;

}

    </style>

Finally அதன் Output ஆனது இந்த மாதிரி தோற்றமளிக்கும்.

Finally Out Put of Above Coding

இங்கு 4 மூலைகளிற்கும் 25px அளவில் Size கொடுத்துள்ளோம் So அவற்றின் வளைவானது இவ்வாறு தோற்றமளிக்கும்.

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

 border-radius: 25px 35px 45px 55px;

நாம் கொடுக்கும் அளவிற்கேற்றாற் போல் அது மாற்றம் அடையும்.

Different Ways to Use CSS Border Radius

நாம் மேலே கொடுத்த Code போல் ஒரு வரியில் ( border-radius: 25px 35px 45px 55px;) கொடுத்தும் பாவிக்கலாம் இல்லாவிடின் எல்லா மூலைகளையும் நமக்கு தெரிந்தாற்போல் சொல்லவும் முடியும் உதாரணமாக கீழ்வருமாறு

            border-top-left-radius: 25px;

            border-top-right-radius: 25px;

            border-bottom-right-radius: 25px;

            border-bottom-left-radius: 25px;

இவையிரண்டும் ஒரே வேலையைத்தான் செய்யும் என்பதை தெளிவாக

தெரிந்து கொள்ளுங்கள்.

முக்கிய குறிப்பு CSS Border Radius ஐ நாம் 50 % ற்கு கொடுத்தால் எமது உருவானது வட்டாக மாறுவதை காணலாம்.

CSS Border Radius பற்றி வாசித்தமைக்கு நன்றி.

இன்னும் பல சுவாசியமான முக்கியமான மற்றும் தொழிநுட்பம் சார்ந்த பதிவுகள் வெளிவரும். நன்றி மீண்டும் வருக.

CSS Border Radius