Межі css використовуючи градієнт - оформлення кордону на css

Межі css використовуючи градієнт

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

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

  • Об`ємна форма пошуку на CSS3
  • Зошит в лінійку на CSS3
  • Гарне оформлення списків на CSS3

Межі CSS - СПОСІБ 1

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

Живий приклад:

Відео: Курс по CSS3

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

1
lt;div class="Box"gt; lt;/divgt;

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

1234567891011121314151617181920212223242526
.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
lt;div class="Box"gt; lt;/divgt;

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



1234567891011121314151617181920212223242526
.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
lt;div class="Box"gt; lt;/divgt;

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

12345678910111213
.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
lt;div class="Box"gt; lt;/divgt;

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

Відео: CSS Tutorial for Beginners - 57 - Linear gradients

1234567891011121314
.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
lt;div class="Box"gt; lt;/divgt;

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

1234567891011121314
.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- / * Зміщення фону кордону * /}

висновок

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

Успіхів!

З повагою, Юрій Німець

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!