Блог

Градиентная обводка блока на 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; }

Результат

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

Понравилась статья? Поделитесь

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

  • Эффект вращения с помощью CSS3

    CSS3 позволяет создавать разнообразные эффекты на сайтах без использования javascript и громоздкого flesh. Все последние версии современных браузеров позволяют использовать css3 в полном объеме. Если Вы считаете, что посетители вашего сайта люди прогрессивные и пользуются современными браузерами, которые постоянно обновляют, то Вы смело можете использовать новые технологоии и не заботиться о тех, кто все еще живет в прошлом веке и использует IE5…

  • HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров

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

  • CSS анимация обводки блоков

    Интересные эффекты для границ блоков контента с анимацией, которые вам могут пригодиться при оформлении страниц сайта.

  • Варианты оформления поля Поиска по сайту на CSS

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

  • HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS

    Меню адаптированно к использованию на сайтах под администрированием редакции HostCMS v.5 для вывода элементов каталога товаров. В выпадающем меню также выводится изображение подгруппы.

  • Бесплатный ФРОНТЭНД

    Представляю вашему вниманию бесплатные неоновые эффекты для текста на CSS...

Наши услуги по созданию сайтов

Веб дизайн

Разработка дизайна и создание интернет-сайта.

Поддержка сайта

Поддержка работоспособности. Написание текстов и статей. Наполнение товарами.

Готовый дизайн

Готовые шаблоны интернет-магазинов и корпоративных сайтов на HostCMS.

Контекстная реклама

Настройка и ведение рекламной кампании в Директ