Tuesday, February 14, 2012

HTML பகுதி 11- 3D லிங்க்-க்கு களை எப்படி கொடுக்கலாம் (3D links For Blogger)




HTML பகுதி பதினொன்றில் நாம் பார்க்க இருப்பது 3D வகை லிங்க்-குகளை நம் தளத்தில் எப்படி கொடுக்கலாம் .  அதிக சி.எஸ்.எஸ். கோடுகளை பயன்படுத்தி தான் இது போன்ற லிங்க் களை நாம் கொடுக்க முடியும் . ஹச்.டி.எம்.எல் மட்டும்
வைத்து இது போன்ற லிங்க் களை கொடுக்க இயலாது ..

சாதாரணமாக ஹச்.டி.எம்.எல் பயன்படுத்தி தான் லிங்க் கொடுத்திருப்போம்

இனி இது போன்ற 3D லிங்க்-குகள் நமக்கு உன்னதமான அனுபவத்தை கொடுக்கும் என்பதில் சந்தேகம் இல்லை .


கீழே கொடுக்கப்படும் HTML கோடிங்கை சிறிதும் மாற்றாமல் பதிவின் நடுவிலோ , அல்லது விட்ஜெட்-லோ வேறு இணையதளத்திலோ அல்லது உங்களுக்கு பயன் படும் இடங்களிலிலோ பயன் படுத்திக்கொள்ளும்

கவனிக்க : கோடிங் -களை HTML EDITER -ல் சென்று

NORMAL MODE-ல் கொடுக்காமல் HTML MODE-ல்

வைத்து PASTE செய்யவும் .



<style type="text/css">
#animationWrapper  {
  width:200px;
  font-family:&quot;proxima-nova-1&quot;
,&quot;proxima-nova-2&quot;,&quot;Helvetica Neue&quot;,&quot;Arial&quot;
,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 - &quot;workers&quot; */
#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, span3, span4

தனி தனி நிறங்கள்  ...

அதற்கான  கோடிங்க்ஸ் :  
(span1)


<div id="animationWrapper">
  <a href="EXAMPLEURL">
    <span class="span1">stalin</span>
  </a>
</div>
span2 :

<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 இணைப்புகள்: 






    நன்றி 

    4 comments:

    1. வழக்கம் போல இதுவும் அசத்தலாக உள்ளது.

      ReplyDelete
    2. நன்றாக உள்ளது நன்றி.

      ReplyDelete
    3. சூப்பர் சார் ! அனைத்து HTML பதிவுகளும், விரிவான விளக்கங்களும், தகவல்களும் அருமை ! பாராட்டுக்கள் ! நன்றி !

      ReplyDelete