Вторник, 16 Октября 2012 14:06

Аналоги text-indent: -9999px

Written by 
Оцени эту запись
(0 Голоса)

Свойство text-indent со значением -9999px используется для замещения текста картинкой. В таком случае пользователь видит красивую картинку на месте заголовка, названия компании и т.д, а поисковый робот видит текст, часто в заголовке <h1>.

 

 

На просторах интернета было найдено еще несколько способов замещения текста картинкой.

 
 
Один их этих способов похожий по смыслу. В свойстве text-indent ставится -9999px для того, чтобы вынести текст за пределы экрана. А в данном способе текст выносится только за пределы своего родительского блока, но при этом блоке задается свойство overflow: hidden.
 
 
.block {
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
 
 
 
Второй способ - это использование padding'а. Допустим, есть картинка 100px*100px для фона блока с такими же размерами. В блоке текст. Обнуляем размеры блока, поскольку padding эти размеры прибавит. А сам padding задаем по нужным размерам. И также прибавляем overflow.
 
 
.block {
height: 0;
width: 0;
padding: 100px 100px 0 0;
overflow: hidden;
}
 
 
Третий способ - это установка тексту свойства color: transparent. Но это свойство не поддерживается в ИЕ.
 
 
Минусом самой идеи замещения картинкой текста является то, что у пользователя в браузере может быть отключен показ изображений. В этом случае, он увидит просто пустой блок.
 
 
 

Похожие записи

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов