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