Создание современных сайтов сопровождается использованием анимаций, как для отдельных элементов дизайна, так и целых блоков. Сегодня мы рассмотрим как сделать красивую градиентную обводку блока на одном только 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;
}
Результат
Сложно сказать, почему активно развивающиеся страны третьего мира и по сей день остаются уделом либералов, которые жаждут быть обнародованы. Учитывая ключевые сценарии поведения, реализация намеченных плановых заданий не оставляет шанса для направлений прогрессивного развития. В рамках спецификации современных стандартов, непосредственные участники технического прогресса ограничены исключительно образом мышления.