Cara Membuat Teks dalam Kotak Transparan

Dunia CSS memang sangat mengasikkan, banyak trik sulit menjadi mudah hanya dengan css, kalau kita lihat pada blog atau situs besar sangat bagus dan indah yang semua itu tidak lepas dengan css salah satu trik css yang bisa memperindah blog atau situs kita ialah menerapkan gaya transparan, gaya transparan memang membuat sebuah situs menjadi lebih elegan.

Nah untuk posting kali ini saya akan share sebuah trik css yang berfungsi membuat text dalam kotak dengan gaya transparan, untuk contohnya seperti ini:

Ini adalah beberapa teks yang ditempatkan dalam kotak transparan. Ini adalah beberapa teks yang ditempatkan dalam kotak transparan. Ini adalah beberapa teks yang ditempatkan dalam kotak transparan. Ini adalah beberapa teks yang ditempatkan dalam kotak transparan.

Cara Membuat Text Dalam Kotak Transparan

Pertama, kita membuat elemen div (class = "background") dengan menetapkan tinggi dan lebar gambar latar belakang, dan perbatasan (border). Lalu kita membuat sebuah div yang lebih kecil (class = "transbox") di dalam elemen div pertama. Div transbox memiliki lebar tetap, warna latar belakang, dan perbatasan - dan itu adalah transparan. Di dalam div transparan, kita tambahkan beberapa teks di dalam elemen ap.

Berikut ini kode keseluruhan:

<style type="text/css">
div.background
  {
  width:500px;
  height:250px;
  position:relative;
  left: 47px;
  background:url(taruh url gambar kamu di sini) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style>
<div class="background">
<div class="transbox">
<p>Taruh text di sini</p>
</div>
</div>

Langkah terakhir tinggal kamu taruh kode-kode diatas pada halaman HTML posting kamu. Yap sampai disini tutorial "Cara Membuat Text Dalam Kotak Transparan" semoga bermanfaat.

* * *

Sumber referensi: w3schools