Cara Menyembunyikan Teks dan Element Lainnya dengan CSS

Kalian ingin menyembunyikan sebuah teks/element pada laman blog kalian? Caranya gampang kok, kali ini saya akan membagikan beberapa cara untuk menyembunyikan teks dan element lainnya 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 mengganti nama website di header dengan logo

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

Mungkin itu saja beberapa cara yang dapat saya bagikan pada postingan kali ini. Kode-kode di atas dapat kalian utak-atik sesuai dengan minat kalian masing-masing. Jangan lupa bagikan postingan ini, mungkin ada kerabat/teman yang membutuhkan.