Межі 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; !
Успіхів!
З повагою, Юрій Німець