Текст и тень | htmlbook.ru
Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство 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>Контурный текст</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>Контурный текст</p> </body> </html>
Вид такого контура показан на рис. 3. Заметно, что контур получается более выразительным.
Рис. 3. Контур с помощью четырёх теней
Трёхмерный текст
Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.
Рис. 4. Трёхмерный текст
Лично мне подобный текст напоминает надписи в стиле ретро и опять же лучше всего он подходит для заголовков, а не для основного текста веб-страницы.
Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.
Пример 3. Тень для добавления трёхмерности
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
.stroke {
font: bold 3em Arial, sans-serif;
color: #0d3967;
text-shadow: #cad5e2 1px 1px 0, #cad5e2 2px 2px 0,
#cad5e2 3px 3px 0, #cad5e2 4px 4px 0,
#cad5e2 5px 5px 0;
}
</style>
</head>
<body>
<h2>Десятикамерный холодильник</h2>
</body>
</html>Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.
Тиснение текста
Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 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>
<h2>Рельефный текст</h2>
</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>
<h2>Светлая сторона</h2>
<h2>Тёмная сторона</h2>
</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>
<h2>Нерезкий текст</h2>
</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>, не считаясь с
затратами. Структура рынка, отбрасывая подробности, стабилизирует
департамент маркетинга и продаж, используя опыт предыдущих кампаний.
Построение бренда, безусловно, спонтанно отталкивает конвергентный
PR, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой
социальный статус, повышая конкуренцию. Торговая марка естественно
обуславливает план размещения, используя опыт предыдущих кампаний.</p>
</body>
</html>6.7. Падающая тень
6.7. Падающая тень
6.7.1. Общая информация
Рисунок 17.123. Пример применения фильтра «Падающая тень»
Исходное изображение
Использование фильтра GEGL «Отбросить тень»
С помощью этого основанного на GEGL фильтра можно добавить тень для изображения, выделения или текста. Цвет, позиция и размер тени настраиваются.
6.7.2. Активация фильтра
Этот фильтр находится в меню изображения Фильтры → Свет и тень → Отбросить тень….
Обычно этот фильтр отключен. Чтобы иметь возможность его использовать, добавьте в изображение альфа-канал.
6.7.3. Параметры
Рисунок 17.124. Параметры фильтра «Падающая тень»
- Профили, предварительный просмотр, сравнение до/после
Примечание Эти параметры описываются в Раздел 2, «Общие свойства».
- X, Y
Слой с выделением сместится на X точек по горизонтали и на Y точек по вертикали. Таким обрзом, эти параметры определяют положение тени по отношению к изображению.
Смещение может быть отрицательным. В таком случае, тень будет слева от выделения, если смещение по X < 0 или выше выделения, если смещение по Y < 0.
Если вам интересно, то слой тени можно чётко рассмотреть, установив значение радиуса на 0 и двигая отброшенную тень по вертикали и горизонтали ( значения Y и X).
- Радиус размывания
После создания тени к слою тени применяется размывание По Гауссу с указанным радиусом. Это придаёт отброшенной тени более реалистичный вид.
- Цвет
Цвет тени может быть любой. Нажатие на образец цвета запускает диалог выбора цвета, или можно использовать пипетку.
- Непрозрачность
Непрозрачность тени. По умолчанию, значение равно 0.500, но можно выбрать любое другое от 0 (полная прозрачность) до 2.00 (полная непрозрачность).
- Clipping
Итоговый результат применения этого фильтра может оказаться больше исходного изображения. С параметром по умолчанию С полями размер слоя будет при необходимости автоматически изменён во время применения фильтра. С параметром Без полей итоговый результат будет обрезан по границам слоя.
6.7.4. Использование фильтра «Отбросить тень»
Основанный на GEGL фильтр «Отбросить тень» может удивлять: если применить фильтр напрямую к изображению, как это делается с устаревшим фильтром тени, ничего не произойдёт.
Чтобы получить тот же результат, что и при применении устаревшего фильтра:
Откройте исходное изображение.
Создайте новое изображение, чуть больше по размеру, чем исходное, полностью прозрачное.
Скопируйте исходное изображение и вставьте его в новое. В стопке слоёв будет создано плавающее выделение.
Прикрепите плавающее выделение.
Меню/Слой/Обрезать до содержимого
Меню/Слой/Границы слоя: установите размер слоя равным размеру изображения и используйте прозрачную заливку; нажмите на кнопку В центр. Затем нажмите на кнопку Изменить.
Откройте диалог «Отбросить тень»: отброшенная тень показывается в области предварительного просмотра на холсте. Значения по умолчанию можно изменить.
Затем добавьте новый слой одного размера с изображением, и залитый желаемым цветом фона.
Переместите этот слой на самый низ стопки слоёв.Нажмите OK чтобы применить фильтр.
Применение фильтра к выделению:
Откройте исходное изображение.
Откройте новое изображение с размером, равным размеру исходного изображения , с прозрачной заливкой.
Создайте выделение
Скопируйте выделение и вставьте его в новое изображение. В стопке слоёв будет создано плавающее выделение.
Прикрепите плавающее выделение.
Меню/Слой/Обрезать до содержимого
Меню/Слой/Слой к размеру изображения (с прозрачностью)
Откройте диалог «Отбросить тень»: отброшенная тень показывается в области предварительного просмотра на холсте.
Значения по умолчанию можно изменить.Затем добавьте новый слой одного размера с изображением, и залитый желаемым цветом фона. Переместите этот слой на самый низ стопки слоёв.
В качестве фона также можно использовать и исходное изображение: отмените выделение, скопируйте изображение и вставьте его в виде нового слоя в новое изображение. Переместите новый слой в самый низ стопки изображений.
Нажмите OK чтобы применить фильтр.
Применение фильтра к тексту:
Для текста процедура создания тени более простая: создайте текст и напрямую примените фильтр «Отбросить тень».
Тень текста CSS — javatpoint
следующий → ← предыдущая Как следует из названия, это свойство CSS добавляет тени к тексту. Он принимает разделенный запятыми список теней, примененных к тексту. Давайте посмотрим на синтаксис свойства text-shadow. Синтаксис text-shadow: h-shadow v-shadow цвет радиуса размытия | нет | начальная | наследовать; Значения h-shadow: Это необходимое значение. Он определяет положение горизонтальной тени и допускает отрицательные значения. v-shadow: Это также обязательное значение, указывающее положение вертикальной тени. Он не допускает отрицательных значений. радиус размытия: Это радиус размытия, который является необязательным значением. Его значение по умолчанию равно 0, .color: Это цвет тени, а также необязательное значение. нет: Это значение по умолчанию, что означает отсутствие тени. начальный: Используется для установки значения свойства по умолчанию. inherit: Он просто наследует свойство от своего родительского элемента. Давайте разберемся, используя некоторые иллюстрации. Пример — простая тень<голова> Простая тень Протестируйте сейчасПример — нечеткая тень<голова> Нечеткая тень Протестируйте сейчасПример — несколько теней<голова>  мульти{
text-shadow: -3px -3px 3px синий, 3px 3px 3px красный;
размер шрифта: 30px;
выравнивание текста: по центру;
} <тело>Множественные тени Протестируйте сейчасПример — эффект свечения<голова> Next TopicCSS text-transform ← предыдущая следующий → |
Его свойство по умолчанию — none. Он применяет один или несколько эффектов text-shadow к текстовому содержимому элемента.
Специальные эффекты
В CSS есть ряд свойств CSS, предназначенных для создания конкретных интересных визуальных эффектов. Среди них закругленные углы и тени.
Два вида теней
В CSS тени можно добавлять либо к внешнему блоку элемента с помощью box-shadow , либо непосредственно к тексту с помощью text-shadow .
Синтаксис значения для обоих идентичен.
Тень коробки
box-shadow размещает тень на внешней рамке элемента (невидимая рамка позади элемента, которая становится видимой при применении background-color ).
Значение свойства принимает несколько терминов в следующем порядке:
-
[x-offset]— Насколько смещена тень по горизонтальной оси. Положительные числа сдвигают тень вправо, а отрицательные числа сдвигают ее влево. -
[y-offset]— Насколько тень смещена по вертикальной оси. Положительные числа сдвигают тень вниз, а отрицательные числа сдвигают ее вверх. -
[количество размытия]— Насколько тень размыта или размыта по краям. Более высокие значения приводят к более размытому краю. Отсутствие значения приводит к тени с резким краем. -
[количество спреда]— Положительные значения приводят к тому, что тень становится больше, чем рамка элемента.
Отрицательные значения вызывают его сжатие. Отсутствие значения приводит к тени того же размера, что и поле элемента. -
[color]— Определяет цвет тени. -
inset— Включение этого ключевого слова приводит к тому, что тень помещается внутрь блока элемента.
В приведенном выше примере посмотрите, сможете ли вы понять, как сделать края тени более размытыми. Можете ли вы сделать тень больше в целом? Попробуйте изменить цвет. Что произойдет, если вы добавите ключевое слово inset в конец значения?
Тень текста
Аналогично, text-shadow помещает тень непосредственно за буквами текста.
Как и box-shadow , text-shadow принимает несколько терминов для своего значения в следующем порядке: [смещение по x] [смещение по y] [количество размытия] [цвет] . Значения [spread] и inset нельзя использовать для text-shadow .
Можете ли вы сдвинуть тень так, чтобы она находилась сверху и слева от текста, а не справа внизу? Можете ли вы убрать размытие с тени, чтобы она была резкой?
Закругленные углы
CSS border-radius позволяет создавать закругленные углы на блоке элемента. Любая рамка или фон, присутствующие в элементе, будут учитывать закругленные углы
border-radius принимает любое значение измерения для определения размера, до которого округляются углы. Это единственное свойство на самом деле является сокращением для отдельных border-top-left-radius , border-top-right-radius , border-bottom-right-radius и граница-нижний-левый радиус . В качестве сокращения разные числа значений имеют разные значения:
- Одно значение: все четыре угла.
- Два значения: верхний левый и нижний правый вместе, верхний правый и нижний левый вместе.
