Ada banyak cara untuk menyembunyikan teks atau elemen dengan css, berikut ini beberapa script atau kode yang bisa anda gunakan untuk menyembunyikan element dengan menggunakan css.
Cara-1 | Menyembunyikan teks
.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);
// only needed for an apparent bug in Webkit/Opera
// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
height: 1px;
width: 1px;
overflow: hidden;
}
Cara-4 | Menyembunyikan 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 | Untuk logo di header biasanya kita mengganti nama website dengan logo
h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}
Sekian saja trik-trik singkat dalam menyembunyikan teks atau elemen dengan menggunakan CSS, semoga para pembaca terbantu dengan tulisan dari jurnalweb.com ini. Sampai jumpa pada tulisan selanjutnya
terus lebih baik pake cara yang keberapa?
Rekomendasi kami nomor 1
Begini lebih mudah mas.
.elemen{
display:none
}
atau:
.elemen{
visibility:hidden
}
yang
hiden itu sama fungsinya seperti , elemen tidak terlihat (bukannya hilang). Tapi yang display:none, benar-benar menghilangkan elemen.Gan kalau cuma pake html aja gamn gan? ga ush pake css gitu,,
mksih gan
bebas saja, terserah
kalau mau menghidden chart pakek cara berapa gan ?
Kalau mau menghilangkan text tertentu bagaimana misalnya di dalam sebuah div class anu terdapata kata2 jorok, terus agar kata jorok itu tidak tampil bagaimana,,
Kata tersebut dikasih element tertentu misal:
[div class="contoh"] Ini adalah contoh [span style="display:none"] kata yang ingin di hilangkan[/span][/div]