Тени для боков и текста
Мы продолжаем тему генераторов CSS. В этой статье речь пойдет о тени. Не в физическом как тень от солнца и не в мистическом смысле как это было одной из пьес Евгения Шварца. Речь пойдет о эффекте CSS, с помощью которого страницы сайта сайта становятся более привлекательными.
В эффектах теней созданных с помощью CSS различают два варианта — для блоков (или изображений) и текста. Последние как правило используется для заголовков. Общие правила для теней соответственно box-shadow и text-shadow. Любая тень в CSS имеет ряд значений — направления, в которое она отбрасывается, цвета и размытия. И меняя эти параметры можно создать большое количество эффектов тени. Генератор CSS предлагает пятнадцать вариантов тени.
Чаще всего используют первые три эффекта верхнего ряда. Их можно применять как текстовым блокам так и изображениям. Например вот так (см. рис.2) Это логотип известного во всем мире винного завода, основанного Ротшильдом в конце девятнадцатого века. Небольшая тень отбрасывается влево и вниз. Подробнее можно рассмотреть если «кликнуть мышкой на изображение. Все эффекты что показаны на рис.1 созданы с помощью специального инструмента «Генератор теней для блока»
Все эффекты в нем выглядят просматриваются сразу. И тот час же создается код который можно вставить файл стилей своего сайта. Прежде всего необходимо выбрать эффект. Пусть это будет Sides — второй слева в верхнем ряду на рис1. И слева сверху можно увидеть панель инструментов для изменения параметров этого эффекта. А под ней код этого же эффекта.
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:тень будет отбрасываться влево и вверх. Аналогично и для других эффектов.