Може ли с по-красив header?

Преди малко ми се мерна в дао линк към поредния 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 документа, кодът за такъв тип премахване на текст може се окаже и доста по-сложен, но принципът при всички случай този.

Коментари през Facebook

3 Comments
  • Aleksoft
    February 2, 2009

    Ще може ли да ми помогнеш че си нямам и грам понятие от css.
    Ето аз какво направих.Изтеглих картинката bg_header.jpg, промених както исках и след това я качих на FTP сървъра.Сега само ми кажи как да скрия слогана имайки предвид че при мен кода е ето така:

    <a href=””>

  • ph1x
    February 2, 2009

    Както съм написал по-горе в поста – създай class .txtremover например (името е без значение), в който class вмъкни това text-indent: -9999px;
    Стойност -9999 на text-indent отмества текста, така че да не се вижда. Остава да оградиш текста, който искаш да отместваш ( в твоя случай header-а ) по подобен начин – както е описан горе “Някакъв слоган за SEO, който няма да се вижда от посетителите”. Това е.
    Става и за хедър и за какъвто и да било текст. Ако всичко е нормално би трябвало така да стане – ако не трябва да почетеш малко css и да намериш начин да излъжеш браузърите.

  • George
    June 21, 2012

    Наскоро попаднах на един много приятен безплатен курс по HTML и CSS. Има присъствено и онлайн обучение. Всички лекции са публикувани за безплатно теглене и има прекрасни видеоуроци. Лекторите са големи разбирачи и показват както основите, така и тънкостите на правенето на уеб сайтове. Струва си да погледнете курса по Web Front-End Development, ако искате да се научите как се правят уеб сайтове с Photoshop, HTML, CSS и JavaScript и как се ползват CMS системи като WordPress и Drupal.http://frontendcourse.telerik.com

Остави коментар

Your email address will not be published. Required fields are marked *