வணக்கம் நண்பர்களே இன்று CSS3 சம்பந்தமான ஒரு பதிவுடன் உங்களை அணுகின்றேன்.இது பற்றி உங்களுக்கு அதிகமான அளவு தெரிந்திருக்கும். உண்மையிலே இது Web Developer க்குத்தான் அதிகபட்சமாக உதவும்.இது Webpage ன் Layout மற்றும் Style போன்றவற்றைக் கட்டுப்படுத்த உதவும்.இப்பொழுது இதன் பிந்தைய பதிப்பான CSS3 வந்துள்ளது. இதில் CSS2 இல் செய்ய முடியாத சில வேலைகளைஅழகாகவும் இலகுவாகவும் செய்து முடிக்கலாம்.அப்படி ஒரு பயன்பாட்டைத்தான் இன்று பார்ப்போம்.
இதில் நாம் 3 வகையான Border களை உருவாக்கிக் கொள்ள முடியும். அப்படி உருவாக்கினாலும் சில Coding ஆனது சில Browser களில் வேலை செய்ய முடியாமல் போய்விடும்.அவை பற்றி இனி பார்ப்போம்.
- border-radius
- box-shadow
- border-image
வேலை செய்யாத Browser பட்டியல்
1.CSS3 Rounded Corners
இதற்கான Coding பற்றி கீழே பார்ப்போம்.
<!DOCTYPE html>
<html>
<head>
*********************************************************************************
<style> இங்கு Style க்குள்ளேதான் CSS3 ற்குரிய Coding எழுதப்பட்டுள்ளது.
div div என்பது அதற்குரிய பெயராகும். பிறகு இதைப்பயன் படுத்தித்தான் Style மாற்றுவோம்.
{
border:2px solid #a1a1a1; இங்கு Border அளவு நிறம் என்பன கொடுக்கப்பட்டுள்ளது
padding:10px 40px;
background:#dddddd; இங்கு Border Backgroun நிறம் கொடுக்கப்பட்டுள்ளது
width:300px;
border-radius:25px; இங்கு Border ன் வளைவின் அளவு கொடுக்கப்பட்டுள்ளது இதுதான் முக்கியமானது
}
</style>
*********************************************************************************
</head><body>
<div>The border-radius property allows you to add rounded corners to elements.</div>
இங்கு மேலே கொடுக்கப்பட்ட பெயரைப் பயன்படுத்தி அந்த வசனத்திற்கு Border style கொடுக்கப்பட்டுள்ளது.
</body>
</html>
இப்படித்தான் Output வரும்.
2.CSS3 Box Shadow
<!DOCTYPE html>
<html>
<head>
<style>
*********************************************************************************
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888; இதுதான் முக்கியமான Coding.
}
</style>
*********************************************************************************
</head>
<body>
<div>Tamil computer orupaarvai.blogspot.com Now going to a big challenge</div>
</body>
</html>
இப்படித்தான் Output வரும்
தேவைக்கு ஏற்றவாறு பாவித்துக் கொள்ளுங்கள்.
3.CSS3 Border Image
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
}
*********************************************************************************
#round
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
} ஒவ்வொரு Browser ற்கும் வேறு வேறான Coding எழுதப்பட்டுள்ளது. தேவைக்கு ஏற்றவாறு பாவித்துக் கொள்ளுங்கள்.
*********************************************************************************
#stretch
{
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
} ஒவ்வொரு Browser ற்கும் வேறு வேறான Coding எழுதப்பட்டுள்ளது. தேவைக்கு ஏற்றவாறு பாவித்துக் கொள்ளுங்கள்.
*********************************************************************************
</style></head><body>
<p><b>Note:</b> Internet Explorer does not support the border-image property.</p>
<p>The border-image property specifies an image to be used as a border.</p>
<div id="round">Here, the image is tiled (repeated) to fill the area.</div>
<br>
<div id="stretch">Here, the image is stretched to fill the area.</div>
<p>Here is the image used:</p>
<img src="border.png"> இங்கு பயன்படுத்தப்பட்ட Image ஆகும்.
</body>
</html>
இப்படித்தான் Output வரும்தேவைக்கு ஏற்றவாறு பாவித்துக் கொள்ளுங்கள்.
******இங்கு முக்கியமாக கவனிக்க வேண்டிய ஒரு விடயம் உள்ளது அது என்ன வென்றால் பயன்படுத்தப்படடிருக்கும் Image File ஐ கவனத்தில் கொள்ள வேண்டும் இது நான் வைத்துள்ள ஒரு Image ஆகும் ஆகவே நீங்கள் ஒரு Image எடுத்து அதற்கு நான் கொடுத்த பெயரை Rename பண்ணி பாவியுங்கள் அல்லது உங்களிடம் உள்ள Image இன் பெயரை இந்த Coding இல் மாற்றி விடுங்கள்.******
நன்றி மீண்டும் ஒரு பதிவுடன் சந்திப்போம்.
0 comments:
Post a Comment