Несколько вариантов оформления текста на основе векторной графики SVG
SVG тег <text> определяет графический элемент, содержащий текст. Как и к любому другому, к нему можно применить градиент, шаблон, окантовку, маску или фильтр.
Установка размера текста и его позиции в зависимости от ширины блока
Два примера установки размера шрифта и его позиции в блоке относительно его ширины. Один на JS, если блок не во всю ширину экрана, другой на CSS, если во всю.
Варианты оформления стрелок влево, вправо, вверх и вниз реализованные SVG графикой
Ранее уже была похожая тема со стрелками, которые реализованы на CSS, но решения с SVG графикой имеют два важных плюса:
5 вариантов различных частиц, которые разлетаются в разные стороны по клику на кнопке
Скрипт, реализующий данные эффекты не требует дополнительные библиотеки и занимает менее 100 строк кода.
Небольшой скрипт на jQuery реализующий поиск и фильтрацию контента по буквам
Данный скрипт убирает контент, который не имеет совпадения с искомыми данными, а также подсвечивает найденное буквосочетание.
Небольшая библиотека CircleType.js для написания текстов по окружности
Библиотека очень легко используется и весит всего 15кб
Варианты стилизации кнопок button и input, а также ссылок
Когда нужно быстро поставить на сайт симпатичную кнопку или ссылку, начинаешь искать готовое решение в поисковиках. И находишь, как правило, сборники, где у кнопки множество классов: один общий для всех, другой для конкретной кнопки, третий для эффекта. Или чересчур сложные решения, с массой тегов. А потом еще кнопку нужно подправить под ссылку и т.д. В этой заметке я постарался максимально все упростить.
Все кнопки имеют красивые ховер эффекты и всего один класс atuin-btn
Наложение фильтра blur для размытия фона под текстом
Для создания такого эффекта требуется наложить один блок, где используется фильтр на другой с таким же фоновым изображением.
Анимированный эффект печатающегося текста с плагином jquery-bubble-text
Плагин jquery-bubble-text может не только печатать текст, но и заменять его на другой.
