CSS тень с помощью box-shadow

CSS тень с помощью box-shadowЗдравствуйте. Сегодня я продолжу обзор новинок из стана CSS3.

Мы уже рассмотрели: css блоки со скругленными краями и text-shadow.

Сегодня очередь CSS тени под названием: box-shadow.

Его функциональность близка к text-shadow, но охватывает больше объектов для возможных операций.

С вашего позволения я буду рассказывать в похожем стиле, как и о text-shadow.

Стандартный синтаксис css тени: box-shadow

Положительные значения css тени

1
{box-shadow: 3px 4px 2px #000}
  • 3px – это смещение тени по горизонтали (вправо на 3px);
  • 4px – это смещение тени по вертикали (вниз на 4px);
  • 2px – это растушевка тени (чем больше пикселей, тем более размытая тень);
  • #000 – это собственно цвет тени (черный цвет);

Пример: Синий квадрат на белом фоне и черная тень

HTML:

1
<div class="prov"></div>

Стили:

1
2
3
4
5
6
.prov{
width:50px;
height:50px;
background:blue;
box-shadow:6px 6px 2px #000;
}

Результат:

CSS тень с помощью box-shadow

Отрицательные значения css тени

1
{box-shadow: -3px -4px 2px #000}
  • -3px – это смещение тени по горизонтали (влево на 3px);
  • -4px – это смещение тени по вертикали (вверх на 4px);
  • 2px – это растушевка тени (чем больше пикселей, тем более размытая тень);
  • #000 – это собственно цвет тени (черный цвет);

Пример: Синий квадрат на белом фоне и черная тень

HTML:

1
<div class="prov"></div>

Стили:

1
2
3
4
5
6
.prov{
width:50px;
height:50px;
background:blue;
box-shadow:-6px -6px 2px #000;
}

Результат:

CSS тень с помощью box-shadow

Внутренняя тень

Для того, что бы тень уходила внутрь нужно добавить команду inset

HTML:

1
<div class="prov"></div>

Стили:

1
2
3
4
5
6
.prov{
width:50px;
height:50px;
background:blue;
box-shadow:inset 6px 6px 2px #000;
}

Результат:

CSS тень с помощью box-shadow

Расширенный стандартный синтаксис box-shadow

1
{box-shadow: 3px 4px 2px 5px #000}
  • 3px – это смещение тени по горизонтали (влево на 3px);
  • 4px – это смещение тени по вертикали (вниз на 4px);
  • 2px – это растушевка тени (чем больше пикселей, тем более размытая тень);
  • 5px — радиус действия тени;
  • #000 – это собственно цвет тени (черный цвет);

Что понять, что такое «радиус действия тени» и где его можно применить посмотрите на примеры:

Пример: Синий квадрат на белом фоне и черная тень

HTML:

Стили:

.prov{
width:50px;
height:50px;
background:blue;
box-shadow:{6px 6px 2px 8px #000;}

Результат:

CSS тень с помощью box-shadow

Пример не слишком нагляден. Даже сбивает с толку. Смотрим на другой:

HTML:

1
<div class="prov"></div>

Стили:

1
2
3
4
5
6
.prov{
width:50px;
height:50px;
background: blue;
box-shadow:{0 0 2px 8px #000;
}

Результат:

CSS тень с помощью box-shadow

Как видим у нас получилось эффект обводки. Чем больше значения, тем сильнее тень расширяется во все стороны.

Один объект и несколько css теней от box-shadow

box-shadow поддерживает множественные тени.

Располагаются они следующим образом: первая по списку тень первая и к объекту, а вторая по списку уже будет за первой и так далее …

Давайте лучше посмотрим на примере:

Пример: синий квадрат, первая тень черная, вторая тень красная

HTML:

1
<div class="prov"></div>

Стили:

1
2
3
4
5
6
.prov{
width:50px;
height:50px;
background: blue;
box-shadow:{0 0 2px 8px #000, 0 0 2px 16px #F00
}

Результат:

CSS тень с помощью box-shadow

Обязательные и необязательные параметры box-shadow

В box-shadow обязательны только два параметра:

1
box-shadow {inset 1 2 3 4 #5}

Обязательные:

  • 1 — сдвиг по горизонтали;
  • 2 — сдвиг по вертикали;

Не обязательные:

  • inset — направление тени внутырь;
  • 3 – растушевка тени (если не указана, то тень максимально жесткая как при 0px);
  • 4 — радиус действия тени(если не указано тень не расширяется);
  • 5 – цвет тени (если не указана, берется цвет текста);

На этом закончу. Удачи!!!

С уважением Тригуба Сергей!

Интересное — девка гонит

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

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев27 комментариев

IE — это 50%+ аудитории )=

Всё было бы отлично, не будь оно так печально. Я, в принципе, не особо понимаю, почему такой процент большой =\

Алексей
2

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

С уважением, Алексей.

RE:"Так и быть, все для читателей." — скопировать защищенный контент нет проблем. Достаточно сохранить страницу на винчестер и удалить скрипт защиты из HTMLки. Так что защищать бесполезно. «На всякую хитрую п*пу есть пи*ка винтом...»

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

Спасибо, пригодилась фишка, очень здорово

5

Спасибо. просто, бысто и доступно для понимания новичкам типа меня)))

внуТРЬ

И форма добавления комментария слепая какая-то

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет