CSS box-shadow генератор

Box shadow CSS свойство

box-shadow — это CSS3 свойство, которое позволяет создавать эффект тени для, практически, любого элемента веб страницы. Оно похоже на эффект Drop Shadows в Photoshop, с помощью этого свойства создается иллюзия глубины на 2-мерных страницах.

Синтаксис

Свойство принимает составное значение из пяти разных частей: горизонтальное смещение, вертикальное смещение, размытие, растяжение, цвет тени. К тому же можно указать будет ли тень внешней или внутренней.

CSS
div {
    box-shadow: offset-x offset-y blur spread color position;
}

В отличие от других свойств, каких как border, которые разбиты на подсвойства (border-width, border-style и тд), box shadow CSS стоит особняком. Соответственно, важен порядок, в котором вы записываете значения свойства.

Горизонтальное смещение (по оси X)

Первое значение offset-x - смещение тени по оси X. Положительное значение сместит тень вправо, а отрицательное — влево.

CSS
.box-1 { box-shadow: -15px 0 10px 0 rgba(0,0,0,0.2); }
.box-2 { box-shadow: 15px 0 10px 0 rgba(0,0,0,0.2); }

Вертикальное смещение (по оси Y)

Второе значение offset-y - смещение тени по оси Y. Положительное значение сместит тень вниз, а отрицательное — наверх.

CSS
.box-1 { box-shadow: 0 15px 10px 0 rgba(0,0,0,0.2); }
.box-2 { box-shadow: 0 -15px 10px 0 rgba(0,0,0,0.2); }

Размытие

Третье значение (blur) представляет собой радиус размытия тени, посмотрите как он работает на box shadow генераторе выше. Значение 0 означает, что тень будет совсем не размыта, края и стороны будут абсолютно четкие. Чем выше значение, тем более мутную и размытую тень вы получите. Отрицательные значения не допускаются.

CSS
.box-1 { box-shadow: 0 5px 0 0 rgba(0,0,0,0.2); }
.box-2 { box-shadow: 0 5px 15px 0 rgba(0,0,0,0.2); }
.box-3 { box-shadow: 0 5px 30px 0 rgba(0,0,0,0.2); }

Растяжение

Четвертое значение (spread) представляет собой размер тени или дистанции от тени до элемента. При положительном значении тень увеличится, выйдет за пределы элемента. Отрицательное значение уменьшит и сожмет тень.

CSS
.box-1 { box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); }
.box-2 { box-shadow: 0 0 5px 5px rgba(0,0,0,0.2); }
.box-3 { box-shadow: 0 0 5px -15px rgba(0,0,0,0.2); }

Цвет

Цвет тени может быть абсолютно любым и записан в разных форматах, доступных в CSS (HEX, RGB, RGBA и пр), попробуйте разные оттенки в css box shadow generator.

CSS
.box-1 { box-shadow: 0 10px 5px -5px #e6ecc1; }
.box-2 { box-shadow: 0 10px 5px -5px rgba(30, 129, 204, 0.2); }

Внешняя/внутренняя

Значение inset определяет положение тени. По умолчанию оно не указано, это означает, что тень будет снаружи элемента. Для того, чтобы тень была внутри элемента, необходимо в конце добавить ключевое слово inset.

CSS
.box-1 { box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2) inset; }
.box-2 { box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2); }

Несколько теней

В CSS тень блока может быть не одна. Чтобы добавить несколько теней, достаточно написать их в одном свойстве через запятую.

CSS
.box-1 {
    box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2) inset,
                10px 10px 10px 2px rgba(34, 60, 80, 0.2);
}

Круглая тень

Тень может быть круглой, для этого достаточно добавить свойство border-radius

CSS
.box-1 {
    box-shadow: 10px 10px 10px 0px rgba(34, 60, 80, 0.2);
    border-radius: 50%;
}

Эффект увеличения с тенью

Используя свойства box-shadow и transform, можно создать иллюзию приближения и отдаления элемента от пользователя.

CSS
.box-1 {
    transform: scale(1);
    box-shadow: 0 0 5px 5px rgba(34, 60, 80, 0.2);
    transition: box-shadow 0.5s, transform 0.5s;
}
.box-1:hover {
    ransform: scale(1.2);
    box-shadow: 0 0 15px 7px rgba(34, 60, 80, 0.2);
    transition: box-shadow 0.5s, transform 0.5s;
}

Эффект парения элемента с помощью box-shadow

Мы можем добавить тень к псевдоэлементу :after и создать тень ниже элемента. Тем самым создавая иллюзию, что элемент был поднят вверх, а потом упал.

CSS
.box-1 {
    position: relative;
    transform: translateY(0);
    transition: transform 1s;
}
.box-1::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    height: 8px;
    width: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    transform: translate(-50%, 0);
    transition: transform 1s;
}
.box-1:hover {
    transform: translateY(-40px);
    transition: transform 1s;
}
.box-1:hover::after {
    transform: translate(-50%, 40px) scale(0.75);
    transition: transform 1s;
}

Тень и свойство clip-path

Тень возможно сделать не только на элементах в виде блока или круга, но и на более сложных формах с использованием свойства clip-path. Правда свойство box-shadow при этом не сработает и нам придется заменить его другим. Приступим, создадим элемент box-1.

CSS
.box-1 {
    clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0 50%);
}

В CSS существует фильтр, который тоже делает CSS тень блока — drop-shadow(). Но у вас не поучится использовать его непосредственно на элементе, так как clip-path просто отрежет эту тень. Поэтому создаем родительский блок и наложим тень на него.

HTML
<span class="box-1__wrapper">
    <span class="box-1">
        box-1
    </span>
</span>

CSS
.box-1__wrapper {
    filter: drop-shadow(-1px 6px 3px rgba(34, 60, 80, 0.2));
}
.box-1 {
    clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0 50%);
}