Анимированная рамка с градиентом с помощью SVG
В общем, когда-то давно была задача сделать рамку вокруг кнопки с градиентом, оказалось, что это не так просто. Пробовал сделать с помощью 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>');
}
Рабочий пример анимированной рамки вокруг текста с градиентом с использованием SVG
Bordered
Уменьшаем вес файлов HTML — для этого убираем все переносы и лишние пробелы, а так…
Хотелось бы в двух словах рассказать, как настроить Source Maps для GULP 4, но не…
Для оптимизации запросов на сервер можно объединить иконки и небольшие картинки, которые используются в css,…
В общем, перепробовал десятки разных плагинов и настроек, но .jpg совсем не оптимизировались, а иногда…