Создание теней элементов в CSS3 с помощью
свойства box-shadow
Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.
CSS3 поддерживает свойство box-shadow, с помощью которого можно легко добавлять тени к элементам на странице, таким как изображения, блоки DIV и т.д. Функция поддерживается во всех современных браузерах. И в IE есть поддержка простых теней с помощью своего фильтра.
Для создания эффекта теней в CSS применяется код:
box-shadow: <горизонталь> <вертикаль> <размытие> <цвет>
- горизонталь: определяет горизонтальное смещение тени. Положительное значение (например, 5px) будет формировать тень на правой части окна, в то время как отрицательное значение (например, -10px) будет формировать её слева;
- вертикаль: определяет вертикальное смещение тени. Положительное значение (например, 5px) будет формировать тень нижней части окна, в то время как отрицательное значение (например, -10px) будет формировать её в верхней части;
- размытие: определяет радиус распространения тени / размытия. Значение по умолчанию равно 0, что означает отсутствие размытия. Положительное значение увеличивает пятно, в то время как отрицательная величина фактически сокращает тень;
- цвет: задается цвет тени.
Для того, чтобы эффект работал во всех браузерах, нужно определить все 3 свойства (box-shadow, -webkit-box-shadow и -moz-box-shadow).
Сначала добавим тень к DIV, расположенную справа и снизу, без размытия:
<style type="text/css">
.shadow1{
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
}
</style>
<div class="shadow1" style="width:500px; height:50px; padding:5px; background:navy; border: 1px solid black;"> </div>
Обратите внимание на последнюю строку. Это собственный метод добавления тени в IE, используя фильтры.
Результат, который виден в браузере:
Далее попробуем добавить радиус размытия 8px:
<style type="text/css">
.shadow2{
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>
<div class="shadow2" style="width:500px; height:50px; padding:5px; background:navy; border: 1px solid black;"> </div>
Получаем такой результат:
А сейчас добавим тень к изображению
|
Демо-изображение: |
|---|
|
Сохраните это изображение в папку img, которая должна находиться в одной директории с файлом вашей страницы.
CSS и Html код:
<style type="text/css">
.shadow3{
box-shadow: -6px -6px 10px #561A0B;
-webkit-box-shadow: -6px -6px 10px #561A0B;
-moz-box-shadow: -6px -6px 10px #561A0B;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#561A0B, offX=-6, offY=-6, positive=true);
}
</style>
<img src="img/test.jpg" class="shadow3" width="400" height="320" alt="изображение">
Результат в браузере:
Спасибо за внимание. Всего самого позитивного! Посещайте мой сайт. Пока! L.M.
|