Inilah Cara Untuk Menyembunyikan Teks, Gambar dan Elemen lainnya Dengan CSS

Codesigncod 02:16 , No comments
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.

Menyembunyikan text dengan 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 ini. Sampai jumpa pada tulisan selanjutnya

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )