Кордони CSS використовуючи градієнт

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

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

Кордони CSS — СПОСІБ 1

1) Градієнт кордону зверху донизу

HTML це просто блок:

А CSS з першого погляду видається громіздким:

2) Градієнт кордону зліва направо

Ось як це виглядає на реальній сторінці:

Як і минулого разу HTML дуже простий:

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

Кордони CSS — СПОСІБ 2

Другий спосіб полягає у використанні CSS3 властивості border-image, яке нам значно скоротить і спростить код. Скоро ви самі переконаєтеся в цьому.

Браузери, які підтримують цю властивість: Chrome, Internet Explorer 11, Firefox, Safari та Opera.

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

1) Градієнт зверху донизу

Як бачите, результат такий самий (якщо ваш браузер підтримує цю властивість):

У HTML також відмінностей немає:

А ось CSS навіть на око стало набагато менше:

2) Градієнт зліва направо

Також зробимо градієнт кордону CSS, де колір змінюється зліва направо:

CSS також значно менше, ніж у минулому способі:

3) Діагональний градієнт

Ще один цікавий спосіб - діагональна зміна кольору кордону:

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

Чи сподобався вам цей спосіб оформлення кордону? Сподіваюсь що так! Тому що він заощаджує «кілобайти» під час завантаження. Я показав вам не тільки ще один спосіб як красиво оформити ваш сайт, але і як зробити його завантаження хоч трохи швидше за 😉 !

---