Войти
Регистрация

Тень у блоков в CSS

Тень у блоков в CSS

Приветствую Вас, друзья!

Тема теней для блоков сейчас не вызывает головную боль, как это было несколько лет назад, когда CSS3 еще не был так сильно распространен. Тогда, чтобы сделать тень использовали кучу блоков с картинками, вобщем проще было не использовать тень.

Сейчас же тень сделать проще простого.

Чтобы сделать тень для блока нам нужен сам блок. Напишем его:

<body>
   <div>
   </div>
</body>

За тень у блока отвечает свойство box-shadow, которое принимает 5 значений. Точно такую же тень мы делали в статье, где я рассказывал про тень для текста.

div {
   box-shadow: 5px 5px 8px 5px #000;
}

Мы увидим следующее:

Здесь первый параметр 5px - смещение по горизонтали, второй параметр 5px - смещение по вертикали, третий 8px - радиус размытия, четвертый 5px - растяжение тени (не обязательный) и последний это цвет.

Цвет также можно задать в формате rgb и задать прозрачность тени - rgba (0, 0, 0, 0.5)

Для смещения тени в противоположную сторону по горизонтали и по вертикали используйте отрицательные значения

div {
   box-shadow: -5px -5px 8px 5px rgba(0, 0, 0, 0.5);
}

Внутренняя тень для блока. Тень можно задать внутри блока, через параметр inset:

div {
   box-shadow: inset 5px 5px 8px 5px rgba(0, 0, 0, 0.5);
}

Как результат видим:

Двойная тень. Чтобы сделать 2 тени, достаточно в свойстве box-shadow через запятую указать параметры каждой тени:

div {
   box-shadow: inset 10px 10px 7px 0px rgba(0,0,0,0.5), 10px 10px 7px 0px rgba(0,0,0,0.5);
}

Такими не сложными действиями можно сделать тени для любых блочных элементов сайта.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?