HTML பகுதி பதினொன்றில் நாம் பார்க்க இருப்பது 3D வகை லிங்க்-குகளை நம் தளத்தில் எப்படி கொடுக்கலாம் . அதிக சி.எஸ்.எஸ். கோடுகளை பயன்படுத்தி தான் இது போன்ற லிங்க் களை நாம் கொடுக்க முடியும் . ஹச்.டி.எம்.எல் மட்டும்
வைத்து இது போன்ற லிங்க் களை கொடுக்க இயலாது ..
சாதாரணமாக ஹச்.டி.எம்.எல் பயன்படுத்தி தான் லிங்க் கொடுத்திருப்போம்
இனி இது போன்ற 3D லிங்க்-குகள் நமக்கு உன்னதமான அனுபவத்தை கொடுக்கும் என்பதில் சந்தேகம் இல்லை .
கீழே கொடுக்கப்படும் HTML கோடிங்கை சிறிதும் மாற்றாமல் பதிவின் நடுவிலோ , அல்லது விட்ஜெட்-லோ வேறு இணையதளத்திலோ அல்லது உங்களுக்கு பயன் படும் இடங்களிலிலோ பயன் படுத்திக்கொள்ளும்
கவனிக்க : கோடிங் -களை HTML EDITER -ல் சென்று
NORMAL MODE-ல் கொடுக்காமல் HTML MODE-ல்
வைத்து PASTE செய்யவும் .
<style type="text/css"> #animationWrapper { width:200px; font-family:"proxima-nova-1"
,"proxima-nova-2","Helvetica Neue","Arial"
,sans-serif; background:#222; padding:40px; } /* link which encapsulates SPANs */ #animationWrapper a { font-weight: 800; text-transform: uppercase; font-size: 42px; line-height: 0.9em; margin-bottom: 10px; display: block; position: relative; color: #E58; text-decoration: none } /* span and a - "workers" */ #animationWrapper a, #animationWrapper span { -webkit-transition: all 0.12s ease-out; -moz-transition: all 0.12s ease-out; -o-transition: all 0.12s ease-out; -ms-transition: all 0.12s ease-out; transition: all 0.12s ease-out; } #animationWrapper span { display: block; color: #555; text-shadow: 1px 1px black, 2px 2px black, 3px 3px black,
4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black; } /* special size for the first item */ #animationWrapper .span1 { font-size: 56px; line-height: 0.8em; } #animationWrapper a:hover { color: #fff ; top: -3px; left: -3px; } /* all spans become white */ #animationWrapper a:hover span { color:#fff; } /* different colors for each SPAN */ #animationWrapper a:hover .span1 { text-shadow: 1px 1px #58E, 2px 2px #58E,
3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E,
7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E; } #animationWrapper a:hover .span2 { text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90,
4px 4px #F90, 5px 5px #F90, 6px 6px #F90,
7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90; } #animationWrapper a:hover .span3 { text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7,
4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7,
7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7; } #animationWrapper a:hover .span4 { text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58,
5px 5px #E58, 6px 6px #E58, 7px 7px #E58,
8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58; } </style> <div id="animationWrapper"> <a href="EXAMPLEURL">
<span class="span1">ஸ்டாலின்</span> <span class="span2">வெஸ்லி</span> <span class="span3">Effects</span> <span class="span4">WESMOB</span> </a> </div>
சில திருத்தங்கள் :
- width:200px- அகலத்தை தேவையான அளவு மாற்றிக் கொள்ளலாம் .
- EXAMPLE URL -தேவையான இணைப்புகள் ..
தனி தனி நிறங்கள் ...
அதற்கான கோடிங்க்ஸ் :
(span1)
span2 :<div id="animationWrapper"> <a href="EXAMPLEURL">
<span class="span1">stalin</span> </a> </div>
<div id="animationWrapper"> <a href="EXAMPLEURL">
<span class="span2">wesley</span> </a> </div>
span 3 :
<div id="animationWrapper"> <a href="EXAMPLEURL"> <span class="span3">Effects</span> </a> </div>
span 4 :
<div id="animationWrapper">
<a href="EXAMPLEURL">
<span class="span4">WESMOB</span>
</a>
</div>
சரி எப்படி இருக்கும் இந்த 3D இணைப்புகள்:
நன்றி
வழக்கம் போல இதுவும் அசத்தலாக உள்ளது.
ReplyDeleteநன்றாக உள்ளது நன்றி.
ReplyDeleteThank you very nice article
ReplyDeleteசூப்பர் சார் ! அனைத்து HTML பதிவுகளும், விரிவான விளக்கங்களும், தகவல்களும் அருமை ! பாராட்டுக்கள் ! நன்றி !
ReplyDelete