Пример 5. Совмещение теней в html
Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.
На странице преобразуется в следующее
Пример №5. Совмещение теней
Примечание: старые браузеры
IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow
- -webkit-box-shadow
— для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5 - -moz-box-shadow
— для Firefox до версии 4.0
Свойство box-shadow добавляет элементу одну или более теней. Тень представляет собой копию элемента, смещенную на указанное расстояние. Тени бывают внешние или внутренние, размытые или плоские, они могут следовать контурам блоков со скругленными углами. С помощью ключевого слова inset создаются тени внутри элемента, делая элемент визуально объёмным или вдавленным.
Позиционирование текста на картинке в CSS
Нам надо рядом с каждым овощем, на иллюстрации ниже, подписать его название. Задача вроде бы простая, но поверьте, может свести с ума любого начинающего веб-мастера.
Я умышленно для примера взял большую картинку 1280×733, чтобы заодно показать, как её адаптировать под разные разрешения экранов. Уже прошли те времена, когда достаточно было научиться верстать только под десктопные разрешения. Делая верстку, следует сразу позаботиться об адаптивности.
HTML-разметка
Первым делом создаем контейнер для овощной картинки и для надписей
Обратите внимание, что каждую надпись мы помещаем в отдельный блок с разными классами. И это логично, поскольку все надписи будут иметь свои координаты на странице, а мы будем управлять ими, прописывая свойства в дивах
После сделанной HTML-разметке, мы видим только фрагмент картинки и текст, оказавшийся под картинкой. Знакомая картина, не правда ли?
Картинка разъехалась на все свои немаленькие пиксели и появилась горизонтальная полоса прокрутки, но к счастью это легко исправить, задав ширину картинке 100%, тем самым сделав её адаптивной. Хотя бы одну проблему решили.
Теперь займемся текстом.
CSS-стили
В стилях контейнера, ключевым будет свойство position: relative. Этим мы меняем правила и просим вести отсчет координат не от верхнего левого угла окна браузера, а от угла контейнера, который является родителем для всех вложенных в него элементов и занимает 90% окна.
.container width: 90%; position: relative; text-align: center; color: #000; font-family: arial black; font-size: 250%; >
Дальше будем позиционировать надписи, просто подбирая в системе X/Y нужные координаты, делать подбор удобно в Chrome / Инструменты разработчика, копируя и вставляя код в файл со стилями.
.left position: absolute; top: 26%; left: 6%; >
.center position: absolute; top: 17%; left: 42%; >
.right position: absolute; top: 1%; right: 27%; >
Мы задали координаты не в пикселях, а в % не случайно, при уменьшении размеров экрана, тогда текст будет оставаться там же, где мы его закрепили. Это хорошая новость, а плохая это то, что размер текста не уменьшается вместе с картинкой. Картинка сама уменьшается, а текст надо уменьшать принудительно.
Медиа-запросы
На разрешении равным или меньше 768 пикселей, уменьшить размер шрифта до 150%. Откуда мы узнали, что надо уменьшать именно на 768 пикселях? Через инспектор кода, мы увидели, на какой отметке текст наскакивает на соседние элементы.
@media screen and (max-width: 768px) .container font-size: 150%; > >
Одного запроса оказалось недостаточно, уменьшили размер текста и на 470 пикселях.
@media screen and (max-width: 470px) .container font-size: 90%; > >
Конечный результат
Посмотрите на реальной странице, как прекрасно смотрится текст на картинке на разных разрешениях.
Демонстрация.
Из данного видео-курса «HTML5 и CSS3 с Нуля до Гуру»вы получите систематизированные знания о том, как делаются сайты, на простых примерах.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья : http://vk.com/myrusakov.Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright 2010-2020 Русаков Михаил Юрьевич. Все права защищены.
Основы использования теней
Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr, которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.
Синтаксис
Для создания тени текста используется синтаксис свойства text-shadow, который приводится ниже. Нужно определить четыре параметра: первые два задают положение тени, третий устанавливает уровень размытия, а четвертый определяет цвет тени.
text-shadow: смещение_по_горизонтали смещение_по_ вертикали размытие цвет;
Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
Результат использования данного свойства будет выглядеть следующим образом:
Почему используется rgba?
Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени — уровень прозрачности.
Данный метод существенно проще, чем другие способы определения цвета
Вам не надо акцентировать внимание на определении оттенка цвета тени, который может быть лишь немного темнее или светлее цвета фона. С rgba вы можете просто использовать белый или черный цвета и увеличить их прозрачность, чтобы добиться нужного оттенка фона при смешении красок
Режимы смешивания
Режимы смешивания CSS позволяют определить смешивание при наложении двух элементов. Смешивание очень знакомо пользователям редакторов вроде Photoshop.
В режимах смешивания CSS два значения:
- , которое смешивает цвет фона и цвета отдельного элемента.
- , которое смешивает элементы, наложенные друг на друга.
Вы можете найти больше примеров смешивания на странице blend-modes.html (смотрите источник) и на странице .
Примечание: Смешивание относительно новое свойство, поэтому поддерживается хуже, чем фильтры. Оно совсем не поддерживается на Edge, а Safari поддерживает лишь некоторые значения свойства.
Снова обратимся к примеру. Во-первых, — мы покажем несколько контейнеров , чтобы вы сравнили оригинал с редактированной версией:
Воспользуемся CSS — добавим к одно фоновое изображение и зелёный фон:
Слева вы видите оригинал, справа — изменённое изображение:
Рассмотрим . Здесь мы также используем несколько , но каждый из них расположен над простым с фиолетовым фоном, чтобы показать, как элементы будут смешаны:
А здесь CSS:
И это даст нам следующее:
Как видите, смешались не только фоновые изображения, но и под ними.
Примечание: Не переживайте, если вы не знаете такие свойства разметки, как , , , и т. д. Мы детально рассмотрим это в модуле CSS Layout.
Использование теней для изображений
Заключительный пример этой статьи будет посвящен использованию теней для изображений
Сразу хочу обратить Ваше внимание на то, что напрямую указать тень для HTML элемента не получится, но у нас есть возможность указать изображение как фон для интересующего нас элемента, и уже этому элементу задать необходимую нам тень
Работу с фоновыми изображениями мы подробно рассмотрим в статье учебника «Работа с фоном элемента в CSS», а сейчас, чтобы поставить точку в изучении использования теней, поверхностно её затронем, и используем изображение в качестве фона к элементу в следующем примере:
<!DOCTYPE html>
<html>
<head>
<title>Пример использования теней для изображений в CSS</title>
<style>
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 237px; /* устанавливаем ширину блока (под размер изображения на этом этапе обучения) */
height: 212px; /* устанавливаем высоту блока (под размер изображения на этом этапе обучения) */
margin: 2em; /* устанавливаем внешний отступ со всех сторон элемента */
}
.test {
background-image: url(grumpy.jpg); /* задаем фоновое изображение для элемента */
box-shadow: inset 0 0 50px 10px violet; /* устанавливаем внутреннюю тень для элемента(inset) без смещения с размытием 50px и размером 10px красного цвета */
}
.test2 {
background-image: url(grumpy.jpg); /* задаем фоновое изображение для элемента */
box-shadow: 0 0 50px 10px rgba(255,0,255,.7); /* устанавливаем внешнюю тень для элемента без смещения с размытием 50px и размером 10px зеленого(лесного) цвета */
}
</style>
</head>
<body>
<div class = "test"></div>
<div class = "test2"></div>
</body>
</html>
В данном примере мы добавили на страницу:
- Два блока фиксированной ширины и высоты (237px и 232px), добавили внешние отступы для всех сторон (2em) и установили, что блоки являются блочно-строчными для возможности выстроить их в линейку. Размер блока 237px на 232px мы установили под размер изображения, чтобы на данном этапе обучения не приходилось масштабировать изображение под элемент и затрагивать те свойства CSS, которые планируются к изучению на более позднем этапе (в статье учебника «Работа с фоном элемента в CSS»).
- Для первого блока с классом .test мы указали нулевое значение горизонтальной и вертикальной тени, но при этом радиус размытия мы указали 50px и расширили ее, задав радиус растяжения 10px. Цвет тени указали предопределенным цветом (violet). Кроме того мы указали в объявлении ключевое слово inset, благодаря чему тень падает внутрь элемента. Другими словами мы создали внутреннюю тень элемента.
- Для второго блока с классом .test2 мы указали нулевое значение горизонтальной и вертикальной тени, но при этом радиус размытия мы указали 50px и расширили ее, задав радиус растяжения 10px. Цвет тени указан в режиме RGBA.
Реэультат нашего примера:
Рис. 98 Пример использования теней для изображений в CSS (свойство box-shadow)
Как сделать тень в CSS — два варианта реализации
Vertical offset и horizontal offset — это вертикальное и горизонтальное смещение. С помощью этих параметров мы задаем направление, в котором объект будет отбрасывать тень:
Чтобы сделать жесткую CSS тень, установите степень размытия или вообще не задавайте это значение. Если требуется задать несколько свойств блока, укажите их через запятую.
Тени текста в CSS — text-shadow
Свойство text-shadow поддерживают все популярные браузеры (Google Chrome, Firefox, Opera, Safari). Text-shadow имеет четыре параметра:
- Смещение по горизонтали (положительное – вправо, отрицательное – влево);
- Смещение по вертикали (положительное — вниз, отрицательное – вверх);
- Радиус размытия;
- Цвет тени.
По синтаксису text-shadow во многом напоминает box-shadow:
При этом spread-shadow отсутствует. Вот так это может выглядеть на примере:
Эффект тени 8
Эффект изогнутых теней по бокам блока.
CSS
С появлением стандарта CSS 3
введено свойство box-shadow , которое получило широкое применение среди веб-разработчиков, так как оно позволяет с легкостью добавить одну или несколько теней к блоку элемента для придания желаемого визуального эффекта.
В предыдущий статье мы с Вами рассматривали свойство border-radius , используя его, вы можете получить тень с закругленными углами. По аналогии с текстовой тенью (text-shadow), вы сможете создавать множественные тени, они наносятся по z-оси
спереди назад (с первой заданной тенью сверху).
Давайте детально рассмотрим синтаксис этого современного свойства:
Рассмотрим по порядку возможные значения этого свойства:
| Значение | Описание |
|---|---|
|
none |
Тень не отображается. Это значение по умолчанию. |
|
inset |
Необязательное значение. Если это значение не указано (по умолчанию), то тень будет снаружи элемента и создаст эффект выпуклости элемента. При наличие ключевого слова (значения) inset , тень будет падать внутри элемента и создаст эффект вдавленности. Другими словами, это изменение от наружной тени к внутренней. |
|
h-shadow |
Обязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений. |
|
v-shadow |
Обязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений. |
|
blur-radius |
Необязательное значение. Задаёт радиус размытия. Чем больше это значение, тем больше размытие, при этом тень становится больше и светлее. Если значение не задано, то значение будет равно 0 (резкие — отчетливые тени). Отрицательные значения не допускаются. |
|
spread-radius |
Необязательное значение. Размер тени (радиус растяжения тени). При положительных значениях тень будет расшииряться, а при отрицательных сжиматься. Если значение не задано, то значение будет равно 0 (тень соответствует размеру элемента). |
|
color |
Необязательное значение. Определяет цвет тени (HEX, RGB, RGBA, HSL, HSLA, «Предопределённые цвета «). Значением по умолчанию является черный. |
Основные моменты, которые вам необходимо понять, чтобы создавать тени для элементов:
Хочу обратить Ваше внимание на то, что свойство box-shadow в настоящее время поддерживается всеми современными браузерами:
| Свойство | Opera | IExplorer | Edge | |||
|---|---|---|---|---|---|---|
|
box-shadow |
10.04.0 -webkit- |
4.03.5 -moz- |
10.5 |
5.13.1 -webkit- |
9.0 | 12.0 |
Если Вы хотите расширить поддержку некоторых браузеров, включая мобильныx IOS 3.2 — 4.3
и Android 2.1 — 3
, то рекомендуется использовать префиксы производителей и использовать следующий синтаксис (в примерах статьи будет использован синтаксис только для современных браузеров):
/* Safari 3.1 — 4, IOS 3.2 — 4.3 и Android 2.1 — 3 */
Перейдем к практике и начнем с простого примера, в котором добавим по одной тени к элементам:
Пример использования свойства box-shadow в CSS
box-shadow:10px 10px 0px red;
class =
«test2»
>
box-shadow:10px 10px 10px #777;
Реэультат нашего примера:
Тень с помощью CSS 3, без изображений (вариант 2)
В этом примере мы сделаем более реалистичную тень для старых браузеров IE. Для этого добавим в основной блок еще два — блок с основным содержимым и блок специально для создания тени в IE, который закроем в условные комментарии. Затем с помощью абсолютного позиционирования мы положим его под блок с контентом и добавим специальный фильтр. Этот фильтр не просто добавит тень, он превратит в нее весь блок, но так как он будет лежать внизу, выглядывая только по краям, то и получится нужный нам эффект.
Пример HTML и CSS: создание теней с помощью CSS 3 (вариант 2)
Описание примера
Добавляем внутрь основного элемента два блока — «cont_block» и «shadow_block» (блок-тень), где второй закрываем в условные комментарии, чтобы его увидели только IE8 и младше.
Задаем основному блоку «block» относительное позиционирование (CSS position:relative), так как позиционировать блок-тень будем относительно него, а самому «shadow_block» — абсолютное.
C помощью свойств CSS width и height растягиваем блок-тень во всю ширину и высоту родителя. Также добавляем ему отрицательное значение z-index, чтобы «положить» его под блок с контентом.
Применяем к блоку-тени фильтр Blur, где PixelRadius — радиус размытия тени, MakeShadow — указывает, что блок будет тенью, а ShadowOpacity — уровень прозрачности тени, который изменяется от 1 до 0
Важно! Параметр PixelRadius не просто размывает тень по краям, он еще и увеличивает размеры блока, у нас это увеличение составило по 5px с каждой стороны.
Чтобы тень стала видна слева и сверху от «cont_block», применяем к блоку-тени отрицательные значения свойств CSS left и top. Но это еще не все
В нашем примере снизу и справа тень имеет больший размер, чтобы этого добиться, добавляем блоку-тени нижний и правый внутренний отступ (CSS padding), расширяя его. Все, готово.
Изменяя параметры из четвертого и пятого пунктов, вы можете сделать другие варианты тени.
Для IE6 здесь было использовано несколько хаков, чтобы и в нем все правильно работало. Не забывайте, что вместо них, вы всегда можете вынести эти свойства в отдельный файл и подключить его с условными комментариями.
Эффект тени 7
Такой же эффект только тень снизу и сверху блока.
CSS
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
/*==================================================
* Effect 7
* ===============================================*/
.effect7
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect7:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
Тень внутри блока в CSS
Добиться эффекта появления тени внутри блока, можно прописав:
body{font-family: Arial,Verdana,sans-serif;}
h2{text-align: center;margin:5px 0 10px 0;font-weight:bold;}
p{font-size:0.8em;margin-bottom:5px;}
.bsh-wrap{width:300px; border:1px solid #f28cfb; border-radius:5px; margin:25px; overflow:hidden;}
.bsh-shad{position:relative;}
.bsh-shad:after {bottom: -1px; box-shadow: 0 0 8px 0 rgba(167, 97, 166, 0.8); content: ""; height: 1px; left: 1px; position: absolute; right: 1px;}
.bsh-inner{padding:10px;}
Можно добавить тень с одной или нескольких сторон блока:
boxShadow3 {
width: 80%;
max-width: 550px;
margin: 1em auto;
padding: 1em;
box-shadow: 0 0 40px rgba(0, 0, 0, .1) inset;}
.boxShadow4 {
width: 80%;
max-width: 550px;
margin: 2em auto;
padding: 4em;
background: lightcyan;
box-shadow: 0 0 4em 4em white inset;}
-webkit-background-clip: text
Функция, о которой мы, кажется, упомянули в свойстве для значения . Опция позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс для любых браузеров:
Так почему остальные браузеры используют префикс ? В основном для совместимости — поэтому многие веб-разработчики стали вставлять префиксы , отчего другие браузеры казались сломанными, когда, по факту, всё было выполнено по всем стандартам. Поэтому были введены некоторые такие функции.
Если вы собираетесь использовать подобные опции, проверьте совместимость их с браузерами.
Примечание: Пример с смотрите на background-clip-text.html (или источнике).
Тени при наведении — CSS
Теперь давайте рассмотрим создание теней для определенного состояния. В нашем примере будет использоваться кнопка.
Для того, чтобы создать тень для кнопки, её для начала нужно разместить. Открываем тег a, записываем для него класс button и любое текстовое значение, для лучшего отображения.
Сначала зададим размещение, с помощью свойства margin и увеличим кнопку до определенных размеров. Для увеличения можно использовать свойства width и height, либо же воспользоваться свойством padding.
Теперь задаем цвет фона, текста и рамку. Наша кнопка готова, приступаем к созданию тени.
Сначала создадим обычную тень, небольшого размера, с помощью box-shadow. Она будет видна по умолчанию, без наведения на кнопку.
Сделаем самый простой эффект — увеличим тень. Можете сделать её размытой или изменить растяжение — по вкусу.
Для лучшего эффекта зададим свойство transition для обычной ссылки, поставим время в 0.5s.
Теперь у нас есть отличная кнопка с красивой тенью, которая при наведении будет плавно расширяться.
Свойство box-shadow: синтаксис
Данный стиль записывается следующим образом:
box-shadow: inset 4px 4px 8px 5px #333333;
Рассмотрим по порядку, за что отвечает каждый параметр (слева направо):
- Ключевое слово : параметр, который необязательно указывать; рисует тень внутри элемента.
- Сдвиг по оси X: указывает степень смещения тени по горизонтали относительно элемента. Положительное значение означает сдвиг вправо, отрицательное — влево. Значение означает, что тень без сдвига.
- Сдвиг по оси Y: указывает степень смещения тени по вертикали. Положительное значение означает сдвиг вниз, отрицательное — вверх. Значение — это тень без сдвига.
- Радиус размытия: это степень размытия тени. Чем больше значение, тем более размыта тень. Если параметр не указан, используется значение по умолчанию — . В таком случае тень будет идеально четкой.
- Расширение: необязательный параметр, отвечающий за растяжение тени по обеим осям; чем больше значение, тем больше растяжение. Расширение работает только при наличии предыдущего параметра. Значение по умолчанию — .
- Цвет тени: с этим параметром всё понятно — он задает цвет тени элемента. Цвет по умолчанию — черный.
Примечание. Браузерам Android и более старым версиям iPhone Safari требуется префикс для корректной работы CSS свойства box-shadow.
Данное свойство может принимать несколько групп значений (делать несколько теней одновременно). Для этого понадобится перечислить эти группы параметров через запятую. Например:
box-shadow: 15px 15px 20px #8b0163,
inset 15px 15px 20px #630046;
Примеры box-shadow
Чтобы вы лучше поняли всю силу и прелесть свойства CSS box-shadow, мы покажем несколько примеров, которые можно смело применять на практике. Данное свойство способно сильно преобразить обычный блок!
box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
Эффект бумаги
box-shadow: 0 1px 4px rgba(0, 0, 0, .3),
-23px 0 20px -23px rgba(0, 0, 0, .6),
23px 0 20px -23px rgba(0, 0, 0, .6),
inset 0 0 40px rgba(0, 0, 0, .1);
box-shadow: 6px 6px #ccc,
12px 12px #a3a3a3;
box-shadow: 0 0 0 7px rgb(118, 46, 177),
0 0 0 14px rgba(118, 46, 177, 0.6),
0 0 0 21px rgba(118, 46, 177, 0.4);
Уголки
box-shadow: -20px 20px 0 -17px #eee,
20px -20px 0 -17px #eee,
20px 20px 0 -20px #592385,
0 0 0 2px #592385;
Как видите, свойство box-shadow предоставляет огромное поле для фантазии. Вы можете преображать блоки как угодно — главное, иметь чувство меры!
В следующей главе вас ждет изучение свойств width и height, определяющих размеры элементов.
box-shadow — тень блока (внешняя и внутренняя)
12.0+
9.0+
4.0+
10.0+
10.5+
5.1+
Описание
CSS свойство позволяет добавить одну или более тень для блока. Тень блока не влияет на размер и расположение самого элемента (несмотря на то, что тень может быть расположена далеко за его пределами), но она может перекрываться другими элементами, расположенными в коде после текущего элемента, или перекрывать другие элементы, расположенные в коде перед текущим элементом.
Для каждой тени можно задать от 2 до 6 параметров. Если добавляется несколько теней, то список параметров для каждой тени указывается через запятую:
div {
width: 300px;
height: 200px;
margin: 100px;
background-color: silver;
box-shadow: 0 0 10px 5px black,
40px -30px 15px lime,
40px 30px 50px red,
-40px 30px 15px yellow,
-40px -30px 50px blue;
}
При наложении теней друг на друга каждая последующая тень в списке будет располагаться под предшествующей.
Тень блока может быть как внешней, так и внутренней. Внутренняя тень задаётся с помощью ключевого слова , которое указывается в параметрах тени первым или последним.
Примечание: для добавления тени к тексту используйте CSS свойство text-shadow.
| Значение по умолчанию: | none |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.boxShadow=»10px 10px 5px #888888″ |
Значения свойства
Примечание: первые 4 значения, описываемые в таблице, указываются с помощью единиц измерения поддерживаемых в CSS.
| Значение | Описание |
|---|---|
| смещение-x и смещение-y | Первые два значения устанавливают смещение тени. Первое значение (смещение-x) указывает расстояние смещения по горизонтали. Отрицательные значения располагают тень слева от элемента. Второе значение (смещение-y) указывает расстояние смещения по вертикали. Отрицательные значения располагают тень над элементом. Если оба значения 0, тень располагается за элементом и её не будет видно, так как по умолчанию тень имеет тот же размер, что и элемент. (обязательные параметры) |
размытие
Третье значение устанавливает степень размытия тени. Чем больше это значение, тем сильнее размытость — тень становится более большой и светлой. Отрицательные значения не допускаются. Если значение отсутствует или равно 0, это означает, что тень будет без размытия — с острыми углами. (необязательное значение)
размер тени
Четвёртое значение изменяет размер тени. Положительное значение увеличивает размер тени со всех сторон, отрицательное — уменьшает. Если значение отсутствует или равно 0, это означает, что тень будет того же размера, что и элемент. (необязательное значение)
цвет
Определяет цвет тени. Цвет можно установить различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Всегда указывайте цвет тени, так как браузеры по разному обрабатывают отсутствие значения цвета.
inset
Ключевое слово, указывающее, что тень должна располагаться внутри элемента. Внутренняя тень создаёт эффект вдавленности и располагается над фоновым цветом и/или фоновым изображением, но под любым содержимым элемента. Если ключевое слово не указано, тень будет отбрасываемая, т.е. будет располагаться под элементом. Ключевое слово может быть расположено в качестве первого или последнего значения. (необязательное значение)
none
Указывает на отсутствие тени.
Вдавленный текст
С помощью свойства text-shadow можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.
Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.
Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.
body {
background: #222;
}
#text h1 {
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}
Текстовые тени для нормальных браузеров
Под нормальные браузеры попали все современные браузеры, которые шагают более-менее в ногу с рекомендациями W3C. В данном случае, эти браузеры понимают CSS3 свойство text-shadow, которое еще в далеком 2003 году.
Итак, перечень браузеров, которые поддерживают свойство text-shadow:
- Safari 3.1 (Mac/Win) — поддерживает, не поддерживаются множественные тени
- Safari 4 (Mac/Win) — поддерживает полностью
- Opera 9.5+ (Mac/Win/Lin) — поддерживает полностью
- Firefox 3.1/3.5 (Mac/Win/Lin) — поддерживает полностью
- Google Chrome 2 (Win) — поддерживает полностью
- Shiira (Mac) — поддерживает, не поддерживаются множественные тени
- Konqueror (Lin/Mac/Win) — поддерживает полностью
- iCab (Mac) — поддерживает, не поддерживаются множественные тени
- Safari on iPhone — поддерживает, не поддерживаются множественные тени
- Nokia Symbian-Smartphones (Series 60) — поддерживает
- Opera Mini 4.1 — поддерживает, не поддерживает размытость тени
Для этих браузеров, чтобы сделать тень тексту достаточно одной строки в CSS:
h1 {
text-shadow: 0px 1px 3px #000;
}
Получим вот такой модный заголовок:
заголовок с тенью
Подробный синтаксис смотри в описании CSS свойства text-shadow.
С помощью text-shadow можно добиться различных интересных эффектов.
h1 {
color: #fff;
background: #666;
text-shadow: 0px 0px 3px #fff;
}
размытый заголовок
Дублирование текста
h1 {
text-shadow: 0px 20px #000;
}
продублированный заголовок
Множественные тени позволяют добиться еще нескольких эффектов:
Вдавленный текст
h1 {
background: #ccc;
color: #ccc;
text-shadow: -1px -1px #666, 1px 1px #FFF;
font-family: serif;
}
вдавленный текст
Выпуклый текст
h1 {
background: #999;
color: #999;
text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;
font-family: serif;
}
выпуклый текст
Теперь о грустном — что делать с горячо всеми «любимым» IE?
