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

Cara Membuat Posting Seperti Koran

Ketika kita membaca sebuah koran atau majalah sering kita temui susunan tulisan dengan kolom-kolom terpisah yang tentu bila tulisan sebuah berita terlalu panjang dengan memisah-misah tulisan dengan kolom ini akan mempermudah pembaca supaya tidak terlalu lelah untuk membaca berita tersebut.

Dan tulisan dengan gaya kolom ini sekarang sudah banyak yang juga menerapkan pada media online seperti blog atau situs terutama situs majalah atau magazine kamu akan melihat beberapa kolom pada posting untuk memperjelas bagaimana hasil posting seperti koran kamu bisa melihat contoh dibawah ini:

Selamat datang di blog yang sederhana ini semoga apa yang saya tulis bermanfaat untuk kamu, saya banyak memposting yang berkaitan dengan dunia blogging dan juga internet. Kawan pada posting kali ini saya akan share cara membuat posting seperti majalah atau koran nah, ini adalah contoh posting yang seperti koran kerenkan bila kamu mau juga membuat seperti ini juga ikuti saja tutorial ini.

Dalam contoh diatas kamu melihat posting terbagi tiga kolom dan bisa juga kita jadikan menjadi dua kolom untuk mengetahui trik ini berikut ini kode yang bisa dipakai:

<style type="text/css">
.koran{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
</style>

<div class="koran">Text posting disini</div>

Untuk menerapkan kode ini kamu tinggal masukkan kode pada halaman HTML posting dan kamu sisipkan text diantara "tag div", yang sudah saya beri warna merah.Untuk mengganti jumlah kolom kamu ganti angka "3" menjadi angka "2" contohnya seperti ini:

-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;


Nah, untuk mempercantik kamu bisa memberikan garis pemisah antara kolom dengan kode dan garis pemisah ini juga akan membuat nyaman bagi pengunjung situs kamu:

-moz-column-rule-style:outset; /* Firefox */
-webkit-column-rule-style:outset; /* Safari and Chrome */
column-rule-style:outset;

-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari and Chrome */
column-rule-color:#ff0000;

Maka kode lengkapnya seperti ini:

<style type="text/css">
.koran{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule-style:outset; /* Firefox */
-webkit-column-rule-style:outset; /* Safari and Chrome */
column-rule-style:outset;

-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari and Chrome */
column-rule-color:#ff0000;}
</style>
<div class="koran">Text posting disini</div>

Contoh hasil penerapan kode ini:

Selamat datang di blog yang sederhana ini semoga apa yang saya tulis bermanfaat untuk kamu, saya banyak memposting yang berkaitan dengan dunia blogging dan juga internet. Kawan pada posting kali ini saya akan share cara membuat posting seperti majalah atau koran nah, ini adalah contoh posting yang seperti koran kerenkan bila kamu mau juga membuat seperti ini juga ikuti saja tutorial ini.

Catatan:
Bila kamu ingin memisah menjadi beberapa kolom atas atau bawah misalnya posting atas kamu buat tiga kolom sedangkan kolom bawah dua kolom, maka pada kode ".koran" kamu bisa tambah huruf atau angka menjadi ".koran1" begitu seterusnya pada kolom posting yang lain.

* * *

Yap, semoga tutorial "Cara Membuat Posting Seperti Koran" ini bisa berguna untuk kamu, bila kamu butuh bantuan silahkan tanya pada kolom komentar dan dengan segera akan saya balas -insya Allah-