Cara Membuat Background Pada Tulisan Seri 2

Kebanyakan teks atau tulisan yang kita buat hampir
selalu polos tak berbackground. Sekali-kali kita
tampilkan backgound pada tulisan atau kalimat
yang kita buat agar terlihat lebih menarik sekaligus
untuk mengatasi kebosanan atau kejenuhan.

Untuk seri ini ada penambahan efek hover pada
backgroundnya. Manakala ia tersorot cursor
maka backgroundnya akan terlihat jelas bahkan
dapat berganti bila Anda mau.

Lihatlah contohnya seperti di bawah ini,
arahkanlah cursor Anda pada gambarnya :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Langkah membuat hal yang demikian adalah :

1.   Lebih dahulu masuk ke Edit HTML.

2.   Cari tag </head>

3.   Copy kode berikut dan letakkan
      di atas / sebelum tag </head> ini.

<style type="text/css"> 

#div {
width:350px;
height:200px;
padding:5px;
border: 3px Dotted blue;
background-origin:border-box;
background:url(URL Gambar 01 Anda di sini);
background-size:100% 100%;
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-repeat:no-repeat;
background-position:center;
-o-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-webkit-transition: all 2.5s ease-in-out;  
opacity: 0.5;
filter: alpha(opacity=50);
}

#div:hover {
border: 3px Solid blue;
background-origin:border-box;
background: white url(URL Gambar 02 Anda di sini);
background-size:100% 100%;
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-repeat:no-repeat;
background-position:center;
-o-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-webkit-transition: all 2.5s ease-in-out;  
opacity: 1.0;
filter: alpha(opacity=100);
}

</style>

KETERANGAN :

Atur width dan heightnya dengan
ukuran yang Anda inginkan.

Aturlah ukuran dan warna bordernya.

Ganti juga gambarnya dengan gambar
yang ingin Anda tampilkan.

Bila Anda menginginkan gambar yang berbeda
saat tersorot cursor, maka masukkan gambar
01 dan 02-nya dengan gambar yang berbeda.

Untuk penerapan pada kalimatnya, masukkan kode
berikut ke dalam konten Gadget HTML/JavaScript
atau bisa juga ke dalam postingan Anda.

<div class id="div">
Letakkan kalimat yang Anda tulis di sini.
</div>

KETERANGAN :

Masukkan kalimat yang ingin Anda
tampilkan pada tempat yang tersedia.

Selamat mencoba dan tetap good luck!