Градиентная обводка блока на CSS

Градиентная обводка блока на CSS

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

Рассмотрим пару вариантов градиентных обводок.


1. Прямоугольная обводка с острыми углами

Cделаем следующее:

1. Создадим div.linear-gradient с градиентным фоном;

2. Создадим внутренний блок div с небольшим отступом.

Разметка HTML

<<div class="module-border-wrap">
<div class="module">
Современные технологии достигли такого уровня,
что сплоченность команды профессионалов прекрасно подходит для реализации вывода текущих активов.
Кстати, предприниматели в сети интернет объединены в целые кластеры себе подобных.
</div>
</div>

Стили CSS

.module-border-wrap {
max-width: 250px;
padding: 1rem;
position: relative;
background: linear-gradient(to right, red, purple);
padding: 3px;
}

.module {
background: #222;
color: white;
padding: 2rem;
}

Результат

Современные технологии достигли такого уровня, что сплоченность команды профессионалов прекрасно подходит для реализации вывода текущих активов. Кстати, предприниматели в сети интернет объединены в целые кластеры себе подобных.
2. Прямоугольная обводка с закругленными углами на псевдоэлементах ::before и ::after

Разметка HTML

<div class="gradient-box">
<p>
Современные технологии достигли такого уровня, что сплоченность команды профессионалов
прекрасно подходит для реализации вывода текущих активов. Кстати, предприниматели в сети
интернет объединены в целые кластеры себе подобных.
</p>
</div>
Стили CSS
.gradient-box {
  display: flex;
  align-items: center;
  width: 90%;
  margin: auto;
  max-width: 22em;
  position: relative;
  padding: 3em;
  box-sizing: border-box;
  color: #FFF;
  background: #000;
  background-clip: padding-box; /* !important */
  border: solid 5px transparent; /* !important */
  border-radius: 1em;
}
.gradient-box:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); }
.gradient-box:after { content: ''; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); background: #000; }
p { z-index:10; }

Результат

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

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров
HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров
Создадим раздвижное меню для каталога товаров с несколькими уровнями вложенности разделов. Меню будет открыто в основных разделах, лежащих в корневом каталоге. В принципе, вам нужно просто скопировать шаблон, CSS стили и пользоваться этим меню...

Фоновая волна на простом CSS
Фоновая волна на простом CSS
Рассмотрим в этой статье, как сделать фоновые волны на сайте, используя только возможности CSS3 и SVG файл. Т.е. без применения Javascript.

Как использовать свойства CSS object-fit и object-position
Как использовать свойства CSS object-fit и object-position
Существует множество вариантов для определения размера и расположения фоновых изображений с помощью CSS. В этой статье мы рассмотрим, как использовать object-fit для размещения изображений на определенном пространстве и как использовать object-position для правильного позиционирования в этом пространстве.

Разные "вкусняшки" на CSS и HTML5 для начинающих вебдизайнеров
Разные "вкусняшки" на CSS и HTML5 для начинающих вебдизайнеров
Подборка различных проектов с открытым кодом на CSS и HTML, от бордеров до слайдера, которые могут вам пригодиться при создании веб сайта.

Понимание HTML5 и CSS3 для веб-дизайна
Понимание HTML5 и CSS3 для веб-дизайна
Наша информация будет интересна тем, кто только начинает изучать и применять теги HTML5 при создании своих первых сайтов, а также в качестве справочной информации и для более опытных верстальщиков, чтобы не забывали.

4 свойства сетки CSS для большинства ваших потребностей в макетировании
4 свойства сетки CSS для большинства ваших потребностей в макетировании
CSS Grid предоставляет нам мощную систему верстки для веб-сайтов. То, что мы собираемся сделать сейчас, - это обратный подход, чтобы показать вам наименьший возможный набор свойств сетки, которые вам нужно знать, чтобы удовлетворить большинство ваших потребностей в макете.

QRcode

2010-2023 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.