Cara Membuat Text Tulisan Berjalan dengan Kode HTML

Cara membuat text tulisan berjalan dengan kode HTML - Marquee di web atau blog sebetulnya cukup mudah, hanya dengan cara menempelkan kode pada dokumen HTML web atau blog. Attribut yang digunakan untuk membuat tulisan berjalan ini menggunakan tag <marquee>, sehingga text / tulisan berjalan juga disebut dengan Marquee, berbeda dengan membuat link atau tautan HTML

Cara Membuat Text Tulisan Berjalan dengan Kode HTML

Secara umum syntax kode marquee / text tulisan berjalan adalah:

<marquee>Text Berjalan</marquee> 

Dengan menggunakan syntax text tulisan berjalan diatas Anda dapat membuat bermacam-macam variasi kode Marquee. Cara pemasangan kode marquee dapat Anda lihat pada contoh-contoh berikut:

Jika Anda menggunakan kode marquee seperti berikut,

<marquee bgcolor="orange" style="font-family: Arial; font-size:16px; color:#800C0C;">Contoh Tulisan Berjalan dengan Background Area</marquee>

Maka akan menghasilkan tuisan berjalan seperti ini:
Contoh Tulisan Berjalan dengan Background Area

Jadi hanya seperti itu tulisan berjalan Marquee? Tentu tidak, masih banyak variasi yang dapat kita buat. Berikut adalah varias-variasi kode Marquee nya:

Kode Marquee Untuk Mengatur Pengulangan Rotasi
kode loop="value/nilai" digunakan untuk pengulangan berotasi pada Marquee. Setelah berotasi sesuai angka yang ditentukan, maka text tersebut akan hilang. Contoh kodenya seperti berikut,

<marquee loop="100">Text Berotasi 100 Kali</marquee>

Maka akan menghasilkan tuisan berjalan seperti ini:
Text Berotasi 100 Kali

Kode Marquee untuk Mengatur Lebar Text
Kode width="angka lebar" berguna untuk mengatur lebar dari kode text yang yang akan berjalan. Biasanya diatur 50% untuk setengah bidang saja, atau bisa 25% untuk seperempat bidang text berjalan saja. Contoh kodenya sepertiberikut,

<marquee width="50%">Lebar Text Berjalan Setengah Bidang</marquee>

Keterangan: Angka 50% bisa anda ganti sesuai lebar bidang yang anda inginkan.
Maka akan menghasilkan tuisan berjalan seperti ini:
Lebar Text Berjalan Setengah Bidang

Kode Marquee untuk Memberi Link / Tautan pada Text
Kode dasar seperti berikut,
onmouseover="this.stop()" onmouseout="this.start()"
Contoh kodenya:

<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()"><a href="http://blog.rajaputramedia.com/2014/12/cara-membuat-text-tulisan-berjalan.html">Cara Membuat Text Tulisan Berjalan</a></marquee>

Maka akan menghasilkan tuisan berjalan seperti ini:
Cara Membuat Text Tulisan Berjalan
Kode Marquee untuk Mengatur Kecepatan Jeda
Kode scrolldelay="angka jeda" berfungi untuk mengatur kecepatan jeda dalam milidetik. Contoh kodenya seperti berikut:

<marquee scrolldelay="2000">Text Berjalan dengan Jeda 2 Detik</marquee>

Keterangan: 1000 untuk 1 detik, 2000 untuk 2 detik, dan seterusnya..
Maka akan menghasilkan tuisan berjalan seperti ini:
Text Berjalan dengan Jeda 2 Detik

Kode Marquee untuk memberi Alt Title pada Area Text Berjalan
Kode title="pesan" berfungsi untuk memberi pesan pada saat kursor diarahkan ke area text berjalan. Atau nama lainnya yaitu Alt Title. Contoh kodenya seperti berikut:

<marquee title="Text yang Muncul Jika Pointer Mouse di arahkan ke Area Text Berjalan">Text Berjalan dengan Pesan</marquee>

Maka akan menghasilkan tuisan berjalan seperti ini:
Text Berjalan dengan Pesan

Kode Marquee untuk Mengatur Kecepatan Text Berjalan
Kode scrollamount="angka" berguna untuk mengatur kecepatan laju text yang berjalan. Contoh kodenya seperti berikut:

<marquee scrollamount="5">Kecepatan Text Berjalan adalah 10</marquee>

Keterangan: Semakin besar nilai scrollamount maka akan semakin cepat.
Maka akan menghasilkan tuisan berjalan seperti ini:
Kecepatan Text Berjalan adalah 10

Kode Marquee untuk Mengatur Arah Text Bergerak
Kode direction="left/right/up/down" berguna untuk mengatur arah pergerakan text. Contoh kode nya seperti berikut:

<marquee direction="left">Text akan Bergerak ke Kiri</marquee>

Keterangan: left bisa anda ganti sesuai arah text berjalan yang anda inginkan.
Maka akan menghasilkan tuisan berjalan seperti ini:
Text akan Bergerak ke Kiri

Kode Marquee untuk Mengatur Text Berhenti Jika dilintasi Pointer Mouse
Kode dasar untuk mengatur text agar berhenti jika dilintasi mouse adalah onmouseover="this.stop()" onmouseout="this.start()". Contoh kodenya seperti berikut:

<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()">Text Bergerak ke Kiri dan akan Berhenti jika dilintasi Mouse</marquee>

Maka akan menghasilkan tuisan berjalan seperti ini:
Text Bergerak ke Kiri dan akan Berhenti jika dilintasi Mouse

Demikian tutorial bagaimana cara membuat text tulisan berjalan dengan kode HTML (Marquee). Jika masih kurang memahami tutorial ini, Anda dapat memberikan pertanyaan melalui form komentar. Semoga dapat membantu

Read More

Cara Membuat Efek Bayangan dengan CSS

Cara Membuat Efek Bayangan dengan CSS Box Shadow, Pada kesempatan kali ini kami akan memberikan sebuah tutorial tentang cara membuat efek bayangan box shadow menggunakan CSS. Efek bayangan box shadow ini memang sangat menarik, membuat website atau blog semakin memiliki kesan grafis yang cukup memikat, apalagi jika dipadukan dengan drop down menu

Secara umum syntax dasar box-shadow untuk membuat efek bayangan dengan CSS adalah sebagai berikut:

box-shadow: …px …px …px …px color;

Dalam implementasinya terdapat 5 bagian / property yang terdapat dalam box shadow yaitu:

• Horizontal offset : Jika nilainya positif maka bayangan akan berada disebelah kanan kotak, dan jika negatif maka bayangan akan berada disebelah kiri kotak.
• Vertikal offset : Jika nilainya positif maka bayangan akan berada dibawah kotak, dan jika negatif maka bayangan akan berada diatas kotak.
• Blur radius : Jika nol maka akan seperti bayangan biasa, dan jika nilainya semakin besar maka bayangan akan tampak menjadi blur.
• Spread Radius (optional).
• Warna bayangan.

Cara Membuat Efek Bayangan dengan CSS

Untuk dapat membuat efek bayangan (box shadow) dengan CSS seperti pada gambar di atas, Anda dapat menyisipkan Script CSS berikut:

.css3-bayangan:after{
    content:"";
    position:absolute;
    z-index:-1;
    top:100%;
    bottom:0;
    width:120%;
    height:50px;
    left:-10%;
    right:-10%;
    background:-webkit-radial-gradient(50% -3%, ellipse cover, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 40%);
    background:radial-gradient(ellipse at 50% -3%, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 40%);
}

Demikian tutorial bagaimana cara membuat efek bayangan dengan css box shadow. Jika masih kurang memahami tutorial ini, Anda dapat memberikan pertanyaan melalui form komentar. Semoga dapat membantu

Read More