Преди малко ми се мерна в дао линк към поредния framework за css и се замислих, че рядко пиша за css в блога си, затова днес ще драсна няколко реда в тази посока.

Идва ми на ум нещо, което рядко виждам по българските сайтове и блогове - а може би и аз не попадам на такива, които са приложили този трик. Говоря за заместване на default-ните шрифтове (verdana, arial и тн…) с малко по-привлекателни такива, специално за header-ите и H* таговете.

Причините да се ползват default-ните шрифтове, мисля че са ясни на всички, но винаги можем да излъжем системата, така че да ни позволи да вкараме разнообразие в шрифтовете. Как ли, след като не на всяка машина ще ги има инсталирани? Ами като вкараме изображение на мястото на текста. Заместването на текст с изображение обаче не е желателно най-малкото заради по-висок SEO Score, който никога не е излишен.

Има вариант, който съчетава SEO оптимизация с визуална красота - с други думи заместване на текст със снимки, при което заместване текстът остава четим ( индексируем - няма такава дума :)) за паяците на търсаките, а юзъра вижда изображение.

Ето как става. Имате следния ред текст и искате да го заместите с някакъв як шрифт или с каквото си искате изображение:

<h1>Някакъв слоган</h1>

Да създадем един class ( .txtremover ) за съответния h1 таг. След това да му сложим за background изображението, с което ще заместваме текст.

.txtremover {background: url(header.png) no-repeat ;}

До тук сложихме background-а. Сега остава да махнем текста, който стой върху изображението, но не да го трием от кода, а по някакъв начин да го скрием, така че да остане четим за търсаките. Какъв по-лесен начин от text-indent.

.txtremover {background: url(header.png) no-repeat ; text-indent: -9999px;}

Сега остава само за добавите class-а към съответния h1 таг

<h1 class=”txtremover”>Някакъв слоган за SEO, който няма да се вижда от посетителите</h1>

Със стойност -9999 пиксела пращате текста в необозримото битие и така остава само изображението, на което зависи от вас какъв шрифт ще има и то без да сте лимитиран от възможностите на браузера или на OS.

Пример за такъв тип заместване на текст със изображение е блогът, който четете в момента. Горе картинката, на която пише Pixlemind weBlog е сложена по-такъв начин, но с малко повече код за да угодя на Internet Explorer.

Все пак когато прилагате този трик имайте на ум две неща: браузърите в някои случай визуализират различно ( особено някои от тях ) и другото нещо, е че в зависимост от структурата на css документа, кодът за такъв тип премахване на текст може се окаже и доста по-сложен, но принципът при всички случай този.


Няколко случайни поста