Membuat Kreasi Unik Tulisan Marquee dengan CSS

Tulisan marquee atau tulisan bergerak dan kadang disebut juga tulisan bolak-balik kiri kanan tentunya bukanlah hal baru dan telah banyak blog yang membahas tutorial untuk membuatnya, sebagai tambahan koleksi tutorial rasanya tidak salah jika saya pun ikut-ikutan memberikan cara membuat tulisan dengan efek marquee, namun untuk membedakan dengan tutorial lainnya, saya akan menambahkan penggayaan CSS pada tulisan marquee tersebut.

Membuat marquee dengan CSS

Defaultnya, tulisan marquee dibuat dengan kode seperti berikut,

<marquee>the Art of SEO</marquee> , yang hasilnya seperti ini :

the Art of SEO
Namun, melalui posting ini, kita akan menambahkan CSS pada tulisan bolak-balik tersebut. Berikut adalah contoh tulisan marquee yang akan saya berikan :

the Art of SEO
Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine

Yang saya buat dengan kode seperti berikut :

<div class="marqueeart">
<marquee style="font-size:3em;color:color:#333;text-shadow:2px 2px 4px #777;font-family:Courier New;">
the Art of SEO
<br />
<span style="font-size:12px;color:#333;font-family:Lucida Console;">
Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine
</span></marquee></div>
<style>
.marqueeart {width:450px;height:68;background-color: #fff;
background-image: -webkit-linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
background-image: -moz-linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
background-image: -0-linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
background-image: linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
background-size: 1px 23px; box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
</style>

Anda ingin membuatnya sendiri menurut selera anda? mari perhatikan kode di atas.

Semua kode yang saya beri warna merah adalah kode warna HTML tulisan marquee, anda dapat melakukan modifikasi sesuai selera anda dengan merubah kode warna tersebut.

Tulisan berwarna hijau tua adalah tulisan marquee yang akan ditampilkan, jika anda hanya ingin membuat tulisan satu baris, hilangkan markah

<span style="font-size:12px;color:#333;font-family:Lucida Console;">
Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine
</span>

dari kode di atas.

Kode berwarna ungu adalah lebar dan tinggi background tulisan, silahkan sesuaikan dengan tempat anda meletakkan tulisan marquee tersebut.

Untuk kode berwarna biru, adalah background dari tulisan marquee tersebut.

Berikut contoh dari tulisan marquee satu baris

Selamat Datang di the Art of SEO , Blog-nya Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine

Saya membuatnya dengan kode seperti ini,

<div class="marqueeart2"><marquee style="font-size:32px;color:#fff;text-shadow:2px 2px 4px #000;font-family:Times New Roman;padding-top:5px;">Selamat Datang di the Art of SEO , Blog-nya Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine</marquee></div>
<style>
.marqueeart2 {width:450px;height:50;background-color:#a19eab;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b8bfc4', endColorstr='#a19eab');
background-image:-webkit-linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
background-image:-moz-linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
background-image:-ms-linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
background-image:-o-linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
  background-image:linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
}
</style>

Bagaimana? mudah bukan tutorial membuat tulisan marquee yang saya berikan? ada tambahan atau pertanyaan? silahkan pergunakan kotak komentar.
Terima kasih.

Artikel Membuat Kreasi Unik Tulisan Marquee dengan CSS ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh Unknown
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;