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.

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!