Тень для блока

Генератор тени СSS

Мы продолжаем тему генераторов. В этой статье речь пойдет о тени. Не в физическом как тень от солнца и не в мистическом смысле как это было одной из пьес Евгения Шварца. Речь пойдет о  эффекте CSS, с помощью которого страницы сайта сайта становятся более привлекательными.

В эффектах теней созданных с помощью CSS различают два варианта —  для блоков (или изображений)  и текста. Последние как правило используется для заголовков. ОБщие правила для теней  соответственно box-shadow и  text-shadow. Любая тень в CSS  имеет ряд значений — направления, в которое она отбрасывается, цвета и размытия. И меняя эти параметры можно создать большое количество  эффектов тени.

CSS . Эффекты тени
Рис1. CSS эффекты для тени.

Чаще всего используют первые три эффекта  верхнего ряда. Их можно применять как текстовым блокам так и изображениям  Например вот так (см. рис.2)  Это логотив известного во всем мире винного завода, основанного Ротшильдом в конце девятнадцатого века. Небольшая тень отбрасывается влево и вниз.  Подробнее можно рассмотреть  если «кликнуть мышкой на изображение.  Все эффекты что показаны на рис.1  созданы с помощью специального инструмента «Генератор теней для блока»

Все эффекты в нем выглядят  просматриваются сразу. И тот час же создается код который можно вставить файл стилей своего сайта.  Прежде всего необходимо выбрать эффект. Пусть это будет Sides  — второй слева в верхнем ряду  на рис1. И  слева сверху  можно увидеть панель инструментов для  изменения параметров этого эффекта. А под ней код этого же эффекта

Настройки в генераторе теней
Shift right: тень вправо
Shift down: тень вниз
Spread:распростанение тени
Blur:Размытие
Код для тени
-webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 12px 1px 15px 8px rgba(0,0,0,0.2);
box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 12px 1px 15px 8px rgba(0,0,0,0.2);

При отрицательных значениях Shift right  и Shift down:тень будет отбрасываться влево и вверх. Аналогично и для других эффектов.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *