Создание разноцветных границ с помощью CSS

Опубликовано: 2022-02-16

Свойство границы CSS имеет некоторые параметры настройки, такие как сплошная, пунктирная, пунктирная и т. д. Однако, когда дело доходит до цвета границы, у нас может быть только сплошной цвет для каждой стороны. Но есть еще один способ получить разноцветную линию, используя еще несколько свойств, о которых вы, возможно, не подумали, давайте посмотрим.

Твердый

солидбор

Пунктирная

дашбор

Пунктирный

пунктирный бор

Разноцветные границы

многоцветныйбор1

многоцветныйбор2

Чтобы получить многоцветную границу, как показано выше, мы будем использовать свойство position и селектор ::after after с цветовым градиентом. Во-первых, мы создадим область заголовка, используя класс HTML <div>, а затем мы стилизуем ее с помощью CSS, чтобы иметь многоцветную рамку, разделяющую ее и содержимое ниже.

Создайте свой HTML:

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>
ОТКРЫТЬ В ПОПАПЕ
 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

Теперь давайте немного стилизуем его с помощью CSS.

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }
ОТКРЫТЬ В ПОПАПЕ
 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

Теперь у вас должно получиться что-то похожее на это:

Создание разноцветных границ с помощью CSS

Теперь мы можем добавить ::after к .ost-multi-header selector . Но прежде чем мы это сделаем, я хотел бы немного объяснить, что делает ::after и зачем нам нужно свойство position для многоцветной границы. ::after создает псевдоэлемент со всем, что находится в свойстве содержимого в конце выбранного элемента. В нашем случае это элемент .ost-multi-header . Давайте сделаем проверенное временем «Hello World!» пример для иллюстрации.

Добавьте это в свой CSS:

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }
ОТКРЫТЬ В ПОПАПЕ
 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

Хвхедербор

Как видите, теперь у нас есть «Hello World!» элемент под заголовком заголовка. Поскольку наш родительский элемент .ost-multi-header имеет свойство position как relative , мы можем задать дочернему элементу absolute позицию. Это позволит нам легко перемещать наш новый псевдоэлемент, который мы создали с помощью ::after , куда угодно внутри родительского элемента. Мы помещаем его внизу и перемещаем на 20 пикселей слева внутри родительского элемента. Обратите внимание: если родительский элемент не имеет свойства position, установленного в относительный, то наш элемент с абсолютным позиционированием будет внизу и на 20 пикселей левее области просмотра браузера.

А как насчет нашей цветной границы? Мы собираемся стилизовать фон нашего псевдоэлемента, чтобы он был нашей разноцветной границей, используя градиент. Градиенты CSS могут быть линейными или радиальными. Для нашей границы мы будем использовать linear-gradient . Проще говоря, это дало бы нам границу, которую мы ищем.

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }
ОТКРЫТЬ В ПОПАПЕ
 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

Но давайте замедлим момент для шага за шагом. Во-первых, свойство content все еще существует, хотя оно пустое. Это связано с тем, что без свойства content псевдоэлемент никогда не создается; значит, нам это нужно. Нам нужно установить высоту нашего псевдоэлемента, высоту нашей границы. Зачем устанавливать для свойств left и right значение 0? Без установленной ширины псевдоэлемент растянется на 100% ширины внутри родительского элемента. Может показаться, что это много, но настройки linear-gradient просто говорят, что цвет течет слева направо, и мы добавляем нужные цвета на определенные проценты фона.

Несмотря на то, что все, что мы делаем, это выбираем, какие цвета должны быть в определенном процентном соотношении, это большая работа ногами. К счастью, есть бесплатные онлайн-ресурсы, которые очень помогают с цветовыми градиентами. Ultimate CSS Gradient Generator от ColorZilla — отличный инструмент, который включает несколько свойств градиента для поддержки старых браузеров.

У нас уже есть настроенный градиент в инструменте, поэтому мы можем использовать эту ссылку, чтобы увидеть точные настройки, используемые в этом уроке: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 ,февр123+66,2184кд+66,2184кд+100. Это должно выглядеть так:

Создание разноцветных границ с помощью CSS

На этом сайте много настроек, но давайте сосредоточимся на том, какие настройки нам нужны, чтобы создать внешний вид, который мы собираемся использовать для нашей границы. Давайте разберем это:

Создание разноцветных границ с помощью CSS

  1. Предустановки — это может быть отличной отправной точкой!
  2. Ползунок — здесь можно добавлять, удалять и редактировать цвета.
  3. Остановки — этот раздел позволяет вам изменить настройки непрозрачности и местоположения каждого цвета. Просто щелкните поле цвета на ползунке выше, чтобы изменить тот, которым вы управляете в этом разделе.
  4. Предварительный просмотр — здесь вы можете сразу увидеть результаты ваших изменений.
  5. Ориентация и размер . Позволяет изменить горизонтальную, вертикальную, диагональную или радиальную ориентацию. И установить размер градиента.
  6. Код CSS — сгенерированный код с постоянной ссылкой, так что вы всегда можете вернуться и легко отредактировать свой градиент.

В нашем случае мы искали не блеклый градиент, а сплошной плоский переход между двумя цветами, поэтому все, что нам нужно сделать, это наложить два цвета друг на друга там, где мы хотим, чтобы это произошло. В нашем примере мы уложили цвета на 33% и 66% соответственно.

Создание разноцветных границ с помощью CSS

Не стесняйтесь экспериментировать с настройками, зная, что то, что вы видите в предварительном просмотре, — это то, что сгенерирует код. Когда вы настроите внешний вид так, как хотите, вы можете использовать кнопку «Копировать» в правом нижнем углу окна кода.

градкопия

Если вы скопировали код, как он был в ссылке, ваш окончательный CSS будет выглядеть примерно так:

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }
ОТКРЫТЬ В ПОПАПЕ
 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

И этот CSS создаст это разноцветное подчеркивание, которое полностью адаптивно:

Создание разноцветных границ с помощью CSS

Ну вот! Нам не нужно было добавлять отступ 6px внизу .ost-multi-header , но дочерний элемент с absolute позиционированием больше не влияет на высоту родительского элемента. Мы можем позволить ему плавать поверх нашего содержимого в родительском элементе или добавить padding , чтобы гарантировать, что он не закрывает какой-либо контент, который мы не хотели бы блокировать.

Вот ссылка на это упражнение, воссозданное на CodePen, чтобы все могли редактировать и изучать его, не беспокоясь.

Последнее замечание: некоторые старые браузеры поддерживают только селектор с одним двоеточием :after after , а не современный стандартный двойной ::after . Вы можете использовать одно двоеточие, если хотите быть в безопасности. На данный момент он также будет работать в современных браузерах.