Приветствую вас. Сегодня я хотел бы рассказать о внутренней тени и как ее сделать с помощью css. Вообще тени позволяют придать блоку абсолютно другой вид, если правильно ими пользоваться.
Обычная и внутренняя тень средствами css3
Напомню вам для начала, что обычная тень задается с помощью свойства box-shadow. По умолчанию она такого же размера, что и сам элемент. Также ей стоит явно указать смещение и цвет, чтобы как минимум увидеть ее. Для начала я покажу вам, как сделаь обычную тень, потому что на основании ее делается и внутренняя.
Давайте сейчас зададим тень для какого-нибудь блока и разберемся с синтаксисом свойства. Я взял блок, который мы получили в статье про скругление углов. Стили записаны так, как будто блок имеет идентификатор block.
#Block{
Box-shadow: 10px 5px 5px 0 red;
}
Как видно, мы через пробел перечислили пять значений:
- 10px – смещение тени по горизонтали
- 5px – смещение по вертикали
- 5px – размытие тени
- 0 – растяжение (то, насколько тень будет больше в размерах, чем сам блок)
- Red – цвет
Именно в таком порядке задаются значения для формирования тени. Обязательными являются лишь смещения по горизонтали и вертикали и цвет, поэтому можно записать так:
#block{
Box-shadow: 10px 5px red;
}
И все будет работать. Только размытие не применится.
Так вот, чтобы сделать тень внутренней, нужно всего лишь указать перед всеми значениями слово inset.
#Block{
Box-shadow: inset 10px 5px 5px 0 red;
}
Смещение в одном и во втором случаях происходит от одного и того же места – от краев элемента, но в случае с внутренней тенью это смещение идет внутрь, а не за элемент, занимая дополнительное место.
Преимущество внутренней тени
А преимущество в том, что она не занимает места, поскольку располагается внутри элемента, но при грамотном использовании может значительно улучшить его внешний вид.
Подробнее о значениях
Теперь хотелось бы подробнее остановиться на значениях свойства. Размытие и растяжение желательно задавать в пикселях, при этом отрицательные значения не допускаются. С цветом, я думаю, вам тоже все понятно – его можно задать в любом из известных вам цветовых форматов.
А вот смещение можно указать и отрицательное. При положительном значении тень по горизонтали смещается слева направо, а по вертикали – сверху вниз. Если вам нужно изменить направление, всего лишь поставьте минус перед значением.
Множественные тени
CSS3 дает возможность задавать блоку множественные как обычные, так и внутренние тени. Тройную внутреннюю тень красного, зеленого и синего цвета можно задать так:
box-shadow: inset 30px 0 5px 0 red, inset 60px 0 5px 0 green, inset 90px 0 5px 0 blue;
Это просто пример, от которого вы можете отталкиваться при составлении своего оформления. Просто ставьте запятую и не забывайте указывать слово inset, если вам нужна внутренняя тень.
Итог
Ничего сложного в этом свойстве нет. Всего лишь вам нужно прописать перед остальными значениями ключевое слово inset, а также записать остальные параметры тени. В самом конце стоит поставить точку с запятой, а если нужно описать еще одну тень, то запятую.