Site icon Vavik96

Рамка с CSS градиентом

Благодаря новым функциям в CSS3, мы теперь в состоянии строить веб-сайты, используя меньше изображений. В прошлом, использование изображения было неизбежно, при создании цветного градиента. Сегодня это становится гораздо проще и компактней с использованием CSS3. Всем знакомы градиентные заливки фона. Но использование градиента в CSS3 не ограничивается только этим. Знаете ли вы, что вы также можете использовать его в оформлении границ? Читайте дальше, чтобы узнать, как это сделать.

Первый способ


Первый способ заключается в использовании псевдо-элементов. Ну, давайте посмотрим, как работает трюк.

Градиент сверху вниз.

Мы начнем с простого градиента, который распространяется сверху вниз. Для начала создайте контейнер “div“:

HTML

<div class="box"></div>

CSS

.box {
    width: 400px;
    height: 400px;
    background: #eee;
}

 

Для создания градиента у рамки контейнера, в первую очередь установите широкую границу на его верхней и нижней сторонах. Также создадим 2 прямоугольника с 2 псевдо-элементами :before и :after и укажем такую же ширину , как и у границы контейнера. Позиционируем прямоугольник по левой и правой стороне контейнера и используем linear-gradient через background-image. Ниже вы можете посмотреть, как это выглядит:

Градиент слева на право.

Теперь давайте создадим градиент слева на право, так же, как и в предыдущем примере. Только на этот раз, мы добавим границу на левой и правой стороне, а не на верхней и нижней части. Кроме того, мы также используем псевдо-элементы :before и :after для формирования 2 прямоугольников. Но, в отличие от предыдущего примера, мы теперь разместим их на верхней и нижней стороне контейнера.

 

Градиент по диагонали.

Создание диагонального градиента в этом примере является технически сложным.

Тем не менее, мы полагаемся на 2 псевдо-элемента, :before и :after и использование linear-gradient. На этот раз, однако, мы будем использовать два linear-gradient в псевдо-элементе. И каждый градиент находится в оппозиции друг к другу. Смотрите пример и исходный код для подробной информации.

 

Второй способ.


Второй способ заключается в использовании CSS3 свойства border-image. Это свойство CSS3 позволит нам заполнить границу как изображением, так и CSS3 градиентом. Список браузеров поддерживающих border-image довольно большой: Chrome, Internet Explorer 11, Firefox, Safari, и Opera все способны в полной мере обработать border-image . Следует, однако, отметить, что border-image будет работать только в прямоугольной форме или контейнере. Это означает, что добавление border-radius будет изменять border-image.

Ниже спецификации свойств border-image:

 

border-image: <source> <slice> <width> <outset> <repeat|initial|inherit>;

 

<source>, это путь, который определяет местоположение изображения, используемого как фон. Правда, мы будем использовать вместо этого CSS3 градиент. Для достижения такого же результата, как и в предыдущих примерах, мы применим CSS3 градиент в border-image следующим образом:

 

.box{
    width: 250px;
    height: 250px;
    background: #eee;
    border: 20px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    border-image-slice: 1;
}

 

border-image не покажет ничего, если мы не указажем ширины границы. Итак, как вы можете видеть выше, мы добавляем рамку шириной 20px с прозрачным фоном. Затем мы устанавливаем значения border-image и linear-gradient вместе с префиксами браузеров для ранних версий Webkit и Firefox.

Добавление <slice>, как показано выше, установит в image-border внутреннее смещения содержания. Это свойство необходимо для полного отображения градиента в контейнере. Смотрите подробности в приведенном ниже примере:

Этот метод обеспечивает больше гибкости, при создании градиента в любом возможном направлении: Слева направо, сверху вниз, по диагонали или под углом. Ниже приведены некоторые примеры:

Градиент слева на право.

Градиент по диагонали.

Оригинал / Перевод

Exit mobile version