olympicidea

Slider[Style1]

Style2

Style3[OneLeft]

Style3[OneRight]

Style4

Style5[ImagesOnly]

Style6

Σε αυτή την ανάρτηση θα ασχοληθούμε με το πώς μπορείτε και εσείς να φτιάξετε ένα κυλιόμενο κείμενο χρησιμοποιώντας 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.Απλή κυλιόμενη εικόνα από τα δεξιά στα αριστερά

Flying bat in a marquee

<marquee behavior="scroll" direction="left"><img src=" ...URL ΕΙΚΟΝΑΣ... " width="125" height="82"/></marquee>


11.Κυλιόμενη εικόνα από τα δεξιά στα αριστερά με σύνδεσμο

Flying bat in a marquee
<marquee behavior="scroll" direction="left"><a href="...URL..."><img alt="Flying bat in a marquee" height="82" src="...URL ΕΙΚΟΝΑΣ..." width="125" /></a></marquee>


12.Κυλιόμενη εικόνα από τα δεξιά στα αριστερά με σύνδεσμο που ανοίγει σε νέα καρτέλα

Flying bat in a marquee
<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


Κυλιόμενο κείμενο από τα δεξιά στα αριστερά με σύνδεσμο χρησιμοποιώντας cssΣύνδεσμος.
Δεύτερο Κυλιόμενο κείμενο από τα δεξιά στα αριστερά με σύνδεσμο χρησιμοποιώντας 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>

..

«
Next
Νεότερη ανάρτηση
»
Previous
Παλαιότερη Ανάρτηση