இணையத்தளத்தில் படங்களின் நிழல்கள் (image shadow)

இணையத்தளத்தில் படங்களின் நிழல்கள் (image shadow)
Posted by: முஃப்தி on Sunday, February 8th, 2009

தமிழ்மணம் பரிந்துரை : 0/0

http://www.nwebsupport.com/?p=118



Pathivu Toolbar ©2009thamizmanam.com


இணையத்தளத்தில் உள்ள படங்களை, பார்வையாளர்களுக்கு கண்கவரும் வண்ணம் வெளிப்படுத்த இதனை பயன்படுத்தலாம். இதற்காக பயன்படுவது மிகச்சிறிய css code மற்றும் ட்ரான்ஸ்பரன்ஸி முறையில் தயாரிக்கப்பட்ட ஒரு .gif ஆகிய இரண்டு மட்டுமே.

உதா: image shadow

மாதிரிக்காக தயாரிக்கப்பட்ட html பக்கம் அதற்குரிய துணைக் கோப்புகளுடன் இங்கு உள்ளது. இதனை பதிவிறக்கம் செய்து உங்கள் கணினியிலேயே சோதித்துப் பார்க்கலாம்.

தனிப்பட்ட html பக்கங்களை பயன்படுத்துகின்றவர்கள் மாதிரிக்காக தயாரிக்கப்பட்ட இம்முறையை பயன்படுத்திக்கொள்ளலாம்.

வேர்ட்பிரஸ்:

நீங்கள் பயன்படுத்தும் வேர்ட்பிரஸ் Theme-ல் “img” என்ற மூன்றெழுத்து folder-ஐ உருவாக்கி அதில் shadow.gif என்ற கோப்பினை பதிவேற்றுங்கள்.

உங்களின் theme sytlesheet மாதிரியை முழுவதுமாக backup எடுத்து வைத்துக்கொள்ளுங்கள். கீழ்கண்ட வரிகளை sytlesheet-ல் சேர்க்கவேண்டும்.

img
{
background:url(img/shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border:0;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}

a:link img,
a:visited img,
a:hover img,
a:active img {
border:none;
background:none;
padding:none;
background:url(img/shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}

படங்களுக்காக இதனை ஒத்த வேறு ஏதேனும் css code (உதா: img { } ) உங்கள் stylesheet-ல் எழுதப்பட்டிருந்தால் அதனை மட்டும் கண்டுப்பிடித்து நீக்கி சோதித்துப் பார்க்கவும்.

பிளாக்கர்:

பிளாக்கர் டெம்ளேட்டுகளில் அதிகமானவை ஏதாவதொரு image decor code-களை உள்ளடக்கியிருக்கம். அத்தகைய Code-களை நீக்காவிட்டால் இதனை சோதித்துப்பார்க்க இயலாது. எனவே ஓரளவு விஷயம் தெரிந்தவர்கள் மட்டும் பிளாக்கரில் இதனை சோதித்துப் பார்க்கவும்.

Layout பகுதிக் சென்று Edit HTML கிளிக் செய்து Download Full Template என்பதை சொடுக்கி Backup ஒன்றை எடுத்து வைத்துக்கொள்ளுங்கள்.

பிறகு, கீழ்கண்ட வரிகளை Template-ன் Head பகுதியில் stylesheet code-களை குறிக்கக்கூடிய பகுதியில் சேர்க்க வேண்டும்.

img
{
background:url(http://www.nwebsupport.com/service/shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border:0;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}

a:link img,
a:visited img,
a:hover img,
a:active img {
border:none;
background:none;
padding:none;
background:url(http://www.nwebsupport.com/service/shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}

குறிப்பு: பொதுவாக stylesheet-ல் ஏற்பட்ட மாற்றங்கள், தளத்தில் உடனடியாக தெரிவிதில்லை. எனவே refresh செய்து பார்க்கவும்.