நமது இணைய தளத்திலோ அல்லது ப்ளாக்-கிலோ பலரையும் கவரும் படி ஓடும் எழுத்துக்களை கொண்டு வந்திருப்போம் ....
இந்த எழுத்துக்களை ஹச்.டி.எம்.எலில் marquee என்னும் tag -ஐ கொண்டு
இது போன்ற எழுத்துகளை நாம் கொண்டு வர முடியும் ..
வலது பபுறத்தில் இருந்து இடது புறத்திற்கு ...மற்றும் இடது புட்டத்தில் இருந்து வலது புறத்திற்கும் .... மேலே இருந்து கீழும் ...கீழிருந்து மேலும் கொண்டு வருவதை அனைவரும் அறிந்திருப்பீர்கள் ..
இன்று நாம் பார்க்க போவது ஓடும் எழுத்துக்களை அழகாக எப்படி காட்டலாம்
என்று ....
முதலில் சாதாரணமாக எப்படி கொண்டு வருவது என்று பார்போம் .
எழுத்துக்கள் இடது புறத்தில் இருந்து வந்து வலதுபுறத்தில் நின்று விடும் ..
இது Slide வகை :
<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>
<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>
அடுத்த வகை இரு புறமும் முட்டி கொண்டே இருக்கும் ..
<marquee behavior="alternate">Your bouncing text goes here</marquee>
தேவையான இடத்தில் கீழே உள்ள கோடிங்கை PASTE செய்யவும் ...
<style>
.wes-mobmarquee {width:600px; height:40px; overflow:hidden; position:relative; border:4px solid rgb(204, 204, 204); margin:0 auto;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-o-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background:#4ad;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}
.scroller {display:block; width:1240px; height:40px; position:absolute; left:0; top:0;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:10s;
-moz-animation-name: scroll;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:10s;
-webkit-animation-name: scroll;
}
.scroller div {font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:bold; padding:0 10px;
}
.scroller div a {color:#c00;}
@-moz-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
-moz-animation-play-state: paused;
}
@-webkit-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
-webkit-animation-play-state: paused;
}
</style>
<br />
<div class="wes-mobmarquee">
<div class="scroller">
<div>
நண்பர்களே இந்த தளத்தை தொடர <a href="http://mjmrimsi1.blogspot.com/">இங்கே </a>.</div>
<div>
கிளிக் செய்யவும் <a href="http://mjmrimsi1.blogspot.com/">links</a>.</div>
</div>
</div>
</div>
பச்சை நிறத்தில் வருவதற்கு :
தேவையான இடத்தில் கீழே உள்ள கோடிங்கை PASTE செய்யவும் ...
<style type="text/css">
.wes-mob1Marquee {width:600px; height:40px; overflow:hidden; position:relative; border:1px solid #aaa; margin:0 auto;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-o-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background:#29B144;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}
.scroller {display:block; width:1240px; height:40px; position:absolute; left:0; top:0;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:10s;
-moz-animation-name: scroll;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:10s;
-webkit-animation-name: scroll;
}
.scroller div {font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:normal; padding:0 10px;
}
.scroller div a {color:#c00;}
@-moz-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
-moz-animation-play-state: paused;
}
@-webkit-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
-webkit-animation-play-state: paused;
}
</style>
<div class="wes-mob1Marquee">
<div class="scroller">
<div>
நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும் <a href="http://www.blogger.com/follow-blog.g?blogID=2520572890373901885">இங்கே </a>.</div>
<div>
நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும் <a href="http://www.blogger.com/follow-blog.g?blogID=2520572890373901885">இங்கே</a>.</div>
</div>
</div>
</div>
<style type="text/css">
.wes-mob2Marquee {width:600px; height:40px; overflow:hidden; position:relative; border:1px solid #aaa; margin:0 auto;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-o-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background:#DD8D16;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}
.scroller {display:block; width:1240px; height:40px; position:absolute; left:0; top:0;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:10s;
-moz-animation-name: scroll;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:10s;
-webkit-animation-name: scroll;
}
.scroller div {font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:normal; padding:0 10px;
}
.scroller div a {color:#c00;}
@-moz-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
-moz-animation-play-state: paused;
}
@-webkit-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
-webkit-animation-play-state: paused;
}
</style>
<div class="wes-mob2Marquee">
<div class="scroller">
<div>
நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும் <a href="http://www.blogger.com/follow-blog.g?blogID=2520572890373901885">இங்கே </a>.</div>
<div>
நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும் <a href="http://www.blogger.com/follow-blog.g?blogID=2520572890373901885">இங்கே</a>.</div>
</div>
</div>
</div>
</div>
மேலும் இந்த MARQUEE பயன்கள் :
--- இந்த தொட்டவுடன் நின்று விடும் ..
----600PX ; அளவு அகலம் கொண்டது ..
நன்றி .....
சமூகத் தளங்களில் பகிர்ந்து கொள்ளுங்கள் ..
சந்தேகம் இருந்தால் கண்டிப்பாக கேட்கவும் ...
Post a Comment