6:32
Автор: Рубрика: CSS-рецепты Комментариев нет

Как сделать в 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;
}

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

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

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

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

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

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

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

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

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

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

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

Итог

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

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

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