Блог веб разработки

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

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, включайте свое воображение и творите.

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

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

Еще статьи

Таймеры JavaScript

repeat javaScript

методы классов PHP

веб скрапинг

template html

touch action CSS

object html

Python сервер

mail php

Комментарии

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

История

    НОВОСТИ

    • Опубликовал приложение под android 'Аудиокниги'. Кому интересно, переходите по ссылке