Авторизация

Создание логотипа для сайта. Технические приемы замены текста изображением.

Создание логотипа для сайта. Технические приемы замены текста изображением.

До того как появились веб-шрифты, нам приходилось использовать изображения каждый раз, когда требовалось сделать буквы более вычурными, чем в шрифтах Times New Roman или Arial. К счастью, при использовании HTML5 это больше не проблема, и у нас могут быть очень стильные заголовки и оформление текста без дополнительного бремени изображений. Время от времени, однако, даже веб-шрифт не подходит, и приходится вместо нескольких слов текста использовать изображение. Например, вы можете вставить стилизованный логотип вместо названия вашей компании или знакомые иконки вместо текстовых ссылок. Удаление текста полностью и замена его элементом img - плохая идея, поскольку ценный контент пропадет навсегда. Лучше использовать приемы замены текста изображением на основе CSS, которые размещают изображение в качестве фона элемента, а затем смещают текст, чтобы он не отображался на странице. Графические браузеры отображают фоновое изображение, а текстовый контент находится в файле для поисковых систем, программ экранного доступа и других вспомогательных устройств — таким образом выигрывают все.

Элегантная техника замены текста изображением была придумана Скоттом Келламом. В ней используется свойство text-indent для вытеснения абзаца текста вправо за пределы видимого блока элемента

Создание логотипа для сайта. Технические приемы замены текста изображением.
На рисунке: Техника замены текста изображением Скотта Келлама скрывает HTML-текст, сдвигая его за пределы видимого блока элемента с помощью свойства text - indent.

В этом примере я заменю HTML-текст «Малышок» элемента h1 замечательным логотипом. Разметка проста:
<h1 id="logo">Логотип</h1>

Правило CSS стилей следующее:

h1#logo { 
width: 450рх;
height: 80рх
background: url(logoimage.png) no-repeat;
text-indent: 100%;
white-space: no-wrap;
overflow: hidden ;
}

Здесь следует отметить несколько моментов. Во-первых, элемент h1 отображается в виде блока по умолчанию, поэтому мы можем просто указать его ширину и высоту в соответствии с размерами изображения, используемого в качестве фона. Свойство text-indent вытесняет слово «Логотип» вправо на всю ширину (100%) элемента. Для свойства white-space задано значение no-wrap, которое гарантирует, что длинные строки текста не будут перенесены и не появятся снова в элементе окна. Наконец, свойство overflow: hidden указывает браузеру, что весь контент, выходящий за пределы блока элемента (как наш текст h1), не должен отображаться.

Фактически существует около дюжины технических приемов замены текста изображением, которые появились за эти годы. Одним из самых популярных является прием Phark, который использует очень большие отрицательные значения свойства text-indent (обычно -9999рх), чтобы сместить HTML-текст влево за пределы области просмотра.

h1#logo {
width: 450рх;
height: 100рх
background: url(logoimage.png) no-repeat;
text-indent: -9999px;
}

Недостатком этого подхода является то, что браузеры вынуждены рассчитывать и рисовать широкие элементы блока, даже если они и не отображаются, что снижает производительность. Но если вам встретится пример текста с фоновым изображением и отступом -9999рх, вы будете знать, что происходит.

Недостатком любого подобного приема являются дополнительные запросы на сервер для каждого используемого изображения.

Обычно логотипу, при просмотре веб-страницы, суждено загружаться первым. Поэтому от его веса или количества запросов на сервер, зависит скорость открытия страниц сайта в целом. Следует уделить этому особое внимание и в случае необходимости обращаться к специалистам в данной области. Хотя для экономии средств и автоматизации процесса разработки логотипа можно воспользоваться конструктором логотипов в режиме онлайн. Существуют сервисы и программы, которые помогут вам бесплатно создать оптимальный по весу и размерам логотип компании для сайта: подробнее здесь...

Оставить комментарий
Навигация по сайту
  • Скачать 1
  • Скачать 2
  • Скачать 3
Универсальный шаблон готового сайта UseSite

Универсальный шаблон готового сайта UseSite


Полностью готовый к применению в качестве сайта шаблон UseSite является универсальным инструментом для быстрого создания Интернет проекта. В нем предусмотрены все основные модули необходимые современному сайту: фотогалерея,...

Подробнее →  

  • Просмотров: 25 419
Готовый сайт оплаты и доставки электронного товара. OnPay Система платежей

Готовый сайт оплаты и доставки электронного товара. OnPay Система платежей


Готовый шаблон сайта для продажи и доставки электронных товаров. Автоматическая оплата товара и мгновенная его отправка покупателю. Шаблон настроен для работы с платежной системой OnPay. Персональный аттестат WebMoney не...

Подробнее →  

  • Просмотров: 7 758
Редактируем шаблоны готового сайта. Скачать книгу для начинающих вебмастеров

Редактируем шаблоны готового сайта. Скачать книгу для начинающих вебмастеров


Вам не обязательно быть программистом, достаточно научиться понимать и редактировать уже написанный код. Данное руководство предназначено для новичков в вебстроительстве. Рассчитано на работу со специально созданными шаблонами...

Подробнее →  

  • Просмотров: 13 466

 

 

Нименование Количество Цена / 1 шт.
Всего: 0 руб.