Make News Ticker Pure use CSS3 - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make News Ticker Pure use CSS3, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article CSS3, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make News Ticker Pure use CSS3
link : Make News Ticker Pure use CSS3

Make News Ticker Pure use CSS3

Setelah berbagi tutorial bagaimana cara membuat recent post with news ticker style use jquery, kini saatnya sharing trick bikin CSS rotator or news ticker murni menggunakan CSS3. Jadi jika sobat memiliki elemen unordered <ul> or ordered <ol> lists, dengan trik sekarang ini bisa ditampilkan menyerupai news ticker use jQuery. Tetapi tidak menutup kemungkinan elemen lain pun dapat diikursertakan yang penting berupa deretan kalimat.

.news {
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
width: 350px;
height: 30px;
margin: 20px auto;
overflow: hidden;
border-radius: 4px;
padding: 3px;
-webkit-user-select: none;
-moz-user-select: none;
}
.news span {
float: left;
color: #fff;
padding: 6px;
position: relative;
top: -1%;
border-radius: 4px;
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
font: 16px 'Source Sans Pro', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-user-select: none;
-moz-user-select: none;
cursor: pointer;
}
.news ul {
float: left;
padding-left: 20px;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-webkit-user-select: none;
-moz-user-select: none;
}
.news ul li {line-height: 30px; list-style: none }

.news ul li a {
color: #fff;
text-decoration: none;
font: 14px Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
}
.news ul:hover { animation-play-state: paused }
.news span:hover+ul { animation-play-state: paused }
@keyframes ticker {
0% {margin-top: 0}
25% {margin-top: -30px}
50% {margin-top: -60px}
75% {margin-top: -90px}
100% {margin-top: 0}
}

Itu CSS basic. Jika sobat ingin tambahkan background-color, silahkan tambahkan kode CSS berikut.blue { background: #347fd0 }
.blue span { background: #2c66be }
.red { background: #d23435 }
.red span { background: #c22b2c }
.green { background: #699B67 }
.green span { background: #547d52 }
.magenta { background: #b63ace }
.magenta span { background: #842696 }

<div class="news">
<span>Latest News</span>
<ul>
<li><a href="#">Text 1 - Short Description</li>
<li><a href="#">Text 2 - Short Description</a></li>
<li><a href="#">Text 3 - Short Description</a></li>
<li><a href="#">Text 4 - Short Description</a></li>
</ul>
</div>

Itu jiga sobat pakai CSS basic tanpa warna. Kalau mau pakai warna tinggal tambahkan pada syntax <div class="news"> manjadi <div class="news blue/red/green/magenta">

<div class="news red">
<span>Latest News</span>
<ul>
<li><a href="#">Text 1 - Short Description</li>
<li><a href="#">Text 2 - Short Description</a></li>
<li><a href="#">Text 3 - Short Description</a></li>
<li><a href="#">Text 4 - Short Description</a></li>
</ul>
</div>

DONE.

Resources:
codepen.io/jakecode/pen/wrtdc, codepen.io/ManarKamel/pen/HGjfs, cssdeck.com/labs/css-news-ticker
Bonus:
www.cssscript.com/create-a-simple-news-ticker-using-pure-css-css3, www.cssscript.com/pure-css-css3-text-rotator

Happy coding \m/

Thus articles Make News Ticker Pure use CSS3

that is all articles Make News Ticker Pure use CSS3 This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make News Ticker Pure use CSS3 with the link address https://autopostingblogspot.blogspot.com/2015/09/make-news-ticker-pure-use-css3.html