Как сделать тень под блоком css
Перейти к содержимому

Как сделать тень под блоком css

  • автор:

CSS тень блока

В чем основное достоинство теней, созданных при помощи CSS3, так это в простоте реализации и уменьшении числа запросов к серверу (поскольку мы больше не используем картинки). Чтобы сделать тень на CSS нам понадобится тег div и CSS свойство box-shadow. Вам не понадобится дополнительная разметка, поскольку мы создим псевдо элементы :after и :before, которые поместим за основным объектом (div с классом block).

Взгляните на HTML код, для которого мы будем создавать CSS3 тень:

 

Содержимое

Далее вы сможете посмотреть готовые примеры и код, необходимый для их реализации. С целью минимизации текста на странице, мы опустим CSS свойства с браузерными префиксами. Полный код можно увилдеть, нажав на соответствующую примеру ссылку «Пример».

Приподнятые уголки

Приподнятые уголки

.block < position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; >.block:before, .block:after < content:""; position:absolute; z-index:-2; bottom:15px; left:10px; width:50%; height:20%; max-width:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); >.block:after

Завитки на уголках

Завитки на уголках

.block < position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; border:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px; >.block:before, .block:after < content:""; position:absolute; z-index:-2; bottom:12px; left:10px; width:50%; height:55%; max-width:200px; box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); transform:skew(-8deg) rotate(-3deg); >.block:after

Перспектива

С помощью тени можно придать блоку перспективу. Смотреть пример.

Перспектива

.block < position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; >.block:before, .block:after < content:""; position:absolute; z-index:-2; >.block:before < left:80px; bottom:5px; width:50%; height:35%; max-width:200px; box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); transform:skew(50deg); transform-origin:0 100%; >.block:after

Приподнятый бокс

CSS тень у проподнятого блока. Смотреть пример.

Приподнятый бокс

.block < position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; >.block:before, .block:after

Один вертикальный изгиб

Пример CSS3 тени для вертикально согнутого блока. Смотреть пример.

Один вертикальный изгиб

.block < position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; >.block:before, .block:after < content:""; position:absolute; z-index:-2; >.block:before < top:10px; bottom:10px; left:0; right:50%; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:10px / 100px; >

Два вертикальных изгиба

Два вертикальных изгиба

.block < position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; >.block:before, .block:after < content:""; position:absolute; z-index:-2; >.block:before < top:10px; bottom:10px; left:0; right:0; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:10px / 100px; >

Один горизонтальный изгиб

Пример CSS3 тени для горизонтально согнутого блока. Смотреть пример.

Один горизонтальный изгиб

.block < position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; >.block:before, .block:after < content:""; position:absolute; z-index:-2; >.block:before < top:50%; bottom:0px; left:10px; right:10px; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:100px / 10px; >

Два горизонтальных изгиба

Два горизонтальных изгиба

.block < position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; >.block:before, .block:after < content:""; position:absolute; z-index:-2; >.block:before < top:0px; bottom:0px; left:10px; right:10px; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:100px / 10px; >

Повернутый блок

CSS3 тень для повернутого блока. Смотреть пример.

Повернутый блок

.block < position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:none; transform:rotate(-3deg); >.block > :first-child:before < content:""; position:absolute; z-index:-1; top:0px; bottom:0; left:0; right:0px; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; >.block:before, .block:after < content:""; position:absolute; z-index:-2; bottom:15px; left:10px; width:50%; height:20%; max-width:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); >.block:after

Популярные статьи

2D игра на Unity. Подробное руководство. Часть 1

  • unity

Адаптивный слайдер без Javascript на CSS3

  • слайдер

Смягчение теней с помощью слоёв в CSS-свойстве box-shadow

Когда свет падает на объект и отбрасывается тень, тень может приобретать множество уникальных характеристик. Первое, что приходит в голову для реализации тени – CSS-свойство box-shadow , но запечатлеть все тонкости реальной тени с его помощью окажется непросто. CSS-свойство box-shadow недостаточно выразительное. По сути, с ним получится размытый силуэт объекта: можно изменять смещение, радиус размытия, распространение, цвет и это – всё. К выражению сложности и нюансов теней в реальной жизни не получится даже приблизиться.

Но не надо унывать, с помощью простой CSS-техники можно немного улучшить ситуацию. Можно получить больше контроля над тем, как визуализируются тени, если использовать многоуровневые тени для блока:

box-shadow
0 6px 6px rgba(0,0,0,0.4);
слоёная box-shadow
постепенное увеличение смещения/размытия

Квадратным и неуклюжим выглядит эффект от box-shadow по умолчанию (первый блок) по сравнению с многослойной тенью (второй блок). Такого эффекта, как у второго блока, можно добиться, если для него сделать несколько описаний (разделяя каждое запятой) и увеличивать смещение и размытие для каждой следующей тени (синтаксис box-shadow – X-смещение Y-смещение размытие цвет):

/* box-shadow по умолчанию */ .box-shadow-default < box-shadow: 0 6px 6px rgba(0,0,0,0.4); >/* Гладкая box-shadow с несколькими слоями теней * с увеличением смещения и размытие для каждой следующей */ .box-shadow-smooth

Этот простой метод наслоения дает больше контроля над рендерингом теней, и с его помощью можно точно настроить резкость, расстояние и распространение. Можно, например, увеличить или уменьшить количество теней, чтобы сделать меньший или больший разброс.

слоёная box-shadow
4 слоя с прозрачностью 15%
слоёная box-shadow
6 слоёв с прозрачностью 11%

Если увеличивать количество слоев, нужно уменьшить значение прозрачности для каждого слоя, чтобы плотность тени оставалась примерно такой же.

.shadow-4 < box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.15); >.shadow-6

Управлять резкостью так же просто, как управлять распространением, при этом можно использовать как значение прозрачности, так и размытие каждого слоя, чтобы изменить концентрацию глубины и радиус размытия тени соответственно.

В приведенных выше примерах используется одно и то же значение прозрачности для всех слоев, но его можно уменьшать или увеличивать с каждым слоем для создания рассеянных или резких теней.

резкая box-shadow
с уменьшением прозрачности
рассеянная box-shadow
с увеличением прозрачности

Для более резкой тени ниже самая внутренняя тень (с наименьшим смещением и размытием) имеет наивысшее значение прозрачности, и оно уменьшается с каждым слоем. И наоборот для рассеянной тени второго блока, где самый внутренний слой имеет самое низкое значение прозрачности:

.shadow-sharp < box-shadow: 0 1px 1px rgba(0,0,0,0.25), 0 2px 2px rgba(0,0,0,0.20), 0 4px 4px rgba(0,0,0,0.15), 0 8px 8px rgba(0,0,0,0.10), 0 16px 16px rgba(0,0,0,0.05); >.shadow-diffuse

Можно смелее увеличивать размытие, чтобы расширить распространение и ещё больше смягчить эффект тени:

Тень ещё мягче
увеличение шага прозрачности

Тень становится ещё мягче с увеличением шага изменения прозрачности:

.shadow-dreamy

Наконец, можно управлять длиной тени.

короткая тень
с меньшим расстоянием
длинная тень
с большим расстоянием

Надо разделить радиус размытия и смещение по оси Y и увеличивать смещение с большим или меньшим шагом:

.shadow-shorter < box-shadow: 0 1px 1px rgba(0,0,0,0.11), 0 2px 2px rgba(0,0,0,0.11), 0 4px 4px rgba(0,0,0,0.11), 0 6px 8px rgba(0,0,0,0.11), 0 8px 16px rgba(0,0,0,0.11); >.shadow-longer

Какую комбинацию всех этих техник использовать, конечно, сильно зависит от контекста, в котором приходится работать, но с многослойными тенями можно, по крайней мере, получить больше возможностей для достижения желаемого внешнего вида блоков с тенью.

Тень для блока

Организовать тень для блока, не используя изображения.

тень для блока без картинок

Немного риторики

В общем-то, тень для блока, практически любой сложности, реализуема картинками. Погуглив можно найти массу решений. Но у данного метода есть ряд существенных недостатков:

  • немерянное количество дополнительных элементов и блоков. Одно дело, когда блок, которому нужно нарисовать тень статичный и совсем другое, когда блок должен быть полностью резиновым. К тому же все больше привыкаешь к «чистому» коду и порой просто пальцы не поднимаются насыпать в него несколько лишних блоков.
  • несколько дополнительных картинок -> дополнительные запросы к серверу -> уменьшение скорости загрузки страницы + дополнительный трафик + дополнительная нагрузка на сервер

После выхода Opera 10.50 на реализацию тени можно посмотреть теперь и со стороны CSS3. А именно, используя box-shadow. Итак.

Решение

Свойство box-shadow в деталях расписывать не буду, скажу лишь, что общий вид правила такой: box-shadow: 0px 0px 10px #000;, где первые два значения — сдвиг тени, третье — радиус размытия и последнее — цвет. В деталях о свойстве читай в нашем справочнике.

Пойдем по порядку и начнем, пожалуй, не с ИЕ 🙂 (кстати, ничего особо плохого, как ни странно, я не имел ввиду). Наш блок:

.mainContainer

«Адекваты»

Google Chrome и Safari работают на движке WebKit, box-shadow в «чистом» виде пока не работает, но экспериментальное свойство -webkit-box-shadow вполне рабочее.

У Firefox похожая ситуация, с версии 3.5 поддерживает это свойство, правда тоже экспериментально с приставкой -moz-.

C Opera ситуация чуть хуже, поскольку только с версии 10.5 она понимает полноценный box-shadow. Думаю, что через некоторое время о версиях оперы ниже 10.5 можно будет не вспоминать, поскольку пользователи довольно активно обновляются (все же не ИЕ). Хотя, по большому счету, это относится ко всем перечисленным выше браузерам.

В итоге добавляем в css:

.mainContainer

Вуаля! Очень даже симпотненькая тенька. Результат.

Племя «Вуду»

Поговорили о прелестях CSS3, вдохнули свежего воздуха и ладушки. Возвращаемся на фронт, нюхать порох и вкушать прелести «Священной войны».

племя IE

Именно! Я о клане туземцев «IE». У них своя культура, и они не признают всякие новшества и диковинки привезенные с «большой земли». Зато они обладают тайными магическими знаниями, а это могучие знания, которые не раз спасали племя от вымирания.

Конечно же речь идет о фильтрах. У ИЕ имеются фильтры shadow и dropShadow. забудем о них, это топор, а не тень. А вот фильтр Blur — в самый раз, на нём и остановимся. Выглядит он вот так:

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="23", MakeShadow="true", ShadowOpacity=".5");

где PixelRadius — радиус размытия, MakeShadow — ставим в true, ShadowOpacity — прозрачность.

Как не печально, но с этого момента придется добавить два блока в наш код, хотя это не догма и зависит от особенностей структуры кода и требований к верстке. Для этого примера усложним задачу — у блока с тенью не будет известна заранее высота. Она будет зависеть от содержания (контента):

 

Результат. В итоге имеем общий контейнер mainContainer, который мы сможем со спокойной совестью позиционировать, и внутри блок content, который, если нужно, будет задавать размеры своему родителю. Ну, и в случае ИЕ — в коде окажется еще один блок — тень.

Нужно заметить, что фильтром Blur можно добиться абсолютной идентичности тени с другими браузерами, конечно, не во всех случаях, но в целом требования дизайна можно выполнить точно.

Преимущества

  • ни одного изображения для тени — быстрей будет грузится страница
  • возможно кроссбраузерно сделать тень как минимум с большой схожестью на дизайн
  • небольшое количество "лишних" элементов в коде
  • на верстку тени уходит в разы меньше времени, нежели верстка картинками
  • не забываем, что CSS тень не влияет на размеры блока, что еще упрощает работу кодера с этим блоком
  • меньше станет багов с анимациями в IE, которые ой как не любят картинок в плавно появляющихся/скрывающихся блоках (ососбенно это касается картинок png-24)

Недостатки

  • не смотря на тот факт, что пользователи активно обновляют "адекватные" браузеры, нельзя 100% гарантировать, что этот способ сработает у всех. По крайней мере еще некоторое время (жаль пользователей Opera 9, но они тени не увидят)
  • хотелось бы обойтись без дополнительных элементов в коде, но, увы, ИЕ нам не даёт покоя
  • наличие фильтра для IE несколько снижает производительность браузера
  • CSS код не пройдет валидацию из-за наличия в коде фильтров и вендорных CSS свойств, но при большом желании и использовании условных комментариев (для фильтров и zoom) и javascript (для динамической установки вендорных свойств) этот недостаток можно устранить

Заметки

На практике могут быть сюрпризы от ИЕ, как ни странно, но мне в недавнем проекте доставил неприятности ИЕ8. А именно отказался накладывать фильтр. Я решил этот момент включением режима совместимости:

Это нужно вставлять в теге самым первым. Но, повотрюсь, это исключение, хотя подозреваю, что сюрпризы могут быть разные. В примерах этой статьи все отработало безупречно, без лишних телодвижений

  • в реальных проектах можно "подчистить" код, путём динамического добавления блоков shadow и content, тем самым избавиться от условного комментария и оставить в коде всего один целевой блок
  • в примере был рассмотрен блок, в котором тень равномерная, а часто встречаются дизайны, где тень смещена в каком-то направлении. Свойство box-shadow позволяет управлять смещением первыми двумя параметрами, а в случае ИЕ нужно будет двигать блок shadow

Update by Ksayri: для IE появилось более элегантное решение — javascript плагин PIE, который способен отрисовать тень средствами VML:

.mainContainer

А для IE6-8 (IE9 будет поддерживать box-shadow) добавляем правило:

.mainContainer < behavior: url(path-to/PIE.htc); >
  • чистый HTML код;
  • отсутствие фильтров, замедляющих работу браузера;
  • простота реализации.
  • CSS приемы
    • «Дергание» сайта
    • background position со смещением
    • clearfix
    • CSS прозрачность
    • CSS хаки
    • RGBA — CSS полупрозрачность
    • Затемнение фона
    • Кроссбраузерный

    • Обнуление отступов
    • Порядок описания ссылок
    • Прелоад изображений
    • Сброс стилей
    • Сокращения в CSS
    • Убираем рамку с эл-ов в фокусе
    • Условные CSS
    • Условные комментарии
    • Поворот вокруг своей оси
    • Поворот объекта вокруг свой
    • Resize для textarea в Safari и Chrome
    • Блочная верстка форм
    • Кастомные checkbox и radio на CSS
    • Кросбраузерные input и textarea
    • Кроссбраузерный button
    • Нестандартные checkbox
    • Нестандартные radio
    • Нестандартные select
    • Нестандартные select multiple
    • Нестандартные поля выбора файла
    • Нестандартные текстовые поля
    • О кроссбраузерности placeholder
    • Отступы у checkbox и radio
    • Оформление input type=search
    • Резиновая кнопка
    • Текст в поле type="password"
    • Блоки равной высоты в строке
    • Колонки равной высоты
    • Прижимаем подвал к низу
    • Ресайз окна: потомок перерос родителя
    • Сайт в центре экрана
    • Фиксированная колонка + резиновая + clear:both
    • CSS 3D лента
    • CSS3 всплывающие подсказки
    • IMG внутри блока — убираем странный отступ
    • IMG: меняем рисунок при наведении
    • Аккордеон на чистом CSS3
    • Валидный target="_blank"
    • Верстка рейтингов
    • Верстка содержания
    • Вставка спецсимволов в генерируемый контент
    • Вставка стрелок
    • Индивидуальные стили для li. Избавляемся от классов.
    • Масштабируемая картинка в резиновой колонке
    • Многоколоночный текст на CSS3
    • Нестандартное подчеркивание
    • Отменяем обтекание текстом картинки
    • Оформление внешних ссылок
    • Оформление изображений по align
    • Оформляем «ol»
    • Правильные анонсы новостей
    • Список определений. Требуем невозможного.
    • Firefox
      • -moz-box-shadow и -moz-border-radius - это кошмар CPU
      • Позиционирование внутри button
      • Ширина input type=file
      • Onload в IE9
      • z-index в IE6-7
      • Баг с текстом при применении Alpha фильтра
      • Масштабирование и PIE
      • Отступы в кнопках в IE6-7
      • Проблемы с em
      • Эмуляция after и before для IE 6-7
      • Эмуляция data:URL для IE6-7 — используем MHTML-включение
      • hasLayout
      • Max-width
      • Min-height
      • Min-width
      • Min-width и max-width одновременно
      • PNG и прозрачность
      • Высота блока 1px
      • Дублирование символов
      • Дырка под футером
      • Как перекрыть select
      • Обрезка контента c отрицательным margin в IE6
      • Отступы плавающих блоков
      • Проблемы с размерами блоков
      • Псевдокласс :first-child
      • Псевдокласс hover в IE 6
      • Селектор потомков >
      • Селекторы атрибутов [type=…]
      • Сестринский селектор
      • Смещение на 1px
      • Ссылки с вложением
      • Устраняем flickering
      • Эмуляция position:fixed
      • overflow-y
      • Не подгружаются шрифты @font-face
      • Проблема с oveflow: hidden
      • Скругление img
      • HTML шаблон для мобильных устройств
      • Выпадающее меню на CSS
      • Выравнивание навигации из блоков по центру
      • Выравнивание навигации по середине
      • Резиновое меню
      • Резиновое меню из блоков
      • Убираем класс для первого элемента
      • Box-sizing: переключаем блочную модель
      • inline-block: простое свойство для непростых задач
      • Вертикальная позиция для строчного элемента
      • Вертикальное выравнивание
      • Выравнивание по центру с position: absolute
      • Вычисляемые отступы
      • Два в одном: позиция + размеры
      • Долой отступы между строчными элементами (и блоками)
      • Обходим схлопывание margin
      • Центрирование картинки в блоке
      • Центрирование резинового блока по горизонтали
      • Активация flash
      • Вставка flash в HTML
      • Вставляем ролик с YouTube
      • Как отключить flash
      • Как перекрыть flash
      • Параметры для вставки объектов
      • Ссылка на flash объекте
      • CSS треугольники
      • Аппаратное ускорение анимации
      • Встраиваем изображения — data:URL
      • Градиент: CSS3 против CSS2 + картинка
      • Лесенка спрайтов — сложный случай поклейки
      • На одну картинку меньше. Спецсимвол ×
      • Необычные тени с CSS3 box-shadow
      • Оптимизация Google Web Fonts
      • Оптимизация фонов с помощью Canvas
      • Проблемы с border-radius
      • Псевдоэлемент before для маркера списка
      • Скругление углов. Обзор методов.
      • Сокращаем HTML5 код
      • Спрайты: меньше картинок — больше скорость
      • Тень для блока
      • Фигуры с углами на CSS
      • Шаблоны градиентов
      • Дополнение Skype
      • Подключить favicon
      • Профилактика сайта: максимально простое оповещение
      • Ссылки на skype
      • @font-face в деталях
      • Cufon — нестандартный шрифт средствами JS
      • font-size: 100.01% для html
      • Безопасные шрифтовые CSS стеки для англоязычных текстов
      • Безопасные шрифтовые CSS стеки для рунета
      • Безопасные шрифты
      • Вертикальный текст
      • Используем псевдоэлемент :first-letter
      • Контур для текста
      • Нестандарный шрифт. Быть ему или нет?
      • Нестандартный шрифт средствами CSS
      • Плавающий :first-letter
      • Подмена текста изображением
      • Соответствия шрифтов Windows, Mac и Unix/Linux
      • Строчный :first-letter
      • Текст под углом
      • Текст с CSS градиентом
      • Тень для текста
      • Эффект отражения

      Как сделать красивую тень для блока (элемента) с помощью CSS. (8 примеров)

      Здравствуйте, дорогие читатели блога. Сегодня мы с Вами будем делать красивую тень для блоков при помощи CSS. Я думаю, что это очень сильно пригодится Вам, тем более если Вы делаете шаблоны. А блоки с тенью смотрятся очень привлекательно и современно.

      Посмотреть пример

      Тень блока с CSS

      Данные блоки мы будем делать только при помощи CSS. Соответственно никаких изображений, только стили.

      В частности мы будем использовать тег box-shadow. Так же можно будет задать любой цвет для тени, размер, смещение, или же использовать его для других элементов, главное экспериментировать. Но в данном случае это будут блоки.

      Поддержка браузеров

      В основном все современные браузеры поддерживают эффекты тени:

      • Internet Explorer 9.0 и выше;
      • Firefox 3.5 и выше;
      • Chrome 1 и выше;
      • Safari 3 и выше;
      • Opera 10.5 и выше.

      Ещё хотелось бы упомянуть один не маловажный момент: для некоторых браузеров мы будем использовать некие префиксы. Для Firefox используется -moz-, для Chrome и Safari нужно использовать префикс -webkit.

      Ну а сейчас переходим к самой интересной части. Давайте рассмотрим все эффекты тени по отдельности, эффектов будет 8.

      Эффект тени 1

      В данном примере тень от блока находится снизу.

      HTML

       
      &amp;lt;div effect1"&amp;gt; &amp;lt;h3&amp;gt;Эффект 1&amp;lt;/h3&amp;gt; &amp;lt;/div&amp;gt;

      CSS

      text-align:center; position:relative; top:80px; > .box < width:70%; height:200px; background:#FFF; margin:40px auto; >/*================================================== * Effect 1 * ===============================================*/ .effect1

      Эффект тени 2

      HTML

       
      &amp;lt;div effect2"&amp;gt; &amp;lt;h3&amp;gt;Эффект 2&amp;lt;/h3&amp;gt; &amp;lt;/div&amp;gt;

      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

      Эффект тени 3

      Здесь тень от блока только слева.

      HTML

       
      &amp;lt;div effect3"&amp;gt; &amp;lt;h3&amp;gt;Эффект 3&amp;lt;/h3&amp;gt; &amp;lt;/div&amp;gt;

      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

      Эффект тени 4

      HTML

       
      &amp;lt;div effect4"&amp;gt; &amp;lt;h3&amp;gt;Эффект 4&amp;lt;/h3&amp;gt; &amp;lt;/div&amp;gt;

      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

      Эффект тени 5

      В данном случае тень с двух сторон сильнее сдвинулась вниз.

      HTML

       
      &amp;lt;div effect5"&amp;gt; &amp;lt;h3&amp;gt;Эффект 5&amp;lt;/h3&amp;gt; &amp;lt;/div&amp;gt;

      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

      Эффект тени 6

      Здесь эффект изогнутых теней на дне блока.

      HTML

       
      &amp;lt;div effect6"&amp;gt; &amp;lt;h3&amp;gt;Эффект 6&amp;lt;/h3&amp;gt; &amp;lt;/div&amp;gt;

      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

      Эффект тени 7

      Такой же эффект только тень снизу и сверху блока.

      HTML

       
      &amp;lt;div effect7"&amp;gt; &amp;lt;h3&amp;gt;Эффект 7&amp;lt;/h3&amp;gt; &amp;lt;/div&amp;gt;

      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

      Эффект тени 8

      Эффект изогнутых теней по бокам блока.

      HTML

       
      &amp;lt;div effect8"&amp;gt; &amp;lt;h3&amp;gt;Эффект 8&amp;lt;/h3&amp;gt; &amp;lt;/div&amp;gt;

      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

      Пример

      Обязательно посмотрите живой пример

      Посмотреть пример

      Вот и всё дорогие друзья. Если Вам что либо будет не понятно, обязательно спрашивайте в комментариях. До скорой встречи.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *