Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at /home/mloppcom/public_html/rumahdot.com/wp-content/plugins/all-in-one-seo-pack/all_in_one_seo_pack.php:1797) in /home/mloppcom/public_html/rumahdot.com/wp-content/plugins/wpipad.php on line 27

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/mloppcom/public_html/rumahdot.com/wp-content/plugins/all-in-one-seo-pack/all_in_one_seo_pack.php:1797) in /home/mloppcom/public_html/rumahdot.com/wp-content/plugins/wpipad.php on line 27
Teknik Image Replacement pada CSS yang Perlu Anda Ketahui – Web Programming – Web Design – Web Business Resources Indonesia by RumahDot.com
 
 
Thursday, May 31, 2012, 11:02

Teknik Image Replacement pada CSS yang Perlu Anda Ketahui

Adalah Todd Fahrner yang mengenalkan teknik ini pertama kali sekitar tahun 1999. Kemudian dikembangkan juga oleh C.Z Robertson seperti yang dijelaskan pada blog-nya. Teknik ini kemudian dipopulerkan oleh Douglas Bowman dan mungkin masih digunakan hingga sekarang, yang dikenal sebagai metode Fahrner Image Replacement.

Konsep waktu itu adalah bagaimana untuk menampilkan konten website menggunakan font selain Verdana dan Georgia. Metode yang digunakan adalah dengan memasukkan teks berupa gambar, untuk kemudian menggunakan gambar teks tersebut sebagai background.

Cara yang waktu itu digunakan kurang lebih seperti ini, pada HTML kita menggunakan kode:

<div>
  <span>Hello world!</span>
</div>

Kemudian, elemen div tersebut diatur agar menggunakan background dari gambar, seperti:

div {
  background-image:url("hello_world.gif");
  background-repeat:no-repeat;
  height:35px;
}

Negative Text Indent

Teknik di atas kemudian dikembangkan dan kemudian dikenal sebagai metode Phark yang pasti sering Anda gunakan, coba lihat kode di bawah ini untuk lebih jelasnya:

.selector{
    overflow: hidden;
    text-indent: -9999px;
}

Metode ini kadang disebut sebagai teknik Negative Text Indent. Tentu saja, meskipun populer teknik tersebut memiliki kelemahan. Hal yang paling mencolok adalah tentang bagaimana teknik ini sebenarnya bekerja pada browser. Setiap menggunakan metode tersebut, browser akan tetap membuat sebuah box selebar 9999px di luar layar monitor.

Positive Text Indent

Karena kelemahan itulah, muncul satu ide baru dari Scott Kellum, yang biasa dikenal sebagai metode Positive Text Indent. Konsepnya adalah dengan menggunakan text-indent selebar 100% sehingga teks akan tampil melebar melebihi lebar normalnya. Untuk menyembunyikan kelebihan tampilan tersebut ditambahkan property overflow. Lihat kode berikut:

.selector{
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

H5BP Image Replacement

Teknik image replacement lainnya yang kini digunakan pada proyek HTML5 Boilerplate kadang disebut juga dengan teknik Font Crushing. Rules yang digunakan adalah sebagai berikut:

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

Keunggulan dan kelemahan dari metode Font crushing ini secara lengkap dapat Anda simak pada link berikut: Another CSS Image Replacement Technique.

Untuk melihat bagaimana ketiga teknik di atas bekerja, silakan cek pada: http://jsfiddle.net/sBDRB/

Tinggalkan Komentar

*