Благодаря новым функциям в 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 внутреннее смещения содержания. Это свойство необходимо для полного отображения градиента в контейнере. Смотрите подробности в приведенном ниже примере:
Этот метод обеспечивает больше гибкости, при создании градиента в любом возможном направлении: Слева направо, сверху вниз, по диагонали или под углом. Ниже приведены некоторые примеры: