Saturday, February 11, 2012

படங்களின் வட்ட தொடு உணர்வு : HTML பகுதி பத்து




நாம் பதிவுகளின் நடுவிலோ அல்லது மற்ற இடங்களிலோ படங்களை இணைக்கும் போது அதற்கு தொடு உணர்வு எதுவும் கொடுத்திருக்க மாட்டோம் .



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


படங்களை தொட்டு பார்க்கவும் ....
1.




<style><br />.hoverimg1{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;padding:10px;border:1px solid #ccc;background:#FFF}.hoverimg1:hover{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:50% 0%;box-shadow:0 0 15px #000;cursor:pointer;border:0}
</style><img src="http://1.bp.blogspot.com/-6syR1GD77E4/TzCt4KM0EhI/AAAAAAAAG0U/T3a9Gfc4EfU/s280/gunung.jpeg" class="hoverimg1">

 2.


<style>
.hoverimg2{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:50% 0;box-shadow:0 0 15px #000;padding:10px;border:0;background:#FFF}.hoverimg2:hover{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:0;cursor:pointer}
</style>
<img src="http://1.bp.blogspot.com/-6syR1GD77E4/TzCt4KM0EhI/AAAAAAAAG0U/T3a9Gfc4EfU/s280/gunung.jpeg"class="hoverimg2">
3.


<style>
.hoverimg3{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;padding:0}.hoverimg3:hover{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:50%;box-shadow:0 0 15px #000;border:0;cursor:pointer}</style>
<img src="http://1.bp.blogspot.com/-6syR1GD77E4/TzCt4KM0EhI/AAAAAAAAG0U/T3a9Gfc4EfU/s280/gunung.jpeg" class="hoverimg3">

4.




 <style>
.hoverimg4{border:0;padding:0;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:50%;box-shadow:0 0 15px #000;border:0;padding:10}.hoverimg4:hover{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;box-shadow:0;cursor:pointer;border-radius:0}</style><img src="http://1.bp.blogspot.com/-6syR1GD77E4/TzCt4KM0EhI/AAAAAAAAG0U/T3a9Gfc4EfU/s280/gunung.jpeg" class="hoverimg4">

5.




<style>
.hoverimg5{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:55% / 20%;box-shadow:0 0 15px #000;padding:0}.hoverimg5:hover{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:0;cursor:pointer}</style><img src="http://1.bp.blogspot.com/-6syR1GD77E4/TzCt4KM0EhI/AAAAAAAAG0U/T3a9Gfc4EfU/s280/gunung.jpeg" class="hoverimg5">

6.


<style>
.hoverimg6:hover{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:55% / 20%;box-shadow:0 0 15px #000;padding:0}.hoverimg6{-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;border-radius:0;cursor:pointer}</style><img src="http://1.bp.blogspot.com/-6syR1GD77E4/TzCt4KM0EhI/AAAAAAAAG0U/T3a9Gfc4EfU/s280/gunung.jpeg" class="hoverimg6">

படங்களின்உரலை மாற்றிக் கொள்ளலாம் ..

கோடிங்கை சிறிதளவும் மாற்றாமல் பதிவிலோ ,அல்லது விட்ஜெட்டிலோ

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

பதிவு பிடித்திருந்தால் இடதுபக்கத்தில் உள்ள சமூகத்தளங்களில் பகிர்ந்து 

கொள்ளுங்கள் . நன்றி

11 comments:

  1. மனமார்ந்த நன்றிகள்..பயனுள்ள ஒன்றை தந்துள்ளீர்கள்..இப்பொழுதுதான் இதனை அறிகிறேன்.

    சைக்கோ திரை விமர்சனம்

    ReplyDelete
  2. அருமை..... வித்யாசமான நிரலி

    ReplyDelete
  3. அருமையாக உள்ளது .பகிர்வுக்கு நன்றி

    ReplyDelete
  4. வித்தியாசமாகவும், அழகாகவும் உள்ள்ளது. புதுப்புது நுட்பங்களை அறியத்தருவதற்கு நன்றி நண்பா!

    ReplyDelete
  5. அழகிய அழகுபடுத்தும் பதிவு. அருமை!

    ReplyDelete
  6. அருமை அருமை தொடருங்கள்

    ReplyDelete
  7. அருமை சூப்பரா இருக்கு!
    by. www.99likes.blogspot.com

    ReplyDelete
  8. பயனுள்ள பதிவு வாழ்த்துக்கள்
    http://www.kalvisolai.com/

    ReplyDelete
  9. ரொம்ப அருமை சேர்.
    எங்களது போட்டோக்களை எப்படி இடுவது?

    ReplyDelete