Май 14, 2020 Запись была обновлена
Границы 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)
Все бы ничего, но последний вариант не позволяет применить border-radius
Познавательно.. не смотря на повсеместное внедрение флэт — старое затейливое объемное оформление — это клево! По сути — можно даже нагуглить онлайн-генератор градиентных заливок и более точно вырисовывать и направление и задавать количество цветов
Спасибо! Буду использовать на своем сайте
Оригинально! Про рамки я как-то не подумал, вернее не додумался. Спасибо.
Спасибо!!! Очень полезный пост)))