Exore LTD » CSS3 » Границы CSS используя градиент — оформление границы на CSS
Лого SiteHere.ru

Май 14, 2020 Запись была обновлена

Время чтения: 4 мин. Прочитать позже

Границы CSS используя градиент — оформление границы на CSS

Границы css используя градиент

Благодаря технологии CSS мы можем создавать сайты и использовать при этом меньше изображений. Я думаю вы прекрасно знаете, что изображения действительно замедляют загрузку сайта. Раньше, чтобы создать границы css в виде перехода одного цвета к другому необходимо было использовать именно изображения. Но в CSS3 есть такое новое свойство как linear-gradient, с помощью которого можно осуществить нашу задумку.

Я подобрал некоторые статьи, в которых вместо изображений можно и нужно использовать свойства CSS3:

Границы CSS — СПОСОБ 1

1) Градиент границы сверху вниз

Живой пример:

В HTML это просто блок:

1

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

А CSS с первого взгляда кажется громоздким:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.box {  
    margin: 50px auto; /* отступ сверху, снизу и центрирование по горизонтали */
    width: 250px; /* ширина */
    height: 250px; /* высота */
    border-top: 20px solid #3ACFD5; /* размер тип и цвет верхней границы */
    border-bottom: 20px solid #3a4ed5; /* размер тип и цвет нижней границы */
 
    /* свойства width и height включают в себя значения полей и границ, но не отступов */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 
    background-position: 0 0, 100% 0; /* положение фонового изображения */
    background-repeat: no-repeat; /* запрещаем повторение фонового изображения */
 
    /* размер фонового изображения */
    -webkit-background-size: 20px 100%;
    -moz-background-size: 20px 100%;
    background-size: 20px 100%;
 
    /* само фоновое изображение, где указываем в линейном градиенте что цвет начинает меняться сверху (top) */
    background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    background-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    background-image: -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
}

2) Градиент границы слева направо

Вот как это выглядит на реальной странице:

Как в и прошлый раз HTML очень простой:

1

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

А CSS сильно не изменился:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.box {  
    margin: 50px auto;
    width: 250px; /* ширина */
    height: 250px; /* высота */
    border-left: 20px solid #3ACFD5; /* размер тип и цвет левой границы */
    border-right: 20px solid #3a4ed5; /* размер тип и цвет правой границы */
 
    /* свойства width и height включают в себя значения полей и границ, но не отступов */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
 
    background-position: 0 0, 100% 0; /* положение фонового изображения */
    background-repeat: no-repeat; /* запрещаем повторение фонового изображения */
 
    /* размер фонового изображения */
    -webkit-background-size: 100% 20px;
    -moz-background-size: 100% 20px;
    background-size: 100% 20px;
 
    /* фоновое изображение, где указываем в линейном градиенте что цвет начинает меняться СЛЕВА (left) */
    background-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%), -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    background-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    background-image: -o-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    background-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%), linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
}

Границы CSS — СПОСОБ 2

Второй способ заключается в использовании CSS3 свойства border-image, которое нам значительно сократит и упростит код. Скоро вы сами в этом убедитесь.

Браузеры, которые поддерживают данное свойство: Chrome, Internet Explorer 11, Firefox, Safari, и Opera.

Также хочу сразу сказать что данное свойство работает только с «квадратными» блоками. То есть вы не сможете сделать закругленные углы границы с помощью свойства border-radius.

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

Как видите, результат такой же (если ваш браузер поддерживает данное свойство):

В HTML также различий нет:

1

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

А вот CSS даже на глаз стал намного меньше:

1
2
3
4
5
6
7
8
9
10
11
12
13

.box {  
    width: 250px; /* ширина */
    height: 250px; /* высота */
    margin: 50px auto; /* верхний и нижний отступы и горизонтальное выравнивание */
    background: #eee; /* цвет фона */
    border: 20px solid transparent; /* задаем сплошную прозрачную границу шириной в 20 пикселей */
 
    /* наша собственная граница */
    -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; /* смещение фона границы */
}

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

Также сделаем градиент границы CSS, где цвет меняется слева направо:

HTML:

1

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

CSS также значительно меньше, чем в прошлом способе:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.box {  
    width: 250px; /* ширина */
    height: 250px; /* высота */
    margin: 50px auto; /* верхний и нижний отступы и горизонтальное выравнивание */
    background: #eee; /* цвет фона */
    border: 20px solid transparent; /* задаем сплошную прозрачную границу шириной в 20 пикселей */
 
    /* наша собственная граница */
    -moz-border-image: -moz-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(left, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%); 
 
    border-image-slice: 1; /* смещение фона границы */
}

3) Диагональный градиент

Еще один интересный способ — диагональное изменение цвета границы:

HTML:

1

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

CSS код также значительно меньше, чем в прошлом способе:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.box {  
    width: 250px; /* ширина */
    height: 250px; /* высота */
    margin: 50px auto; /* верхний и нижний отступы и горизонтальное выравнивание */
    background: #eee; /* цвет фона */
    border: 20px solid transparent; /* задаем сплошную прозрачную границу шириной в 20 пикселей */
 
    /* наша собственная диагональная граница, где мы указали что цвет начинает меняться от левого верхнего (top left) угла */
    -moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);
 
    border-image-slice: 1; /* смещение фона границы */
}

Вывод

Понравился ли вам этот способ оформления границы? Надеюсь что да! Потому что он экономит «килобайты» при загрузке. Я показал вам не только еще один способ как красиво оформить ваш сайт, но и как сделать его загрузку хоть чуточку быстрее 😉 !

 

Успехов!

С Уважением, Юрий Немец

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

5 комментариев к записи
  • watcher-xgn

    Все бы ничего, но последний вариант не позволяет применить border-radius

     
    Ответить
  • Юрий

    Познавательно.. не смотря на повсеместное внедрение флэт — старое затейливое объемное оформление — это клево! По сути — можно даже нагуглить онлайн-генератор градиентных заливок и более точно вырисовывать и направление и задавать количество цветов

     
    Ответить
  • Дасиб

    Спасибо! Буду использовать на своем сайте

     
    Ответить
  • Сергей

    Оригинально! Про рамки я  как-то не подумал, вернее не додумался. Спасибо.

     
    Ответить
  • Константин

    Спасибо!!! Очень полезный пост)))

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *