Σε αυτή την ανάρτηση θα ασχοληθούμε με το πώς μπορείτε και εσείς να φτιάξετε ένα κυλιόμενο κείμενο χρησιμοποιώντας html και css.
Παρακάτω ακολουθούν οι τρόποι με τους οποίους μπορείτε να φτιάξετε ένα κυλιόμενο κείμενο...
1.Απλό κυλιόμενο κείμενο από τα δεξιά στα αριστερά
<marquee behavior="scroll" direction="left">...απλό κυλιόμενο κείμενο από τα δεξιά στα αριστερά...</marquee>
2.Απλό κυλιόμενο κείμενο από τα αριστερά στα δεξιά
<marquee behavior="scroll" direction="right">...Απλό κυλιόμενο κείμενο από τα αριστερά στα δεξιά...</marquee>
3.Απλό κυλιόμενο κείμενο από κάτω προς τα πάνω
<marquee behavior="scroll" direction="up">...Απλό κυλιόμενο κείμενο από κάτω προς τα πάνω...</marquee>
4.Απλό κυλιόμενο κείμενο από πάνω προς τα κάτω
<marquee behavior="scroll" direction="down">...Απλό κυλιόμενο κείμενο από πάνω προς τα κάτω...</marquee>
5.Κυλιόμενο κείμενο από τα δεξιά στα αριστερά με ρυθμιζόμενη ταχύτητα
<marquee behavior="scroll" direction="right" scrollamount="5">...Κυλιόμενο κείμενο από τα δεξιά στα αριστερά με ρυθμιζόμενη ταχύτητα...</marquee>
6.Κυλιόμενο κείμενο τα αριστερά προς τα δεξιά στα με ρυθμιζόμενη ταχύτητα
<marquee behavior="scroll" direction="left" scrollamount="5">...Κυλιόμενο κείμενο τα αριστερά προς τα δεξιά στα με ρυθμιζόμενη ταχύτητα...</marquee>
7.Κυλιόμενο κείμενο από τα δεξιά στα αριστερά με ρυθμιζόμενη ταχύτητα και χρώμα φόντου
<marquee behavior="scroll" direction="right" scrollamount="5" style="background-color: #f6b26b;">...Κυλιόμενο κείμενο από τα δεξιά στα αριστερά με ρυθμιζόμενη ταχύτητα και χρώμα φόντου...</marquee>
8.Κυλιόμενο κείμενο από τα αριστερά στα δεξιά με ρυθμιζόμενη ταχύτητα και χρώμα φόντου
<marquee behavior="scroll" direction="left" scrollamount="5" style="background-color: #f6b26b;">...Κυλιόμενο κείμενο από τα αριστερά στα δεξιά με ρυθμιζόμενη ταχύτητα και χρώμα φόντου...</marquee>
9.Κυλιόμενο κείμενο από τα δεξιά στα αριστερά με ρυθμιζόμενη ταχύτητα, χρώμα φόντου και σύνδεσμο
<marquee behavior="scroll" direction="left" scrollamount="5" style="background-color: #f6b26b;">...Κυλιόμενο κείμενο από τα αριστερά στα δεξιά με ρυθμιζόμενη ταχύτητα, χρώμα φόντου και σύνδεσμο... <a href="...URL...">ΠΑΤΗΣΤΕ ΕΔΩ...</a></marquee>
10.Απλή κυλιόμενη εικόνα από τα δεξιά στα αριστερά
<marquee behavior="scroll" direction="left"><img src=" ...URL ΕΙΚΟΝΑΣ... " width="125" height="82"/></marquee>
11.Κυλιόμενη εικόνα από τα δεξιά στα αριστερά με σύνδεσμο
<marquee behavior="scroll" direction="left"><a href="...URL..."><img alt="Flying bat in a marquee" height="82" src="...URL ΕΙΚΟΝΑΣ..." width="125" /></a></marquee>
12.Κυλιόμενη εικόνα από τα δεξιά στα αριστερά με σύνδεσμο που ανοίγει σε νέα καρτέλα
<marquee behavior="scroll" direction="left"><a href="...URL..."target="_blank"><img alt="Flying bat in a marquee" height="82" src="...URL ΕΙΚΟΝΑΣ..." width="125" /></a></marquee>
13.Κυλιόμενο κείμενο από τα δεξιά στα αριστερά με σύνδεσμο χρησιμοποιώντας css
<link rel="stylesheet" href="http://freebloggertips1.googlecode.com/files/free-bloggertips.css" type="text/css" />
<div class="MDmarquee">
<div class="scroller">
<div>...Κυλιόμενο κείμενο από τα δεξιά στα αριστερά με σύνδεσμο χρησιμοποιώντας css...<a href="...URL...">...Σύνδεσμος...</a>.</div>
<div>.... Δεύτερο Κυλιόμενο κείμενο από τα δεξιά στα αριστερά με σύνδεσμο χρησιμοποιώντας css... <a href="...URL...">...Σύνδεσμος...</a>.</div>
</div>
</div>
<style>
.MDmarquee {width:630px; height:40px; overflow:hidden; position:relative; border:1px solid #aaa; margin:0 auto;
-o-box-shadow: 2px 2px 5px 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: 0px;
border-radius: 0px;
background:#0066B3;
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>
..
HTML - CSS Κυλιόμενο κείμενο
Σε αυτή την ανάρτηση θα ασχοληθούμε με το πώς μπορείτε και εσείς να φτιάξετε ένα κυλιόμενο κείμενο χρησιμοποιώντας html και css.
..
1 σχόλιο :