При верстке макета довольно часто возникает задача создания кликабельного логотипа страницы.
Но логотип страницы, как правило, создается с использованием на все 100% фантазии дизайнера - тут и необычный декоративный шрифт, и всякие добавленные в него изображения. Поэтому на практике обычно такой логотип вырезается из psd-макета целиком, в виде картинки.
В HTML-разметке в заголовке страницы помещается текст-логотип сайта в теге первого уровня 1
h1
В результате удается выйти из положения, когда и овцы целы и волки сыты. В этой статье будут рассмотрены несколько способов, с помощью которых можно решить данную задачу. Причем, решить наиболее простым и быстрым способом, с помощью миксинов благодаря волшебной библиотеке Compass.
Первоначально произведем подключение неоходимого модуля в библиотеке Compass, добавив строку импортирования в проект:
@import "compass/typography/text/replacement";… а затем приступим к изучению миксинов.
Миксин hide-text
Первым миксином, который решает задачу замены текста изображением, является 1
hide-text
Синтаксис этого миксина таков:
@include hide-text([$direction])… где необязательный аргумент 1
$direction
Пример использования данного миксина:
<h1 class="hidetext">
mixin hide-text
</h1>.hidetext{
margin: 10px auto;
width: 640px;
height: 426px;
background: url(../img/cat.jpg) 0 0 no-repeat;
}
Подключим к вышеприведенному коду миксин 1
hide-text
.hidetext{
...
@include hide-text;
}
Результирующий CSS-код будет выглядеть таким образом. Добавляются смещение текста с помощью свойства 1
text-indent
1
overflow: hidden
1
text-align: left
1
text-indent
.hidetext{
...
text-indent: -119988px;
overflow: hidden;
text-align: left;
}Миксин squish-text
В библиотеке Compass также имеется миксин 1
squish-text
Синтаксис миксина 1
squish-text
@include squish-text;Пример использования миксина 1
squish-text
<h1 class="squishtext">
Mixin squish-text
</h1>...
.squishtext{
color: white;
text-align: center;
font-size: 3em;
font-weight: bold;
margin: 10px auto;
width: 640px;
height: 480px;
background: url(../img/girl.jpg) 0 0 no-repeat;
}
Подключим миксин 1
squish-text
.squishtext{
...
@include squish-text;
}
Результат компилирования представленного выше SCSS-кода в CSS-код показан ниже. Довольно интересный способ скрытия текста, который стоит рассмотреть более подробно. С помощью CSS-свойства 1
font
1
color
.squishtext {
...
font: 0/0 serif;
text-shadow: none;
color: transparent;
}Несмотря на то, что визуально результат работы миксина 1
squish-text
1
hide-text
В показанном ниже примере можно улучшить разметку, “обернув” отдельные участки текста в любой из inline-элементов (1
span
1
b
1
i
<p class="squish">Lorem ipsum dolor sit amet,<span class="squish-text"> consectetur adipisicing elit,</span> sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor <span class="squish-text">in reprehenderit in voluptate velit esse</span> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <span class="squish-text">cupidatat non proident</span>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>.squish{
margin: 0 auto;
@include margin-leader;
max-width: 960px;
font-family: 'PT Sans', sans-serif;
.squish-text{
color: hsla(240,100%,50%,.6);
font-style: italic;
}
}
.squish{
...
.squish-text{
...
@include squish-text;
}
}В то время, как экранные программы-читалки и другие подобные инструменты могут свободно прочитать “спрятанный” текст, в окне обычного браузера он ни как не отображен:
Замещение текста изображением с фиксированными размерами
Если не принимать во внимание технологию спрайтов для фонового изображения, в Compass существует другой миксин, который также позволяет удобно замещать текст изображением. Это полезно, например, когда нужно поместить изображение логотипа в тег заголовка.
Преимущество данного миксина заключается в автоматизированном способе установки размеров для элемента в соответствии с размерами используемого изображения. Для этой цели в библиотеке Compass имеется миксин с говорящим названием 1
replace-text-with-dimensions
@include replace-text-with-dimensions();Проиллюстрируем применение миксина 1
replace-text-with-dimensions
<h1 class="replace_dimensions">
replace-text-with-dimensions
</h1>
.replace_dimensions{
@include replace-text-with-dimensions('alsatian.jpg');
}Не забудьте активировать строку 1
relative_assets = true
1
config.rb
Мне кажется, было бы очень любопытно взглянуть на результирующий код компиляции в CSS. Видим, что на изображение указывает корректная ссылка; а также, что у изображения установлены правильные ширина (1
width
1
height
.replace_dimensions {
text-indent: -119988px;
overflow: hidden;
text-align: left;
background-image: url('../img/alsatian.jpg?1400248446');
background-repeat: no-repeat;
background-position: 50% 50%;
width: 640px;
height: 470px;
}Замена текста изображением в HTML5 Boilerplate
За годы существования веб-разработки было создано немало оригинальных способов замещения текста изображением. На сегодняшний день наиболее лучшим способом является техника, представленная в хорошо известном проекте HTML5 Boilerplate.
Ниже показан пример исходного CSS-кода, взятого из “HTML5 Boilerplate”, в котором показаны в виде классов различные способы замещения текста изображением. В каждом случае кратко описываются преимущества каждого из способов:
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
// Скрыть текст от экранных читалок и браузеров
.hidden {
display: none !important;
visibility: hidden;
}
// Скрыть текст только визуально, но оставить доступным для экранных читалок
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
// Расширение класса .visuallyhidden благодаря возможности для элементов получать фокус с клавиатуры
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
// Скрыть текст визуально и от экранных читалок, но оставить нетронутой HTML-разметку
.invisible {
visibility: hidden;
}На этом все. Данная статья является вольным переводом отдельной главы из книги Ben Frain “Sass and Compass for Designers”.
