Loading





Форекс с Альпари

eTXT




Анкетка


Создание теней элементов в CSS3 с помощью
свойства box-shadow

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

CSS3 поддерживает свойство box-shadow, с помощью которого можно легко добавлять тени к элементам на странице, таким как изображения, блоки DIV и т.д. Функция поддерживается во всех современных браузерах. И в IE есть поддержка простых теней с помощью своего фильтра.

Для создания эффекта теней в CSS применяется код:

box-shadow: <горизонталь> <вертикаль> <размытие> <цвет>
  1. горизонталь: определяет горизонтальное смещение тени. Положительное значение (например, 5px) будет формировать тень на правой части окна, в то время как отрицательное значение (например, -10px) будет формировать её слева;
  2. вертикаль: определяет вертикальное смещение тени. Положительное значение (например, 5px) будет формировать тень нижней части окна, в то время как отрицательное значение (например, -10px) будет формировать её в верхней части;
  3. размытие: определяет радиус распространения тени / размытия. Значение по умолчанию равно 0, что означает отсутствие размытия. Положительное значение увеличивает пятно, в то время как отрицательная величина фактически сокращает тень;
  4. цвет: задается цвет тени.

Для того, чтобы эффект работал во всех браузерах, нужно определить все 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.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка