При верстке макета довольно часто возникает задача создания кликабельного логотипа страницы.
Но логотип страницы, как правило, создается с использованием на все 100% фантазии дизайнера - тут и необычный декоративный шрифт, и всякие добавленные в него изображения. Поэтому на практике обычно такой логотип вырезается из psd-макета целиком, в виде картинки.
В HTML-разметке в заголовке страницы помещается текст-логотип сайта в теге первого уровня
- все по правилам SEO. А в таблицах стилей производится подмена текста на вырезанное из макета изображение.1
h1
В результате удается выйти из положения, когда и овцы целы и волки сыты. В этой статье будут рассмотрены несколько способов, с помощью которых можно решить данную задачу. Причем, решить наиболее простым и быстрым способом, с помощью миксинов благодаря волшебной библиотеке Compass.
Первоначально произведем подключение неоходимого модуля в библиотеке Compass, добавив строку импортирования в проект:
… а затем приступим к изучению миксинов.
Миксин hide-text
Первым миксином, который решает задачу замены текста изображением, является
.1
hide-text
Синтаксис этого миксина таков:
… где необязательный аргумент
определяет направление скрытия текста.1
$direction
Пример использования данного миксина:
Подключим к вышеприведенному коду миксин
и посмотрим на результат:1
hide-text
Результирующий CSS-код будет выглядеть таким образом. Добавляются смещение текста с помощью свойства
с отрицательным значением; предотвращается случайное “схлопывание” блока через свойство 1
text-indent
, если в нем вдруг окажутся плавающие элементы; задается расположение текста с левого края блока через свойство 1
overflow: hidden
, чтобы гарантировать его смещение за левый край блока через свойство 1
text-align: left
:1
text-indent
Миксин squish-text
В библиотеке Compass также имеется миксин
для замещения текста изображением с помощью эффекта скрытия данного текста. Другими словами, текст остается на своем месте, просто с помощью определенных CSS-свойств он делается визуально невидимым. Это может быть удобно для браузеров-читалок, которые проговаривают текст вслух для слабовидящих людей.1
squish-text
Синтаксис миксина
таков:1
squish-text
Пример использования миксина
:1
squish-text
Подключим миксин
и посмотрим на результат его работы:1
squish-text
Результат компилирования представленного выше SCSS-кода в CSS-код показан ниже. Довольно интересный способ скрытия текста, который стоит рассмотреть более подробно. С помощью CSS-свойства
сбрасывается на ноль размер шрифта (кегль) и межстрочное расстояние (интерлиньяж) для текста. Цвет текста через CSS-свойство 1
font
устанавливается прозрачным. В добавок гарантированно убирается тень у текста, если она у него есть (вдруг сработает наследование).1
color
Несмотря на то, что визуально результат работы миксина
аналогичен работе миксина 1
squish-text
, принцип последнего более эффективен для большинства современных браузеров в вопросе замещения inline-текста.1
hide-text
В показанном ниже примере можно улучшить разметку, “обернув” отдельные участки текста в любой из inline-элементов (
, 1
span
или 1
b
) и добавив к нему ноебходимый класс:1
i
В то время, как экранные программы-читалки и другие подобные инструменты могут свободно прочитать “спрятанный” текст, в окне обычного браузера он ни как не отображен:
Замещение текста изображением с фиксированными размерами
Если не принимать во внимание технологию спрайтов для фонового изображения, в Compass существует другой миксин, который также позволяет удобно замещать текст изображением. Это полезно, например, когда нужно поместить изображение логотипа в тег заголовка.
Преимущество данного миксина заключается в автоматизированном способе установки размеров для элемента в соответствии с размерами используемого изображения. Для этой цели в библиотеке Compass имеется миксин с говорящим названием
:1
replace-text-with-dimensions
Проиллюстрируем применение миксина
:1
replace-text-with-dimensions
Не забудьте активировать строку
в конфигурационном файле 1
relative_assets = true
, чтобы сработали относительные пути для изображений!1
config.rb
Мне кажется, было бы очень любопытно взглянуть на результирующий код компиляции в CSS. Видим, что на изображение указывает корректная ссылка; а также, что у изображения установлены правильные ширина (
) и высота (1
width
). Все это благодаря Compass!1
height
Замена текста изображением в HTML5 Boilerplate
За годы существования веб-разработки было создано немало оригинальных способов замещения текста изображением. На сегодняшний день наиболее лучшим способом является техника, представленная в хорошо известном проекте HTML5 Boilerplate.
Ниже показан пример исходного CSS-кода, взятого из “HTML5 Boilerplate”, в котором показаны в виде классов различные способы замещения текста изображением. В каждом случае кратко описываются преимущества каждого из способов:
На этом все. Данная статья является вольным переводом отдельной главы из книги Ben Frain “Sass and Compass for Designers”.