Animated Text Fill

Animated Text Fill

Collection Effect title Text - Animated Text Fill
Animasi background untuk memberikan warna bergerak pada teks deskripsi. Elelmen ini dihasilkan dari penggunaan CSS background-clip dan text-fill-color. Sedangkan gerakan secara otomatis, saya menggunakan perintah animasi @keyframes aitf.

Pada Template temukan kode ]]></b:skin> lalu letakkan CSS ini tepat diatasnya:

CSS Concept

.text {
  text-transform: uppercase;
  letter-spacing: .5em;
  display: inline-block;
  border-top: 4px double darkred;
  border-bottom: 4px double darkred;
  padding: 1em 0em;
  position: absolute;
  text-align:center;
  margin: -2em auto;
  color:blue;}

.text span {
  font: 700 55px/1 "Oswald", sans-serif;
  letter-spacing: 0;
  padding: .25em 0 .325em;
  display: block;
  text-align:center;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  background: url(http://f.cl.ly/items/010q3E1u3p2Q0j1L1S1o/animated_text_fill.png) repeat-y;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 80s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;

  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  -moz-animation: aitf 80s linear infinite;
  -moz-transform: translate3d(0, 0, 0);
  -moz-backface-visibility: hidden;

  -ms-background-clip: text;
  -ms-text-fill-color: transparent;
  -ms-animation: aitf 80s linear infinite;
  -ms-transform: translate3d(0, 0, 0);
  -ms-backface-visibility: hidden;

  -o-background-clip: text;
  -o-text-fill-color: transparent;
  -o-animation: aitf 80s linear infinite;
  -o-transform: translate3d(0, 0, 0);
  -o-backface-visibility: hidden;

  obackground-clip: text;
  otext-fill-color: transparent;
  oanimation: aitf 80s linear infinite;
  otransform: translate3d(0, 0, 0);
  obackface-visibility: hidden;}

@-webkit-keyframes aitf {
  0% {background-position: 0% 50%;}
  100% {background-position: 100% 50%;}}

@-moz-keyframes aitf {
  0% {background-position: 0% 50%;}
  100% {background-position: 100% 50%;}}

@keyframes aitf {
  0% {background-position: 0% 50%;}
  100% {background-position: 100% 50%;}}

DEMO SHOW


HTML Markup

1. Warna Biru adalah kata "Sambutan"
2. Warna Merah adalah "Text Title"
3. Warna Orange adalah "Deskripsi Blog"

Silahkan Anda sesuaikan dengan nice blog Anda.

<div class="text">
&mdash; WELL COME TO MY BLOG &mdash;<span>SAHABAT BLOGGER 77</span><div style="color:#333;font:normal 13px/normal Verdana;letter-spacing:2px;">
Berbagi Hal Seputar Tutorial Blog | Design HTML Template | Blogging Tips | CSS | Informasi SEO</div>
</div>