macam macam cara untuk Menyembunyikan Teks dan Elemen Dengan CSS

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