Как сделать в css внутреннюю тень блоку

Приветствую вас. Сегодня я хотел бы рассказать о внутренней тени и как ее сделать с помощью css. Вообще тени позволяют придать блоку абсолютно другой вид, если правильно ими пользоваться.

Обычная и внутренняя тень средствами css3

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

Давайте сейчас зададим тень для какого-нибудь блока и разберемся с синтаксисом свойства. Я взял блок, который мы получили в статье про скругление углов. Стили записаны так, как будто блок имеет идентификатор block.

#Block{
	Box-shadow: 10px 5px 5px 0 red;
}

тень1
Как видно, мы через пробел перечислили пять значений:

  • 10px – смещение тени по горизонтали
  • 5px – смещение по вертикали
  • 5px – размытие тени
  • 0 – растяжение (то, насколько тень будет больше в размерах, чем сам блок)
  • Red – цвет

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

#block{
	Box-shadow: 10px 5px red;
}

И все будет работать. Только размытие не применится.тень2

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

#Block{
	Box-shadow: inset 10px 5px 5px 0 red;
}

внутреняя тень
Смещение в одном и во втором случаях происходит от одного и того же места – от краев элемента, но в случае с внутренней тенью это смещение идет внутрь, а не за элемент, занимая дополнительное место.

Преимущество внутренней тени

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

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

Подробнее о значениях

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

А вот смещение можно указать и отрицательное. При положительном значении тень по горизонтали смещается слева направо, а по вертикали – сверху вниз. Если вам нужно изменить направление, всего лишь поставьте минус перед значением.

Множественные тени

CSS3 дает возможность задавать блоку множественные как обычные, так и внутренние тени. Тройную внутреннюю тень красного, зеленого и синего цвета можно задать так:

box-shadow: inset 30px 0 5px 0 red, inset 60px 0 5px 0 green, inset 90px 0 5px 0 blue;

тройная внутреняя тень
Это просто пример, от которого вы можете отталкиваться при составлении своего оформления. Просто ставьте запятую и не забывайте указывать слово inset, если вам нужна внутренняя тень.

Итог

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

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