В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none, как показано в примере 4.
Рис. 2. Рамка вокруг полей
Пример 4. Убираем рамку
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input</title>
<style>
input:focus {
outline: none; /* Скрываем рамку */
}
</style>
</head>
<body>
<input>
</body>
</html>
Рамки через box-shadow
Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline. Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.
Чтобы получить рамку, первые три параметра следует задать нулевыми, они отвечают за положение тени и её размытие. Четвёртый параметр в данном случае отвечает за толщину границы, а пятый устанавливает цвет рамки. Для второй рамки четвёртый параметр равняется сумме толщин двух рамок.
В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow.
Пример 4. Использование box-shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-shadow</title>
<style>
div {
width: 100px;
height: 100px;
box-shadow: 0 0 0 3px red,
0 0 0 6px blue,
3px 0 0 6px orange;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Результат данного примера показан на рис. 3.
Рис. 3. Рамки, созданные свойством box-shadow
Буквица
Буквица является художественным приёмом оформления текста и представляет собой увеличенную первую букву, базовая линия которой находится на одну или несколько строк ниже базовой линии основного текста. Буквица привлекает внимание читателя к началу текста, особенно если страница лишена других ярких деталей. Обычно кроме самого символа используются изображения растений, животных и других объектов. Это, конечно, не обязательно, но может придать определённый настрой содержанию. Если хочется применить на сайте этот эффект, лучше всего для этого подойдет рисунок, выровненный по левому краю (пример 1).
манипулируя полученными предметами материального мира и фрагментами
информационного поля, эмпирическим путем достигнуть логического
завершения конкурса.</p>
</body>
</html>
Отступ от буквицы до текста задаётся свойством margin, в данном случае оно одновременно устанавливает пустое пространство справа и снизу от изображения. Результат примера показан на рис. 1.
Рис. 1. Рисунок в качестве буквицы
Достоинства рисунков в качестве буквицы заключаются в следующем: применение любого шрифта и разных эффектов, простота метода, а также возможность использования в качестве формата анимированный GIF-файл, что даёт дополнительные возможности оформления. Но есть и недостатки: если буквица на сайте применяется довольно часто, то нужно подготовить множество рисунков разных букв; также усложняется возможность редактирования текста, т. к. придётся вместо простого изменения буквы вставлять новый рисунок.
Буквица в тексте
Можно создать буквицу не в виде рисунка, а в качестве простого текста, увеличенного по сравнению с базовым шрифтом. Для того чтобы текст огибал первую букву, её необходимо выделить с помощью псевдоэлемента ::first-letter и задать свойство float, как показано в примере 2.
Пример 2. Использование ::first-letter для создания буквицы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Буквица</title>
<style>
p::first-letter {
font-size: 3em; /* Размер буквы */
color: red; /* Цвет буквы */
float: left; /* Выравнивание по левому краю */
margin: 0 4px 2px 0; /* Отступы вокруг буквы */
}
</style>
</head>
<body>
<p>Необходимо, манипулируя полученными предметами
материального мира и фрагментами информационного поля,
эмпирическим путем достигнуть логического
завершения конкурса.</p>
</body>
</html>
С помощью стилей также удобно сразу задать цвет буквицы и необходимые отступы между символами. Результат примера показан на рис. 2.
Рис. 2. Буквица
Буквица на поле
Ничто не мешает расположить буквицу слева, чётко отделив её от основного текста, как показано на рис. 3. Таким образом, можно добиться простого выразительного эффекта.
Рис. 3. Расположение буквицы на поле
Разница с предыдущим методом только в том, что буквица не обтекается текстом снизу. Для этого мы должны весь текст абзаца сдвинуть вправо через margin-left, а буквицу сдвинуть влево на то же расстояние (пример 3).
Пример 3. Буквица на поле
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Буквица</title>
<style>
p::first-letter {
font-size: 36px; /* Размер буквы */
color: red; /* Цвет буквы */
float: left; /* Выравнивание по левому краю */
margin: 0 2px 2px -30px; /* Отступы вокруг буквы */
}
p {
margin-left: 30px; /* Сдвигаем текст вправо */
}
</style>
</head>
<body>
<p>Необходимо, манипулируя полученными предметами
материального мира и фрагментами информационного поля,
эмпирическим путем достигнуть логического
завершения конкурса.</p>
</body>
</html>
Список с русскими буквами
В CSS нумерованный список может быть с латинскими и греческими буквами. А вот русских букв для списка нет. Нам это обещают в CSS3, но когда в реальности браузеры начнут поддерживать эту возможность никому не известно. Так что не станем пассивно ждать этого момента, и с помощью возможностей CSS3 добавим русские буквы в наш список прямо сейчас.
Поскольку нумерация делается через стили, сам список остаётся исходным, к нему лишь добавляется выбранный класс, назовём его cyrilic (пример 1).
Пример 1
<ol class="cyrilic">
<li>Один</li>
<li>Два</li>
<li>Три</li>
</ol>
В данном случае нет разницы, какой тег использовать — <ul> или <ol>, мы в любом случае убираем начальную нумерацию, чтобы она не накладывалась на нашу. Добавление букв осуществляется с помощью псевдоэлемента ::before и свойства content. Поскольку в каждой строке должна быть своя буква, воспользуемся псевдоклассом :nth-child(1), в скобках пишется номер буквы. Первой буквой, естественно, идёт А, второй — Б, третьей — В и т. д. Весь этот набор добавляется к селектору li следующим образом (пример 2).
В этом примере после каждой буквы идёт круглая скобка, все буквы строчные. Вы можете определить собственный вид нумерации списка, к примеру она может содержать заглавные буквы с точкой, с одной или двумя скобками или одни только буквы. В отличие от стандартной нумерации мы здесь вольны делать что угодно. Списка из десяти букв должно хватить практически для всех ситуаций, но если этого внезапно окажется мало, ничего не мешает расширить наш список, включив в него хоть все буквы русского алфавита.
Окончательно настраиваем выравнивание и положение букв, по желанию указываем размер шрифта, цвет и другие параметры (пример 3).
Плюсов у данного метода добавления нумерации гора и маленькая тележка.
• Можно использовать буквы любого алфавита, не только русского.
• Мы сами определяем, включать в список спорные буквы, такие как Ё и Й, или нет.
• Вид нумерации и оформление букв устанавливается через CSS.
• Список легко расширить, а также сделать вложенные списки.
• Можно сделать несколько списков разного вида и применять их в требуемых ситуациях или комбинировать между собой.
Поддержка браузеров
Мы имеем дело с CSS3, поэтому старые браузеры вроде IE8 отпадают сразу. Internet Explorer 9 уже в полной мере всё поддерживает, что касается остальных браузеров, то никаких проблем не возникает, даже в iPhone и Android.
Переносы слов
В отличие от текста в полиграфии, на веб-странице редко применяются переносы, поскольку мы не привязаны жёстко к формату бумаги. Сайты могут смотреть на разных мониторах, с разным разрешением, в разных операционных системах и браузерах. Всё это порождает такое сочетание комбинаций, что предугадать, как будет выглядеть конечный текст для пользователя невозможно. Из-за этого обычно текст выравнивается по левому краю, а переносы происходят словами целиком. Но всё же переносы слов в некоторых случаях нужны, например, когда применяются длинные химические или медицинские термины, в узких колонках заданной ширины, ради эстетики. В HTML и CSS ручных или автоматических способов добавления переносов не так уж и много, так что перечислю все.
Использование тега <wbr>
Тег <wbr> введён в HTML5 и создаёт перенос слов при необходимости. В тех местах, где по правилам русского языка допустим перенос, вставляем <wbr> (пример 1). Если слово целиком помещается в отведённую ширину, этот тег никак себя не проявит и о его наличии мы даже не узнаем. Если слово не помещается, браузер в месте нахождения тега <wbr> создаёт перенос.
Пример 1. Тег <wbr>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Переносы</title>
<style>
.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<p class="word">Один<wbr>надцатиклас<wbr>сница
Анжелика после окончания школы выбрала профессию
дело<wbr>произ<wbr>водитель<wbr>ницы.</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Текст с переносами слов
Мягкий перенос
Применение <wbr> имеет серьёзный недостаток — понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол ­. Он выполняет ту же роль, что и тег <wbr> — не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис (пример 2).
Результат данного примера показан на рис. 2. Заметьте, насколько эстетичнее и понятнее стал выглядеть текст в сравнении с рис. 1.
Рис. 2. Текст с переносами слов
Свойство word-break
Чтобы автоматизировать процесс создания переносов воспользуйтесь свойством word-break со значением break-all (пример 3). Добавлять какие-либо символы или теги в HTML уже не придётся, всё берут на себя стили.
Пример 3. Применение word-break
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Переносы</title>
<style>
.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
word-break: break-all;
}
</style>
</head>
<body>
<p class="word">Одиннадцатиклассница Анжелика после окончания школы
выбрала профессию делопроизводительницы.</p>
</body>
</html>
Результат данного примера показан на рис. 3. Правила переносов текста в этом случае не учитываются, поэтому слова могут переноситься весьма причудливым образом.
Рис. 3. Текст с переносами слов
Из всех перечисленных способов «полуручной» с использованием ­ даёт наилучший результат — соблюдаются правила русского языка, текст выглядит наиболее эстетично. Пользуйтесь им, когда в тексте встречаются длинные слова.
Свойство hyphens
И, наконец, самое мощное и удобное свойство для автоматического добавления переносов — hyphens. Его действие основано на встроенном в браузере словаре переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, для тега <html> добавляем атрибут lang со значением ru (пример 4).
Пример 4. Использование hyphens
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Переносы</title>
<style>
.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
</style>
</head>
<body>
<p class="word">Одиннадцатиклассница Анжелика
после окончания школы выбрала профессию
делопроизводительницы.</p>
</body>
</html>
Результат данного примера показан на рис. 4.
Рис. 4. Текст с переносами слов
Запрет переносов
Нередко возникает и обратная задача — запретить переносы в тех местах, где они по правилам языка недопустимы. Например, нельзя отрывать единицы измерения от числа (10 мл), обозначение года (54 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на неразрывный пробел (пример 5).
Пример 5. Использование
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Переносы</title>
<style>
.word {
width: 160px;
background: #f0f0f0;
border: 1px solid #333;
padding: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<p class="word">Озеро по координатам
70° 58′ 19″ с. ш.
97° 24′ 5″ в. д.
расположено в Таймырском Долгано-Ненецком
районе Красноярского края России.</p>
</body>
</html>
В данном примере для корректного написания координат используется , который не позволяет переносить текст.
Как применить трансформацию CSS3 к фоновым картинкам
Масштабирование, наклон и поворот любого элемента возможен с помощью свойства CSS3 transform. Оно поддерживается всеми современными браузерами (с префиксами) и допускает изящную деградацию, к примеру:
#myelement {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
Хорошая штука. Однако вращается элемент целиком — его содержимое, границы и фоновая картинка. Что делать, если вы желаете повернуть только фоновое изображение? Или чтобы фон остался на месте, а элемент поворачивался?
В настоящее время у W3C нет предложений по трансформации фонового изображения. Это было бы невероятно полезно, поэтому подозреваю, нечто появится в конце концов, но не поможет разработчикам, которые хотят использовать подобные эффекты сегодня.
К счастью, есть решение. В сущности, это хак, который добавляет фоновое изображение к псевдоэлементу :before или :after, а не к родительскому контейнеру. Псевдоэлемент может трансформироваться независимо.
Просмотр демонстрационной страницы
Трансформация только фона
У контейнера может не быть никаких стилей, но необходимо задать position: relative, поскольку наш псевдоэлемент располагается внутри. Также установите overflow: hidden, в противном случае фон будет выходить за пределы контейнера.
#myelement {
position: relative;
overflow: hidden;
}
Теперь мы можем создать абсолютно позиционированный псевдоэлемент с трансформируемым фоном. Свойство z-index задаём как -1, это гарантирует что фон появится под содержимым контейнера.
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
Обратите внимание, что вам, возможно, потребуется настроить ширину псевдоэлемента, его высоту и положение. К примеру, если вы используете повторяющееся изображение, область поворота должна быть больше самого контейнера, чтобы полностью вместить фон.
Фиксация фона у трансформируемых элементов
Любые трансформации родительского контейнера применяются и к псевдоэлементам. Так что нам надо отменить трансформацию, например, если контейнер поворачивается на 30 градусов, фон должен повернуться на -30 градусов, чтобы он оказался в фиксированном положении:
#myelement {
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
Опять же, необходимо настроить размер и положение чтобы фон адекватно вписывался в родительский контейнер.
Пожалуйста, посмотрите демонстрационную страницу для примера. Полный код хранится внутри HTML.
Эффект работает в IE9, Firefox, Chrome, Safari и Opera. IE8 не покажет никаких трансформаций, но фон появится.
IE6 и 7 не поддерживает псевдоэлементы, поэтому фон исчезнет. Однако, если вы хотите поддерживать эти браузеры, можно добавить фоновое изображение к контейнеру, а затем установить его как none с помощью современных селекторов или через условные комментарии.
Как сделать загнутые уголки на CSS3 без картинок
В моих предыдущих статьях мы изучили как делать словесные пузыри и ленты без дополнительных HTML-элементов или картинок. Это было достигнуто с использованием эффектов CSS3 применяемых к псевдоэлементам :before и :after. В этой статье мы задействуем похожий приём для создания эффекта загнутых уголков бумаги.
Загнутые уголки были популярны в течение нескольких лет. Пользователь видел естественно выглядящее слегка изогнутое поле, на деле же это оптическая иллюзия созданная тенью в нижней части элемента.
Ещё недавно вам надо было делать тень в виде изображения в графической программе Photoshop, Gimp или другой. В идеале это будет 24-битный PNG с прозрачностью, который накладывается на любой фон, но это может вызвать проблемы в старых браузерах.
К счастью, CSS3 предоставляет хорошую альтернативу с некоторыми преимуществами.
• Эффект работает в современных браузерах, но не будет применяться в браузерах, которые его не поддерживают.
• Тени могут быть наложены на любой фон без дополнительных изображений.
• Эффект применяется к элементам любого размера.
• Используемый код занимает намного меньше байт, чем рисунок тени.
• Тень легко настраивается. Вы можете изменить цвет или глубину небольшой модификацией кода.
Для начала давайте создадим наш единственный HTML-элемент:
В коде много свойств с вендорными префиксами для достижения эффекта, но они требуют меньшего количества байт и HTTP-запросов, чем графика.
Как сделать ленты на CSS3 без картинок
В моей прошлой статье Как сделать словесный пузырь на CSS3 без картинок мы видели, как псевдоэлементы :before и :after используются для создания различных эффектов. В этой статье мы воспользуемся подобными техниками для создания разнообразных лент.
Эффект ленты в моде. Большинство дизайнеров используют позиционированные изображения, но мы сделаем это с помощью свойств border и единственного тега <h2>.
<h2>My Heading</h2>
Давайте возьмём этот небольшой стиль и перекроем через него элемент с контентом.
/* элемент с контентом */
#page {
width: 500px;
padding: 50px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #333;
}
h2 {
position: relative;
width: 50%;
font-size: 1.5em;
font-weight: bold;
padding: 6px 20px 6px 70px;
margin: 30px 10px 10px -71px;
color: #555;
background-color: #999;
text-shadow: 0px 1px 2px #bbb;
-webkit-box-shadow: 0px 2px 4px #888;
-moz-box-shadow: 0px 2px 4px #888;
box-shadow: 0px 2px 4px #888;
}
В нашем примере у #page заданы поля по 50px и рамка толщиной в 1px. У заголовка имеется левый отступ значением -71px, так что он перекрывает край на 20px. Заметьте, мы также используем position: relative чтобы при необходимости можно было позиционировать другие элементы ленты.
Теперь нам нужно создать сложенную часть ленты, которая проходит «за страницей». Как было видно в предыдущей статье, мы можем использовать свойство border для создания любого типа треугольника с помощью псевдоэлемента :after нулевой ширины и высоты.
h2:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
Выглядит здорово и это может быть всё, что вам нужно. Но клиенты любят страницы насыщенные дизайном, так что немного доработаем ленту. Для начала мы можем добавить форму в виде флага к правому краю путём наложения белого треугольника через псевдоэлемент :before.
Замечательно, но как насчёт обратной складки у ленты по левому краю? Без проблем.
h2:before {
content: ' ';
position: absolute;
width: 30px;
height: 0;
left: -30px;
top: 12px;
border-width: 20px 10px;
border-style: solid;
border-color: #999 #999 #999 transparent;
}
Цвет границы у псевдоэлемента должен совпадать с цветом фона h2, поскольку он на деле выводится над заголовком. Изменение z-index не работает c псевдоэлементами при позиционированном родителе.
Как сделать словесный пузырь на CSS3 без картинок
Я помню как делал первый свой словесный пузырь без картинок много лет назад. Для этого потребовалась многострочная функция JavaScript для введения элементов в DOM и ужасный CSS, который выглядел довольно страшно и не так хорошо работал в IE5.
CSS3 начинает менять нашу жизнь к лучшему. Теперь можно создать симпатичный словесный пузырь, который работает во всех браузерах, использует единственный элемент HTML, несколько строк кода CSS3, без картинок и без всякого JavaScript.
Чтобы вам было проще, начну с рассмотрения HTML. Требуется один элемент, так что я использовал тег <p>.
<p class="speech">SitePoint Rocks!</p>
Вначале добавляем стиль рамки.
p.speech {
position: relative;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
Здесь ничего сложного нет. Единственное важное свойство это position: relative, оно необходимо для указателя словесного пузыря. Также нужны вендорные префиксы Mozilla и Webkit для border-radius и box-shadow, чтобы они работали во всех браузерах. IE8 и ниже покажет квадратные уголки и без тени, но рамка всё равно будет видна.
Теперь нам нужно создать треугольный указатель пузыря. Чтобы не прибегать к изображениям мы можем использовать свойство border для создания любого типа треугольника. В качестве краткого объяснения изучим элемент с широкими разноцветными границами.
Если уменьшить ширину и высоту нашего элемент до нуля, а затем использовать границы разной толщины, то мы увидим как появляются разные треугольники.
Для указателя нашего словесного пузыря мы можем использовать одноцветную верхнюю и левую границу с прозрачной правой и нижней границей.
Но как мы свяжем эти свойства border с нашим элементом? К счастью, можно использовать псевдоэлементы :before и :after для создания ещё двух пунктов содержания. Так что.
p.speech:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 30px;
top: 100px;
border: 25px solid;
border-color: #666 transparent transparent #666;
}
Треугольник располагается внизу нашего пузыря. Кстати, не пытайтесь добавить тень к этому элементу, она будет показана вокруг прозрачных границ, а не видимого треугольника.
Теперь надо удалить часть этого треугольника. Мы можем позиционировать маленький белый треугольник поверх серого для достижения такого эффекта.
p.speech:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 38px;
top: 100px;
border: 15px solid;
border-color: #fff transparent transparent #fff;
}
Наш словесный пузырь на чистом CSS3 без картинок завершён.
На деле мы можем использовать псевдоэлементы :after и :before для создания разных эффектов. Например, пузырь c мыслями может быть создан двумя пунктами содержания скруглёнными до окружности.
p.thought {
position: relative;
width: 130px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 58px;
-moz-border-radius: 58px;
border-radius: 58px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
p.thought:before, p.thought:after {
left: 10px;
top: 70px;
width: 40px;
height: 40px;
background-color: #fff;
border: 8px solid #666;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
}
p.thought:after {
width: 20px;
height: 20px;
left: 5px;
top: 100px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
}
Текст и тень
Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow, мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.
Использование text-shadow
В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).
Рис. 1. Параметры text-shadow
Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.
Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.
К сожалению, IE до версии 10.0 не поддерживает text-shadow, так что в этом браузере мы никаких красивостей не увидим.
Контурный текст
Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.
Рис. 2. Контурный текст
Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.
Пример 1. Контурный текст
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
.stroke {
font: 2em Arial, sans-serif;
text-shadow: red 0 0 2px;
}
</style>
</head>
<body>
<p class="stroke">Контурный текст</p>
</body>
</html>
Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).
Пример 2. Четыре тени для контура
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
.stroke {
font: 2em Arial, sans-serif;
text-shadow: red 1px 1px 0, red -1px -1px 0,
red -1px 1px 0, red 1px -1px 0;
}
</style>
</head>
<body>
<p class="stroke">Контурный текст</p>
</body>
</html>
Вид такого контура показан на рис. 3. Заметно, что контур получается более выразительным.
Рис. 3. Контур с помощью четырёх теней
Трёхмерный текст
Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.
Рис. 4. Трёхмерный текст
Лично мне подобный текст напоминает надписи в стиле ретро и опять же лучше всего он подходит для заголовков, а не для основного текста веб-страницы.
Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.
Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.
Тиснение текста
Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).
Рис. 5. Рельефный текст
Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).
Пример 4. Рельефный текст
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
body {
background: #f0f0f0; /* Цвет фона веб-страницы */
}
.stroke {
font: bold 3em Arial, sans-serif;
color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */
text-shadow: #fff -1px -1px 0,
#333 1px 1px 0;
}
</style>
</head>
<body>
<h1 class="stroke">Рельефный текст</h1>
</body>
</html>
Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.
text-shadow: #333 -1px -1px 0,
#fff 1px 1px 0;
Свечение
Свечение вокруг текста — это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения достаточно изменить цвет тени и поставить желаемый радиус размытия. Поскольку свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым. На рис. 6 показан пример свечения разных цветов.
Рис. 6. Свечение текста
Пример 5. Свечение
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
.light {
text-shadow: #5dc8e5 0 0 10px; /* Свечение голубого цвета */
color: #0083bd;
}
.dark {
text-shadow: red 0 0 10px; /* Свечение красного цвета */
}
</style>
</head>
<body>
<h1 class="light">Светлая сторона</h1>
<h1 class="dark">Тёмная сторона</h1>
</body>
</html>
Размытие
Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис. 7), причём степень размытия легко регулировать через параметр text-shadow.
Рис. 7. Текст с размытием
Для сокрытия оригинального текста достаточно задать цвет как transparent (пример 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.
Пример 6. Размытие текста
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
.blur {
text-shadow: #000 0 0 5px;
color: transparent; /* Прозрачный цвет текста */
}
</style>
</head>
<body>
<h1 class="blur">Нерезкий текст</h1>
</body>
</html>
Тень и псевдоклассы
Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter. За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В примере 7 показаны такие приёмы.
Пример 7. Использование псевдоклассов
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
a:hover { /* Вид ссылки при наведении на неё курсора */
text-shadow: #5dc8e5 0 0 5px;
color: #000;
}
p:first-letter { /* Первая буква абзаца */
font-size: 2em;
text-shadow: red 1px 1px 0, red -1px -1px 0,
red -1px 1px 0, red 1px -1px 0;
}
</style>
</head>
<body>
<p>Нишевый проект тормозит <a href="1.html">традиционный канал</a>, не считаясь с
затратами. Структура рынка, отбрасывая подробности, стабилизирует
департамент маркетинга и продаж, используя опыт предыдущих кампаний.
социальный статус, повышая конкуренцию. Торговая марка естественно
обуславливает план размещения, используя опыт предыдущих кампаний.</p>
</body>
</html>
Кнопка или ссылка?
Поддержка браузерами возможностей CSS3 и в связи с этим активное использование в веб-дизайне градиентов, теней и скруглений привело к тому, что стала размываться чёткая грань между встроенными элементами интерфейса и «нарисованными». На деле пользователю должно быть всё равно, что перед ним, ссылка или кнопка, пусть даже они выглядят абсолютно одинаково, ведь на то и другое можно щёлкнуть. В действительности же, неверное использование одного элемента взамен другого может привести к нарушению понимания логики сайта. Иными словами, посетителю сайта пользоваться им станет неудобно и некомфортно.
Давайте сделаем ссылку и кнопку, оформим их одинаково и посмотрим, чем же они различаются между собой кроме оформления. В примере 1 я вставил в код тег <a> и <button> и применил к ним стилевой класс design, при этом постарался убрать различия, чтобы эти два элемента выглядели похожими друг на друга как близнецы.
Пример 1. Оформление элементов
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ссылка и кнопка</title>
<style>
.design {
display: inline-block; /* Строчно-блочный элемент */
padding: 5px 20px; /* Добавляем поля */
text-decoration: none; /* Убираем подчёркивание у ссылки */
cursor: pointer; /* Курсор в виде руки */
background: #deefff; /* Фон для браузеров, не поддерживающих градиент */
Рис. 1. Ссылка и кнопка, вид которых изменён через стили
Разницы на первый взгляд нет. Оба элемента одинаковы, при наведении на них курсора мыши он превращается в «руку». Можно щёлкать и ждать ответного гудка. Вот тут как раз и начинаются мелочи, в которых кроется дьявол. Систематизирую различия в мелочах.
Ссылка
• в статусной строке браузер показывает адрес ссылки, на которую она ведёт;
• ссылку можно открыть в новом окне или вкладке средней кнопкой мыши;
• ссылку можно сохранить через контекстное меню браузера.
Кнопка
• при щелчке по кнопке происходит переход к странице, заданной внутри атрибута action тега <form>. Разумеется, это срабатывает, если у нас кнопка вложена в форму. В примере выше можно хоть защёлкать кнопку, ни к чему это не приведёт;
• на кнопку можно навесить функцию JavaScript, которая будет делать что-нибудь фееричное, чего не может ссылка.
Получается, что результат нажатия на кнопку непредсказуем, в отличие от ссылки. Здесь то мы точно знаем, что откроется новая страница. В случае с кнопкой может открыться новая страница или выполниться скрипт или вообще ничего не произойдёт. К тому же между кнопкой и ссылкой происходит путаница. Наша сверхстильная кнопка не очень похожа на саму себя, и чтобы показать, что на неё можно щёлкнуть, в стилях добавляется свойство cursor со значением pointer. Но это приводит к тому, что теперь кнопка воспринимается как ссылка и некоторые пользователи пытаются открыть такую кнопку в новой вкладке, а это, конечно, невыполнимо.
Что можно сделать для устранения этого противоречия. Вариантов несколько.
1. Ничего не делать, пользователи сами пусть разбираются.
2. Воспользоваться опытом JavaScript. В этом случае обычные ссылки делаются подчёркнутыми (что, в общем-то, не обязательно), а текст, при нажатии на который открывается невидимый блок или меняется содержимое текущей страницы, выделяется пунктирным подчеркиванием.
3. Убрать с кнопки свойство cursor, оставив значение по умолчанию.
Текст с пунктиром показан на рис. 2. Для наглядности несколько увеличил размер шрифта.
Рис. 2. Кнопка с пунктирным подчёркиванием текста
Опять же, если при щелчке по кнопке открывается другая страница, пунктир не нужен, поскольку будет сбивать пользователей с толку. Так что способ 2 подходит только для скриптов, выполняющих какую-то работу
