Thursday, December 11, 2014

Cara Menyembunyikan Teks dengan CSS

Ada banyak Cara Menyembunyikan Teks dengan CSS, berikut ini beberapa kode CSS yang bisa Anda gunakan untuk menyembunyikan suatu teks di dalam markup tertentu hanya dengan menggunakan CSS.

Cara Menyembunyikan Teks Dengan CSS

Cara 1


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

Cara 2


.hide-text{
position: absolute;
top: -9999px;
left: -9999px;
}

Cara 3


.hide-text {
text-indent: -9999em;
outline: 0;
}

.hide-text {
height: 0;
overflow: hidden;
position: absolute;
}

.hide-text {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
overflow: hidden;
}

Cara 4 : Pada tombol


.submitbutton {
display:block;
width:100px; height:25px;
background-image:url(image.jpg); background-repeat:no-repeat;
text-indent:-999px;
font-size:0px; line-height:0;
}

Cara 5 : Mengganti teks header dengan gambar


h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}

Demikian beberapa trik Cara Menyembunyikan Teks dengan CSS, semoga para pembaca terbantu dengan tulisan dari Arlina Design ini.