குறிச் சொற்கள்...அழகாக

புதன், ஆகஸ்ட் 29


ங்க பிலாக்கின் (லேபிள்) குறிச் சொற்களை நீங்கள் ஆட் ய கேட்ஜட்டில் எனேபிள் செய்து இருந்தால் அதை லிஸ்ட் (list)வியூவாகவோ அல்லது (cloud)கிளவுட் வியூ வாகவோ செய்திருப்பீர்கள்
அதை இன்னும் அழகாக தனித்தனி டேக் (tag)போல காட்டலாம்.என் வலைப் பக்கங்களில் உள்ளது போல‌
அதற்கு கீழே உள்ள நிரலியை காபி பேஸ்ட் செய்து ஆட் ய கேட்ஜட் மூலம் சேர்க்கவும்
அதற்கு முன்பு லேபில் ஆப்ஷனில்(cloud) கிளவுட் ஆப்ஷன் டிக் செய்திட வேண்டும்

<style type="text/css">
/*<![CDATA[*/
.label-size {
float:left;
margin:0 0 7px 20px;
position:relative;

font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size:0.75em;
font-weight:bold;
text-decoration:none;

color:#336633;
text-shadow:0px 1px 0px rgba(255,255,255,.4);

padding:0.417em 0.417em 0.417em 0.917em;

border-top:1px solid #d99d38;
border-right:1px solid #d99d38;
border-bottom:1px solid #d99d38;

-webkit-border-radius:0 0.25em 0.25em 0;
-moz-border-radius:0 0.25em 0.25em 0;
border-radius:0 0.25em 0.25em 0;

background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');

-webkit-box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);

z-index:100;
}

.label-size:before {
content:'';

width:1.30em;
height:1.39em;

background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');

position:absolute;
left:-0.69em;
top:.2em;

-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);

border-left:1px solid #d99d38;
border-bottom:1px solid #d99d38;

-webkit-border-radius:0 0 0 0.25em;
-moz-border-radius:0 0 0 0.25em;
border-radius:0 0 0 0.25em;

z-index:1;
}

.label-size:after {
content:'';

width:0.5em;
height:0.5em;

background:#fff;

-webkit-border-radius:4.167em;
-moz-border-radius:4.167em;
border-radius:4.167em;

border:1px solid #d99d38;

-webkit-box-shadow:0 1px 0 #faeaba;
-moz-box-shadow:0 1px 0 #faeaba;
box-shadow:0 1px 0 #faeaba;

position:absolute;
top:0.667em;
left:-0.083em;
z-index:9999;
}
#Label1 {height:210px;}
.label-size:hover {
background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

border-color:#e1b160;
}

.label-size:hover:before {
background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

border-color:#e1b160;
}
/*]]>*/
</style>

3 கருத்துகள்:

  1. வித்தியாசமாக இருக்குங்க... நன்றி...

  1. வணக்கம் கண்மணி

    வலைச்சரத்தில் தங்களைப் பற்றி தெரிவித்துள்ளேன்... நேரமிருப்பின் கீழிருக்கும் இணைப்பின் வழியாக வலைச்சரம் வந்து பாருங்கள்...

    நன்றி...

    http://blogintamil.blogspot.ae/2013/09/blog-post_3.html

  1. வணக்கம்...

    உங்களின் தளம் வலைச்சரத்தில் அறிமுகப்படுத்தி உள்ளது... வாழ்த்துக்கள்...

    மேலும் விவரங்களுக்கு இங்கே (http://blogintamil.blogspot.in/2013/09/blog-post_3.html) சென்று பார்க்கவும்... நன்றி...

 
பிலாக்கர் டிப்ஸ்/BLOGGER TIPS , and