Пояснения:
, — свойства языка CSS, используются для создания теней. , , — параметры свойства теней. , , , — свойства CSS, отвечают за изменение размеров и местоположения элементов. - — тег, отвечает за создание ссылок.
- Селекторы — своего рода ссылки, с помощью которых CSS определяет к каким именно элементам нужно применять те или иные стили.
- Hover — селектор состояния.
— свойство анимированного изменения объекта.
Тени нередко используются для получения эффекта объемности. Они позволяют придать текстам и блокам уникальный стиль, а в сочетании с особыми шрифтами, может получиться отличный эффект.
CSS предлагает нам столько пространства для фантазии и экспериментов, что вам потребуются годы для того, чтобы опробовать их все.
В этой статье мы подробно опишем создание теней в CSS. Кроме обычных внешних теней, мы покажем как создавать внутренние тени и тени состояния.
CSS — тень блока. Свойство box-shadow
html{
background: #fff;
}
body{
width: 80%;
margin: 0 auto;
background-color: rgba(150,60,60,0.54)
box-shadow: -1px 5px 5px 5px rgba(77,63,63,0.88)
}
Инструмент позволяет нам создать одну или несколько теней вокруг блока, с любым цветом.
По сути, что такое тень? Это точная копия площади элемента, которая имеет определенный цвет и расположение. Эти параметры можно задавать с помощью свойства box-shadow.
Свойства тени используются в таком порядке:
- Перемещение по горизонтали.
- Перемещение по вертикали.
- Уровень расплывчатости.
- Растяжение.
- Цвет тени.
Именно в таком порядке нужно указывать параметры тени. Главное, не перепутать значение, так как первые 4 задаются одинаково, с помощью числовых значений —
Первый параметр, которое называется
Отрицательные значения смещают тень влево, а положительные — вправо. Значение параметра может быть равно 0 при размытии теней по вертикальной оси.
Далее по порядку идет свойство
Параметру может быть присвоено значение 0. Обычно используется при горизонтальном размытии теней.
Внимание! Советуем указывать значение в пикселях. Можете использовать и другие значения — ,
3 значение —
Заданное значение определяет радиус, по которому будет размываться тень. Отрицательные значения не указываются.
Здесь можно использовать и более крупные величины. Сильное размытие поможет создать красочный эффект, но лишь в некоторых ситуациях.
Предпоследнее значение, которое отвечает за растяжение тени. Оно также является необязательным, но может повысить красочность вашей тени.
Расширение происходит за счет растяжения центральной сплошной части тени, которая находится между размытыми краями.
Данный параметр принимает любые значения, как положительные, так и отрицательные. Положительные значения растягивают тень, а отрицательные наоборот, уменьшают.
И последний параметр —
Для изменения цвета подойдет любая цветовая система — , а также стандартные цвета.
Внимание! Если вы хотите чтобы свойство работало в Safari, то этот параметр должен быть указан, даже если вы используете стандартный черный цвет.
Внутренняя тень — CSS
html{
background: #fff;
}
body{
width: 80%;
margin: 0 auto;
background-color: rgba(150,60,60,0.54)
box-shadow: -1px 5px 5px 5px rgba(77,63,63,0.88) inset;
}
Итак, давайте рассмотрим первый пример применения теней. Здесь мы будем рассматривать создание внутренней тени для блока body.
Для начала откройте наш HTML документ и заполните его. Можете не указывать никакие теги, не заполнять контент, главное создайте тег
.Открываем наш CSS документ, записываем тег
, он будет нашим основным селектором.Далее открываем фигурные скобки и записываем свойство
Теперь самое главное. Для того, чтобы создать внутреннюю тень блока в CSS нужно прописать значение inset. Можете указать его сразу после определения цвета.
В итоге, у нас получился вот такой блок:
HTML/CSS — тень текста
html{
background: #fff;
}
body{
width: 80%;
margin: 0 auto;
background-color: rgba(150,60,60,0.54)
box-shadow: -1px 5px 5px 5px rgba(77,63,63,0.88) inset;
}
div{
margin: 150px;
box-shadow: -1px 5px 5px 5px rgba(77,63,63,0.88);
font-size: 25px;
}
Создается похожим образом, но вместо box-shadow используется свойство
- Сдвиг по горизонтали.
- Сдвиг по вертикали.
- Радиус размытия. Необязательно.
- Цвет.
Как видите, в этом свойстве нет параметра растяжения. Размер тени всегда будет идентичен размеру текста, исправить это не получится.
Очень удобно накладывать тени друг на друга. Для этого нужно перечислить несколько групп параметров
Первая тень будет располагаться ближе к тексту, а вторая выше её. Напоминает работу со свойствами outline и border, но здесь можно создавать и 2, 3 и больше теней.
Тени при наведении — CSS
Теперь давайте рассмотрим создание теней для определенного состояния. В нашем примере будет использоваться кнопка.
Для того, чтобы создать тень для кнопки, её для начала нужно разместить. Открываем тег a, записываем для него класс button и любое текстовое значение, для лучшего отображения.
Сначала зададим размещение, с помощью свойства margin и увеличим кнопку до определенных размеров. Для увеличения можно использовать свойства width и height, либо же воспользоваться свойством padding.
Теперь задаем цвет фона, текста и рамку. Наша кнопка готова, приступаем к созданию тени.
Сначала создадим обычную тень, небольшого размера, с помощью box-shadow. Она будет видна по умолчанию, без наведения на кнопку.
Сделаем самый простой эффект — увеличим тень. Можете сделать её размытой или изменить растяжение — по вкусу.
Для лучшего эффекта зададим свойство transition для обычной ссылки, поставим время в 0.5s.
Теперь у нас есть отличная кнопка с красивой тенью, которая при наведении будет плавно расширяться.
Заключение
В этой статье мы ознакомились со всеми основными способами создания теней. Мы разобрали все свойства и параметры теней.
Все элементы, которые были представлены на скриншотах вы сможете найти в папке с исходниками. Если хотите, можете самостоятельно изучить их и поэкспериментировать со значениями. Может быть у вас получится намного лучше, чем это сделали мы.
Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.
Для добавления тени используется свойство box-shadow , у которого имеется шесть значений, из них только два являются обязательными. На рис. 1 показано свойство box-shadow со всеми возможными значениями, они пронумерованы для их идентификации.
Рис. 1. Значения свойства box-shadow
- ключевое слово inset устанавливает тень внутри элемента;
- сдвиг тени по горизонтали (5px - вправо, -5px - влево);
- сдвиг по вертикали (5px - вниз, -5px - вверх);
- радиус размытия тени (0 - резкая тень);
- растяжение тени (5px - растяжение, -5px - сжатие);
- цвет тени.
Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета.
За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. В табл. 1 представлен код и результат, к которому он приводит.
| Код | Результат | Описание |
|---|---|---|
| box-shadow: 5px 5px; | Резкая тень справа и снизу. | |
| box-shadow: -5px -5px; | Резкая тень слева и сверху. | |
| box-shadow: 0 0 5px; | Размытая тень вокруг элемента. | |
| box-shadow: 0 0 5px 2px; | Расширение тени на 2 пиксела. | |
| box-shadow: 0 0 5px 2px red; | Красное свечение вокруг элемента. | |
| box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5); | Полупрозрачная тень. | |
| box-shadow: inset 0 0 6px; | Тень внутри. |
Как видно из таблицы, сдвиг тени не обязательно задавать в пикселах, хотя это и удобно. Цвет тени можно указывать в любом доступном формате, так, для получения полупрозрачной тени подойдёт формат RGBA, такая тень будет хорошо смотреться на любом фоне. В примере 1 показано, как это сделать.
Пример 1. Тень на фоновом рисунке
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Не идти против знамён противника, когда они в полном порядке; не нападать на стан противника, когда он неприступен; это и есть управление изменениями.
Сунь-цзы, пер. Николай Конрад
Результат данного примера показан на рис. 2. Тень повторяет скругление уголков блока.
Рис. 2. Вид тени на фоновом рисунке
При добавлении «широкой» тени следует учесть, что она может выйти за пределы видимого окна браузера и привести таким образом к появлению горизонтальной полосы прокрутки.
Тень также можно добавлять и к псевдоэлементам, это иногда требуется для сложной вёрстки. На рис. 3 показан блок с заголовком, к которому добавлена тень. Чтобы не было никаких линий в месте стыка приходится использовать псевдоэлемент ::after и добавлять тень к нему.
Рис. 3. Блок с тенью
В примере 2 показано создание такого блока.
Пример 2. Блок с тенью
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Заголовок
Тень у элемента может быть не одна, а сразу несколько, их параметры перечисляются через запятую в значении свойства box-shadow . В примере 3 показано добавление двойной тени ко всем изображениям.
Пример 2. Блок с тенью
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 4.
Рис. 4. Изображение с двойной тенью
Первая тень отображается слева от рисунка с радиусом размытия 20px, её размер уменьшен за счёт четвёртого параметра (-20px). Параметры второй тени указываются после запятой, тень отображается справа от рисунка и так же уменьшена для симметрии.
С появлением стандарта 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.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Если Вы хотите расширить поддержку некоторых браузеров, включая мобильныx IOS 3.2 - 4.3 и Android 2.1 - 3 , то рекомендуется использовать префиксы производителей и использовать следующий синтаксис (в примерах статьи будет использован синтаксис только для современных браузеров):
-webkit-box-shadow : значение ; /* Safari 3.1 - 4, IOS 3.2 - 4.3 и Android 2.1 - 3 */ -moz-box-shadow : значение ; /* Firefox 3.5 - 3.6 */ box-shadow : значение ; /* таблица выше */Перейдем к практике и начнем с простого примера, в котором добавим по одной тени к элементам:
Реэультат нашего примера:
Использование множественных теней
В следующем примере предлагаю рассмотреть интересный эффект смешивания цветов, который можно получить при использовании множественных теней:
- Два блока фиксированной ширины и высоты (15em и 10em ), добавили внешние отступы для всех сторон (2em ) и установили, что блоки являются блочно-строчными для возможности выстроить их в линейку.
- Для первого блока с классом .test мы указали четыре тени с различными значениями горизонтальной и вертикальной тени для того, чтобы различные тени элемента были со всех сторон. Радиус размытия для всех теней установили один. Цвет каждой тени различен и задан с использованием предопределенных цветов .
- Для второго блока с классом .test2 мы указали четыре тени с различными значениями горизонтальной и вертикальной тени. Радиус размытия для всех теней установили один, при этом растяжение тени указали отрицательным, что привело к уменьшению самой тени. Цвет каждой тени различен и указан с использованием системы RGBA.
Реэультат нашего примера:
Использование теней для изображений
Заключительный пример этой статьи будет посвящен использованию теней для изображений. Сразу хочу обратить Ваше внимание на то, что напрямую указать тень для HTML элемента не получится, но у нас есть возможность указать изображение как фон для интересующего нас элемента, и уже этому элементу задать необходимую нам тень.
Работу с фоновыми изображениями мы подробно рассмотрим в статье учебника " ", а сейчас, чтобы поставить точку в изучении использования теней, поверхностно её затронем, и используем изображение в качестве фона к элементу в следующем примере:
- Два блока фиксированной ширины и высоты (237px и 232px ), добавили внешние отступы для всех сторон (2em ) и установили, что блоки являются блочно-строчными для возможности выстроить их в линейку. Размер блока 237px на 232px мы установили под размер изображения, чтобы на данном этапе обучения не приходилось масштабировать изображение под элемент и затрагивать те свойства CSS, которые планируются к изучению на более позднем этапе (в статье учебника " ").
- Для первого блока с классом .test мы указали нулевое значение горизонтальной и вертикальной тени, но при этом радиус размытия мы указали 50px и расширили ее, задав радиус растяжения 10px . Цвет тени указали предопределенным цветом (violet ). Кроме того мы указали в объявлении ключевое слово inset , благодаря чему тень падает внутрь элемента. Другими словами мы создали внутреннюю тень элемента.
- Для второго блока с классом .test2 мы указали нулевое значение горизонтальной и вертикальной тени, но при этом радиус размытия мы указали 50px и расширили ее, задав радиус растяжения 10px . Цвет тени указан в режиме RGBA.
Реэультат нашего примера:
Рис. 98 Пример использования теней для изображений в CSS (свойство box-shadow)
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
2016-2020 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу сайт@gmail.com
Типографика является самой любимой игрушкой веб дизайнеров. CSS имеет в своем составе один очень интересный инструмент - text-shadow (тень текста), который на первый взгляд кажется достаточно простым, но с его помощью можно создать запоминающиеся эффекты, если подключить изобретательность и воображение.
Основы использования теней
Свойство 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 вы можете просто использовать белый или черный цвета и увеличить их прозрачность, чтобы добиться нужного оттенка фона при смешении красок.
С помощью свойства 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); }
Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.
Text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
Настоящее веселье начинается, когда вы отринете прочь ограничение наличия только одной тени. Используя запятую для разделения определений вы можете использовать столько теней, сколько нужно!
Text-shadow: shadow1, shadow2, shadow3;
Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.
Text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Смещение вниз на большое расстояние
Как только вы освоите использование нескольких теней, результат будет все более и более выразительным. Очень просто создать 3D эффект для текста.
В примере используется четыре тени, все смещены вниз на разные дистанции и размыты.
Text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1);
Смещение вниз на небольшое расстояние и сильное размытие
Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.
Text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
3D текст от Mark Dotto
Эффект используется на сайте MarkDotto.com . В нем используется 12 различных теней для создания отличного эффекта 3D.
Text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Вдавленный текст от Gordon Hall
Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.
Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.
Background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
Свечение
Text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
Text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Множественные источники света
Text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);
Color: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
Заключение
Как и большинство эффектов CSS, тени очень легко реализовать. Но сочетание простых действий могут в результате привести к поразительным эффектам.
Здравствуйте, дорогие читатели . Сегодня мы с Вами будем делать красивую тень для блоков при помощи CSS . Я думаю, что это очень сильно пригодится Вам, тем более если Вы делаете шаблоны. А блоки с тенью смотрятся очень привлекательно и современно.
Поддержка браузеров
В основном все современные браузеры поддерживают эффекты тени:
- Internet Explorer 9.0 и выше;
- Firefox 3.5 и выше;
- Chrome 1 и выше;
- Safari 3 и выше;
- Opera 10.5 и выше.
Ещё хотелось бы упомянуть один не маловажный момент: для некоторых браузеров мы будем использовать некие префиксы. Для Firefox используется -moz- , для Chrome и Safari нужно использовать префикс -webkit.
Ну а сейчас переходим к самой интересной части. Давайте рассмотрим все тени по отдельности, эффектов будет 8.
Эффект тени 1
В данном примере тень от блока находится снизу.
HTML
Эффект 1
CSS
text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 1 * ===============================================*/ .effect1{ -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; }Эффект тени 2
В этом примере тень от блока идёт слева и справа, а по середине её нет. Получается очень интересный эффект.
HTML
Эффект 2
CSS
.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 2 * ===============================================*/ .effect2 { position: relative; } .effect2:before, .effect2:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .effect2:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; }Эффект тени 3
Здесь тень от блока только слева.
HTML
Эффект 3
CSS
.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 3 * ===============================================*/ .effect3 { position: relative; } .effect3:before { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); }Эффект тени 4
Тень справа.
HTML
Эффект 4
CSS
.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 4 * ===============================================*/ .effect4 { position: relative; } .effect4:after { z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); }Эффект тени 5
В данном случае тень с двух сторон сильнее сдвинулась вниз.
HTML
Эффект 5
CSS
.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 5 * ===============================================*/ .effect5 { position: relative; } .effect5:before, .effect5:after { z-index: -1; position: absolute; content: ""; bottom: 25px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); } .effect5:after { -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); right: 10px; left: auto; }Эффект тени 6
Здесь эффект изогнутых теней на дне блока.
HTML
Эффект 6
CSS
.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 6 * ===============================================*/ .effect6 { 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; } .effect6:before, .effect6: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:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .effect6: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); }Эффект тени 7
Такой же эффект только тень снизу и сверху блока.
HTML
Эффект 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); }Эффект тени 8
Эффект изогнутых теней по бокам блока.
HTML
Эффект 8
CSS
.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 8 * ===============================================*/ .effect8 { 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; } .effect8:before, .effect8: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:10px; bottom:10px; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .effect8: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); }Вот и всё дорогие друзья. Если Вам что либо будет не понятно, обязательно спрашивайте в комментариях. До скорой встречи.