سال 2003- روش Fahrner Image Replacement

<h3 class="fahrner"> 
  <span>CSS-Tricks</span>
</h3>

با استفاده از display :none محتوای داخل span را مخفی می کنیم.

h3.fahrner { 
  width: 300px;
  height: 75px;
  background: url(test.png);
}

h3.fahrner span {
 display: none; /*span tag is none display*/
}

سال 2003- روش Radu Darvas Technique

<h3 class="radu"> CSS-Tricks </h3>

در این روش با استفاده از margin متن را از کادر browser بیرون می اندازیم.

h3.radu {
  width: 2300px; 
  height: 75px;
  background: url(test.png) top right no-repeat;
  margin: 0 0 10px -2000px;
}

سال 2003- روش Phark Method

<h3 class="phark"> CSS-Tricks </h3>

در این روش با استفاده از indent بالا متن را از داخل browser بیرون می اندازیم.

h3.phark {
  width: 300px;
  height: 75px;
  background: url(test.png);
  text-indent: -9999px;
}

سال 2005- روش Malarkey Image Replacement

<h3 class="mir"> CSS-Tricks </h3>

در این روش با استفاده از letter-spacing فاصله بین کاراکترها را تا حد امکان کم کرده سپس با استفاده از indent بالا متن را از داخل Browser بیرون می اندازیم و با استفاده از overflow نمایش متنی را که خارج از عرض 300px می باشد را مخفی می کنیم.

h3.mir { 
  letter-spacing: -1000em; 
  width: 300px; 
  height: 75px; 
  background: url(test.png); 
} 

/*\*/html>body h3.mir { 
  letter-spacing: normal; 
  text-indent: -999em; 
  overflow: hidden; 
}

سال 2006- روش Nash Image Replacement

<h3 class="nir"> CSS-Tricks </h3>

در این روش متون را با تصویری جابجا می کنیم.

h3.nir { 
  height: 75px; 
  overflow: hidden; 
  margin: 0; 
  padding: 0; 
}
 
h3.nir:before { 
  content: url(test.png); 
  display: block; 
}

سال 2012- روش Scott Kellum Method

<h3 class="skm"> CSS-Tricks </h3>

در این روش با استفاده از indent متون را از browser بیرون انداخته و با استفاده از overflow و nowrap متن مورد نظر را نمایش به صورت تک خطی در نظر میگیریم که با استفاده از indent آن را از مادری به عرض 300px بیرون می اندازیم.

h3.skm { 
  width: 300px; 
  height: 75px; 
  background: url(test.png); 
  text-indent: 100%; 
  white-space: nowrap;  
  overflow: hidden; 
}

سال 2013- روش H5BP Image Replacement

<h3 class="h5bp"> CSS-Tricks </h3>

در این روش متون را با تصویری پوشانده و اندازه متون را 0px در نظر می گیریم.

h3.h5bp { 
  border: 0; /*immage border 0px*/
  font: 0px/0 a; /*a shorthand property that zeros out the font size and line-  height. And a is short Font-Family*/
  text-shadow: none; /*no shadow for text*/
  color: transparent; 
  background: url(test.png); 
  width: 300px; 
  height: 75px; 
}

با استفاده از این روش کامپایلر IDE (محیط کاری)، خطا نشان می دهد اما این روش بسیار کارا می باشد و در تمام Browser ها قابلیت اجراء دارد.

به طور خلاصه مفاهیم ذکر شده در بالا را در تصویر زیر مشاهده  میکنیم:

برچسب ها: 

دیدگاه‌ها

تصویر محمدعلی اکبری

محمدعلی اکبری

خیلی این مطلب عالیه، تغریبا از روزی که نوشتی هر روز یه بار مسیرم بهش می‌خره. دمت گرم. روش سال 2012- روش Scott Kellum Method خیلی عالیه.

تصویر امیر حسین اکبری

امیر حسین اکبری

خواهش می‌کنم ایشاله در پست‌های بعدی مطالب کاملتری را بگذارم. مرسی

تصویر محمدعلی اکبری

محمدعلی اکبری

جا داره بازم تشکر کنم :دی

افزودن نظر جدید