26.04.2019
В общем, когда-то давно была задача сделать рамку вокруг кнопки с градиентом, оказалось, что это не так просто. Пробовал сделать с помощью SVG, но не получилось. А недавно я посетил конференцию KharvivCSS и на первом же докладе Lea Verou рассказала, как правильно использовать SVG в CSS.
То, что мне нужно было сделать (без использования SVG, на чистом CSS задать рамке градиент нельзя):
Bordered
Самую простую svg можно использовать и в CSS.
<svg> <rect width="100%" height="100%" style="stroke: black; stroke-width: 4px; fill: none;" /> </svg>
Но для использования SVG в CSS нужно учесть ряд моментов:
- Вы можете встроить SVG в свой CSS с URI данными, и вам не нужно декодировать символы.
- Вы можете иметь многострочный URI данных, экранируя каждую строку с помощью
\
. - Вы можете использовать эти данные URI для создания изображений из символов.
- Вы даже можете создавать анимированные фоны с помощью CSS-анимации внутри встроенного SVG.
- Отсутствие
viewBox
или размеров позволяет фону SVG занимать весь элемент. stroke-dasharray
позволяет создавать кастомные пунктирные рамки.stroke-dashoffset
позволяет перемещать их и является анимируемым.- SVG поддерживает градиентные штрихи, хотя и с громоздким синтаксисом.
- Вы можете применить их к элементам HTML через URI данные!
- Вы должны экранировать
#
как%23
при указании цвета, потому что это зарезервированный символ в URL.
Пример кода для анимированной рамки с градиентом с помощью SVG
Простой HTML код:
<h3 class="bordered bordered-animated">Bordered</h3>
Основная часть правил CSS для создания анимированной рамки вокруг текста (на самом деле рамка создается с помощью свойства background
и SVG):
.bordered{ padding: .4em .8em; background: url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg">\ <style>\ @keyframes dashes {\ to {stroke-dasharray: 50 10}\ }\ @keyframes marching-ants {\ to { stroke-dashoffset: -60px; }\ }\ </style>\ <linearGradient id="g" gradientTransform="rotate(45)">\ <stop stop-color="gold" />\ <stop stop-color="%230ac" offset="1" />\ </linearGradient>\ <rect width="100%" height="100%" \ stroke="url(%23g)" stroke-width="10" stroke-dasharray="200 0" fill="none"\ style="animation: dashes 3s 2s forwards, marching-ants 1s 2.1s linear infinite;" \ />\ </svg>'); }