Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

box-shadow css

box-shadow css

Знаете ли вы, что и изначально предназначенное свойство для теней блоков box-shadow, может в некоторых ситуациях иметь приоритет по отношению к тому же свойству border

Итак, давайте разберем как с помощью свойства box-shadow сделать простую рамку у блока:

box-shadow:0px 0px 0px 10px #654;

Здесь нас интересует только четвертый и пятый параметры свойства, где 10px это радиус размазывания , а #654 цвет.

Преимущества такого подхода по отношению к стандартному свойству border:

Пример допустим мы делаем навигацию , при наведении на одну из ссылок у нас вокруг нее появляется рамка:

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
    <meta charset="utf-8"/>
    <title>Рамки с помощью box-shadow</title>
</head>
<body>
<style>

    a{
        float:left;
        display:inline-block;
        margin-left:20px;
        text-decoration:none;
        padding:5px;
        border-radius:4px;

    }
    a:hover{
        box-shadow:0px 0px 0px 2px #654;
        /*border:2px  solid #654;*/
    }
</style>

<nav>

        <a href="">Главная</a>
        <a href="">О нас</a>
       <a href="">Новости</a>
        <a href="">О нас</a>

</nav>
</body>
</html>

Посмотрите и сравните результат при использовании box-shadow:0px 0px 0px 2px #654;

Затем закомментируйте и попробуйте использовать border:2px solid #654;

Я думаю разница очевидна, но тут следует учитывать, что рамка при использовании box-shadow будет у нас только сплошная и в некоторых ситуациях для того чтобы рамка отобразилась блоку придется задать свойство margin которое больше или соответствует толщине заданной рамки.

Плюс данного свойства еще в том что мы через запятую можем задать сколько угодно значений, то есть есть возможность создавать много рамок. Делая такие интересные эффекты:

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
    <meta charset="utf-8"/>
    <title>Рамки с помощью box-shadow</title>
</head>
<body>
<style>
div{
    width:200px;
    height:150px;
    box-shadow:0px 0px 0px 5px #fff,
                0px 0px 0px 7px #00f;
    margin:50px auto;
    background:green;
    border-radius:5px;
}

</style>
<div>

</div>
</body>
</html>

Ну вот и все, что я хотел рассказать вам о рамках с помощью свойства box-shadow, включайте свое воображение и творите.

Надеюсь это короткая статья была для вас полезна.Удачи!

Оцените статью:

Статьи

Разработки

Комментарии

В данном разделе пока нет комментариев!

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm