Простые решения по работе с текстами и ссылками

С информацией
Только заголовки

Оформление текста в SVG

Несколько вариантов оформления текста на основе векторной графики SVG

SVG тег <text> определяет графический элемент, содержащий текст. Как и к любому другому, к нему можно применить градиент, шаблон, окантовку, маску или фильтр.

Читать далее

Размер шрифта в зависимости от ширины блока

Установка размера текста и его позиции в зависимости от ширины блока

Два примера установки размера шрифта и его позиции в блоке относительно его ширины. Один на JS, если блок не во всю ширину экрана, другой на CSS, если во всю.

Читать далее

Векторные стрелки на SVG

Варианты оформления стрелок влево, вправо, вверх и вниз реализованные SVG графикой

Ранее уже была похожая тема со стрелками, которые реализованы на CSS, но решения с SVG графикой имеют два важных плюса:

  • Намного проще установить размер стрелки (нужно просто изменить высоту и ширину SVG элемента)
  • Проще их поворачивать в нужную сторону
Читать далее

Разлетающиеся частицы при нажатии на кнопку

5 вариантов различных частиц, которые разлетаются в разные стороны по клику на кнопке

Скрипт, реализующий данные эффекты не требует дополнительные библиотеки и занимает менее 100 строк кода.

Читать далее

Фильтр контента по буквам на jQuery

Небольшой скрипт на jQuery реализующий поиск и фильтрацию контента по буквам

Данный скрипт убирает контент, который не имеет совпадения с искомыми данными, а также подсвечивает найденное буквосочетание.

Читать далее

Вывод текста по окружности

Небольшая библиотека CircleType.js для написания текстов по окружности

Библиотека очень легко используется и весит всего 15кб

Читать далее

Оформление кнопок на CSS

Варианты стилизации кнопок button и input, а также ссылок

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

Все кнопки имеют красивые ховер эффекты и всего один класс atuin-btn

Читать далее

Текст на размытом фоне

Наложение фильтра blur для размытия фона под текстом

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

Читать далее

Печатающийся текст на jQuery

Анимированный эффект печатающегося текста с плагином jquery-bubble-text

Плагин jquery-bubble-text может не только печатать текст, но и заменять его на другой.

Читать далее