Snippet, Tips Blogger

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 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 Aliva ini.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *