Главная / Техно / CSS тень блока|Как создать красивую css тень блока
CSS тень блока|Как создать красивую css тень блока
Используя css, можно получить почти не ограниченные возможности по созданию визуальных эффектов. С помощью него можно из простых вещей делать замечательные и привлекательные элементы сайта.
В этой короткой статье- уроке я покажу как с помощью css можно сделать эффект тени блока, как поиграть с размерами, цветами и самой тенью, чтобы получить интересную визуализацию.
За тень отвечает значения box-shadow, именно он создает тот самый эффект тени. Его можно использовать в любом элементе, не зависимо блоки это или что либо другое.
Он прикрепляет к коробке одну или несколько теней. Свойство принимает либо значение none, которое указывает на отсутствие теней, либо разделенный запятыми список теней, упорядоченных спереди назад.
box-shadow — тень блока 0 0 3 px — расстояния тени от блока, 3 px — толщина тени.
border-center: 1px solid #D02A2A; » — сплошная линия по левому краю align=» center» — выравнивание по центру
box-shadow (значения отвечающее за тень, 0 сторона тени -право, лево, 0 — сторона тени верх, низ, 3px — ширина тени, 3px — отдаленность или ее размытость. (0 0 3px 3px)
Результат css тени блока:
Ширина тени 3 px -размытость тени 3 пикселя, угол падения равен 0 (box-shadow 0 0 3 px 3 px ):
Здесь ширина так же 3 px а ее размытость на 29 px, угол падения тени 0 (box-shadow 0 0 3 px 29 px)
Что бы Тень была сверху, пишем отрицательное число -10px (box-shodow 0 -10px 29px 3px)
Что бы тень была снизу необходимо второй число 0 исправить на любое другое, например (box-shodow 0 10 px 29 px 3 px )
Что бы тень была с боку, для этого прописываем число первому 0 отвечающее за сторону падения, например 5 px тень будет с правой стороны, отрицательное число с левой стороны, например (box-shodow -7px -7px 34px 2px) -тень сверху с лево.
Если сделать тень и фон одинаковым цветом, получится такой эффект (box-shadow 0 3 px 3 px):
Можно к этому коду добавить значения webkit-transform: rotate(3deg) — что создает эффект наклона блока положительное число 3 deg — наклон в право, отрицательное -3deg — наклон в лево.
Например box-shadow: 0 14px 11px #777; -webkit-transform: rotate (3 deg);
Цвета тени, цвета заливки блока, толщина тени, ее размытость, стороны ее падения, могут быть самыми разными. Эксперементируя, можно выбрать, что то для себя подходящее.
В интернете можно найти кучу примеров как сделать красивую тень, нужно просто подобрать то что подойдет именно для вашей ситуации.
Экспертный комментарий
Материал подготовлен практикующим специалистом по маркетингу
Михаил Каржин — Вебмастер, маркетолог, преподаватель и специалист по рекламным технологиям. Разрабатываю сайты, рекламные кампании и стратегии продвижения для бизнеса. Работаю с Яндекс Директ, SEO, контентом, аналитикой и комплексным интернет-маркетингом. Пишу полезные статьи и книги.
Преподаватель маркетинга. Специалист по рекламе. Разработка сайтов. Яндекс Директ
Здесь ширина так же 3 px а ее размытость на 29 px, угол падения тени 0 (box-shadow 0 0 3 px 29 px)
Что бы Тень была сверху, пишем отрицательное число -10px (box-shodow 0 -10px 29px 3px)
Если сделать тень и фон одинаковым цветом, получится такой эффект (box-shadow 0 3 px 3 px):
