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

Разместил / Просмотров: 100 146 / комментариев 45

Здравствуйте, дорогие читатели блога. Сегодня мы с Вами будем делать красивую тень для блоков при помощи 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

<div class="box effect1">
	<h3>Эффект 1</h3>
</div>

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

<div class="box effect2">
	<h3>Эффект 2</h3>
</div>

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

<div class="box effect3">
	<h3>Эффект 3</h3>
</div>

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

<div class="box effect4">
	<h3>Эффект 4</h3>
</div>

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

<div class="box effect5">
	<h3>Эффект 5</h3>
</div>

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

<div class="box effect6">
	<h3>Эффект 6</h3>
</div>

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

<div class="box effect7">
	<h3>Эффект 7</h3>
</div>

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

<div class="box effect8">
	<h3>Эффект 8</h3>
</div>

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);
}

Пример

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

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

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

Огромное спасибо www.paulund.co.uk

  • Скажите пожалуйста, почему блог прижат сильно к тексту? Как сделать чтобы он не прилагал так сильно по бокам?

  • Александр, отступы выставляются внутри объекта с помощью padding, а снаружи с помощью margin в стилях

  • Спасибо) Разобрался)

  • Скажие пожауйста, а как селать чтбы оно автоматически растягивалось по высоте?

  • Александр, во всех примерах стоит класс .box, в этом классе стоит высота по умолчанию height:200px;. Для того чтобы высота выравнивалась автоматически удалите height:200px и поставьте например внутренний отступ, отступы делаются с помощью padding

  • Проблема возникла с z-index: -1;
    Если у блока с тенью такой параметр, то тени не видно. Если меняю значение на 0, то тень видно и она накладывается поверх блока, т.е. видно весь бокс с тенью — не эстетично и некрасиво, помогите, как подложить эту тень под блок и чтобы было ее видно?

  • Денис в каком браузере смотрите примеры? У меня в примере стоит такой же код как и в посте. И всё работает.

  • В любом браузере: Опера, Хром, Эксплорер. Можете кликнуть на мое имя и перейти на мой сайт. Данный эффект я применил к самому верхнему меню, с черным бэкграундом. Используется «Эффект6», у меня этот класс назван «shadow_new»

  • Денис, что я на Вашем сайте не могу найти эту тень.

  • Самое верхнее меню, где поиск, типа логотип и т.д. Т.е. header
    В нем есть такой блок
    Вот он то тень и не дает…

  • Фильтрует теги ваш сайт :)
    span блок с классом «header_new_back shadow_new»

  • Денис, во первых Ваше меню тёмное, возможно тень просто и не видно.

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

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

  • Ну в верстке то я разбираюсь… Тень видно, когда ставишь z-inex: 0, естественно, это переводит ее на передний план, и тогда видно всю тень, как она накладывается на блок — это не хорошо. Я уже писал об этом выше.

    С классами я уже все перепробовал, дело в том, что в примере, используется всего один div, а когда сама страница состоит из слоев, то параметр -1 уводит тень под все слои сразу, вот в чем проблема. Как это обойти я не знаю… Поэтому и обратился сюда.

  • Денис, а здесь на сайте в примере у Вас нормально всё отображается? Ну те блоки, которые я делал.

  • Конечно, тут все нормально…

  • Тогда, скорее всего, классы конфликтуют. Я бы посоветовал, попробовать сделать такой блок с тенью, а потом на него ставить само меню. И там станет ясно в чём проблема. Опять же повторюсь, что здесь где то конфликтуют классы.

  • Ладно, спасибо за поддержку. Доверстаю новый дизайн и уже на нем, с новыми силами, возьмусь за тень хD

  • Павел

    Не получилось ничего с тенью. А так красиво задумано. Хотел поставить тень на страницу с последними комментариями. Для каждого блока с комментарием. Но ничего не вышло. Ставлю тень именно на класс блока самого. Она не хочет никак под блок залазить. Как я только не выставлял z-index. Тень если и зализиет, то только под сам фон самого сайта. Под блок с комментариями, ну никак.
    У самого блока выставлял z-index, дабы поднять его на верхний уровень, а тень спрятать под низ. И нифига не получилось. буду конечно еще возиться. Но вчера провозился 2 часа. Так и ничего. И еще, тень почему то не ползет вместе с блоком. То есть все блоки с комментариями, разные. В одном блоке короткий комментарий, в другом длинный. И чем длиннее комментарий, тем естественно шире рамка блока. А тень стоит на одном месте, и не ползет расширением блока.

  • Павел, тут скорее всего Вам нужно поставить position: relative; для самого фона сайта, а потом уже пробовать подставлять z-index

  • Саня

    тоже такая же беда, у меня тень пропадает, когда ставлю фоновым div’ам заливку. если ставить заливку только для body, тени рисует нормально

  • Владимир

    таже беда что и у дениса, у меня у тэга body фон залит текстурой (т.е. маленкой картингой) а не светом, если залить просто светом а текстуру убрать тень видно если, ставишь обратно текстуру тень проподает цвет у текстуры такой же как и у заливки цветом фон. ваш совет «Вам нужно поставить position: relative; для самого фона сайта, а потом уже пробовать подставлять z-index» не помогает проблема пока не решена и как ее решить пока тоже незнаю может предложите еще варианты.

  • Владимир, у меня в примере, тоже фон залитый текстурой (картинкой) и всё работает. В любом случае, что за проблема сказать не смогу, нужно смотреть код и разбираться.

  • Владимир

    И вот еще что я вижу ваш блог сделан на wordpress так вот вы можете сами попробывать сами я пытаюсь поставить такую тень на контент если у вас получится то пожалуйста напишите как вы сделали а лучше покажите часть кода css который относится к тени ( и не забудьте что у тега body background залит текстурой )

  • Яков

    Та же беда с z-index:-1;, что и у Дениса. Не могу поместить .effect4:after между слоем .box и подложкой.
    Либо он на самом верху, либо в самом низу. Никто не нашел решение?

  • Яков, это может быть из за того, что к блокам на сайте ещё тоже задан z-index:

  • Яков

    Нет, Александр, не в этом дело.. Я уже с бубном танцую часа три с перерывами.. нет там других z-index.. скорее дело в наследовании. Или позиционировании. Уже всем родительским слоям задал position: relative;. никак не пойму в чем дело, а фишка оч понравилась.
    Если не трудно, гляньте: мож увидите, где туплю? http://www.yakoffka.ru/index.php?page=tpl/recommendation

  • Яков

    Вы натолкнули на решение!
    Окромя position: relative; для родителей присваиваем им z-index:-1;.
    В лисе 17.0.1, опере 12.11 работает

  • Яков

    Чувствую, что решение корявое, но работает еще и в Яндекс.Хром и в Сафари 5.0.5.
    Отпишитесь, кто придумает решение поизящнее.

  • Яков, спасибо, что нашли решение. Но почему оно корявое? Кстати на разных сайта, данная тень по разному встают, всё дело в вёрстке.

  • Яков

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

  • Яков

    в opencart вставил. И опять загвоздка: прямоугольник слоя у меня больше вытянут по вертикали. нельзя-ли как-нибудь так сделать, штоп еще одну тень присовокупить (еще один :after, но повернутый на другой угол)?
    слабоват я в css..
    ЗЫ для более наглядной регулировки тени задаем .box z-index: 2;

  • Яков

    Спасибо, уже решил добавлением еще одного слоя.

  • Яков, рад был помочь, хотя и ничем не помог :-)

  • Вадим Волос

    WP 3.7.1 при вставке в html все равно режет код
    подскажите пожалуйста как отключить или плагин который отключает обрезку кода.
    Спасибо!

  • Вадим, не совсем понял о чём Вы?

  • Вадим Волос

    вордпрес режет код в статье
    и из за этого не срабатвает

  • Вадим Волос

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

  • Попробуйте не через редактор, напрямую. По поводу теней, это же не я их делал :)

  • Али

    здравствуйте Александр! хотел спросить у Вас а как сделать тень у картинки?которая является фоновым изображением для блока

  • Здравствуйте, Али. Задайте желаемый класс картинке в CSS. И добавьте к этому классу нужные правила тени.

  • Ali

    здравствуйте Александр, я вижу в примерах в перемешку идет css2 и css3 т.е их можно мешать?

  • Ali

    еще хотел спросить, можно ли для одних элементов писать свойства на css2 а для других на css3 ?

  • Конечно же можно, браузер их все поддерживает.

  • artem

    может кому и интерестно нашел сервер
    с беспланым хостингом
    php . mysql . ftp . 2000mb выделено под сайт
    свой emal , Никакой рекламы и баннеров , Авто-Установщик (Joomla, phpBB и др.)
    правда домен 3 уровня но это если бесплатно но это идеал и стого что нашел.

    http://api.hostinger.ru/redir/2273415

  • Оленька Тэн

    Вот ссылка с Онлайн Генератором теней Box Shadow — http://greempage.ru/css-border-radius

    oчень помог в свое время.