Тень элемента

Оцените материал
(0 голосов)

Здравствуйте! Сегодня после изучения как в css добавить фон к элементу переходим к созданию тени для элемента.

Свойство box-shadow позволяет создать у элемента тень. Это свойство может принимать сразу несколько значений:

 box-shadow: hoffset voffset blur spread color inset

 

  • hoffset: горизонтальное смещение тени относительно элемента. При положительном значении тень смещается вправо, а при отрицательном - влево

  • voffset: вертикальное смещение тени относительно элемента. При положительном значении тень смещается вниз, а при отрицательном - вверх

  • blur: необязательное значение, которое определяет радиус размытия тени. Чем больше это значение, тем более размытыми будут края тени. По умолчанию имеет значение 0.

  • spread: необязательное значение, которое определяет направление тени. Положительное значение распространяет тень во вне во всех направлениях от элемента, а отрицательное значение направляет тень к элементу

  • color: необязательное значение, которое устанавливает цвет тени

  • inset: необязательное значение, которое заставляет рисовать тент внутри блока элемента

 

 Например:

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Тени в CSS3</title>
        <style>
        div{
            width: 128px;
            height: 96px;
            margin: 20px;
            border: 1px solid #ccc;
            background-color: #eee;
            box-shadow: 10px 4px 10px 3px #888;
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

Просмотреть  пример

Через запятую можно определить несколько различных теней:

 

box-shadow: 5px 3px 8px 3px #faa, 10px 4px 10px 3px #888 inset;
Прочитано 967 раз Последнее изменение Суббота, 27 августа 2016 10:04
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+