24.5.15
13
Text Shadow Animasi Pure CSS - Efek animasi kali ini adalah bagaimana cara membuat teks bergerak atau bergeser kekanan secara infinite (tidak terbatas), namun yang kita gerakkan hanya banyangan teks dengan jarak per 10px. Ibarat Anda berjalan yang sudah pasti meninggalkan jejak kaki disetiap langkah demi langkah, terkecuali Anda bisa terbang pasti tidak ada jejak kaki atau bekas pijakan kaki (sidik jari), hehe..!!

Gerakan ini sama seperti efek » Animasi Teks Hitam Putih Dengan Marquee, hanya teks saya tumpuk dalam beberapa warna sebagai banyangan (shadow), ada 7 teks yang bertumpuk dalam satu area, namun saya pisahkan dengan warna untuk membedakan teks.

text shadow animasi



Collections of animated text effects for You



Membuat tampilan teks yang menurut Anda bisa menarik perhatian pengunjung bertamu di blog Anda, efek Text Shadow Animasi Pure CSS seperti ini bisa Anda jadikan alternatif suatu saat Anda ingin membuat hiasan judul blog dengan teks bergerak seperti ini:




DEMO SHOW



Bagaimana, mau mencoba teks bergerak seperti ini? CSS lengkapnya seperti ini:


<style>
.text {
  margin-top:-40px;
  color:#FFFF00;
  font:bold italic 80px sans-serif;
  text-transform:uppercase;
  letter-spacing:1.4px;
  -webkit-text-stroke:3px #00FF7F;
  animation:text-shadow 3.5s ease-out infinite;
  -webkit-animation:text-shadow 3.5s ease-out infinite;
  -moz-animation:text-shadow 3.5s ease-out infinite;
  -ms-animation:text-shadow 3.5s ease-out infinite;
  -o-animation:text-shadow 3.5s ease-out infinite}

@-webkit-keyframes text-shadow {
15% {margin-left:0;text-shadow:none}
45%,55% {margin-left:1.25em;-webkit-text-stroke: 6px #FFF;
text-shadow:-10px 0 #FFFFFF,-20px 0 #FF0033,-30px 0 #FF8C00,-40px 0 #00FF7F,-50px 0 #7FFF00,-60px 0 aqua,70px 0 red}}

@-moz-keyframes text-shadow {
15% {margin-left:0;text-shadow:none}
45%,55% {margin-left:1.25em;-moz-text-stroke: 6px #FFF;
text-shadow:-10px 0 #FFFFFF,-20px 0 #FF0033,-30px 0 #FF8C00,-40px 0 #00FF7F,-50px 0 #7FFF00,-60px 0 aqua,70px 0 red}}

@keyframes text-shadow {
15% {margin-left:0;text-shadow:none}
45%,55% {margin-left:1.25em;text-stroke: 6px #FFF;
text-shadow:-10px 0 #FFFFFF,-20px 0 #FF0033,-30px 0 #FF8C00,-40px 0 #00FF7F,-50px 0 #7FFF00,-60px 0 aqua,70px 0 red}}
</style>
<div class="text">Sahabat Blogger 77</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Text Shadow Animasi Pure CSS
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

13 komentar

  1. Kalo pakai ini, teksnya bisa jadi lebih 3d ya. Wah, canggih juga ya css. Kapan-kapan pengen saya terapkan efek ini, lagipula cukup mudah.

    BalasHapus
  2. asik bisa joget gitu ya sista....mana pake css doang lagi.
    kalau penggunaan % dalam nilai keyframe untuk pergerakan ya sista? masih bingung dan mohon pencerahan.

    BalasHapus
    Balasan
    1. kemarin kan gak sempat joget-joget mbah, karena jaim didepan doi, jadi sekarang jogetnya dipuasin , heheh..!!

      kurang lebih seperti itu mbah, untuk memberi batas gerakan (max-right) saat teks bergeser, dengan % lebih mudah menentukan batas gerakan, kalau pixel atau em ukurannya lebih banyak..

      Hapus
  3. .Waw, CSS serba guna ya mbak dev. bisa jadi animasi seperti itu. Simple tapi keren .
    .Save dulu ya mbak..
    .Oia mbak, kalau mau nanya-nanya sama mbak devy, dari mana ya?

    BalasHapus
    Balasan
    1. bisa lewat update status Google+ saja mas, kalau lewat fb devy jarang buka facebook.
      kalau ada hal yang mau ditanyakan tentang blogger, mas tag saja nama devy dalam status g+

      Hapus
    2. .Cara tag di G+ gimana mbak dev? kurang tau soalnya. :D

      Hapus
    3. ah mas Dandy masa gak tahu sih, bercanda ya..!! hehe..!!
      memberi tag maksudnya agar apa yang mas publikasikan akan diberi tanda di profile G+ Devy, jadi Devy bisa langsung tahu kalau mas Dandy menandai akun G+ devy (notifikasi Google+) seperti itu mas.

      Hapus
    4. .Memang gak tau loh mbak devy.. ;-( .Sering memang lihat beberapa orang ngeTag akun G+ orang lain, tapi bener gatau gimana caranya. :/

      Hapus
    5. coment ya di +G saya, udh di tag tuh.

      Hapus
  4. numpuk dan kelihatan jadi berseni dan cantik harus berani coba deh saya supaya bisa berkembang juga mengenai html atau css ini

    BalasHapus
  5. Keren ih cssnya . . cocok kali dipasanv buat header . , ??

    BalasHapus
  6. Bukan nya malah bikin mata puyeng yaaa kalo pake gerak2 macam ini ???

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK