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

Вертикальное масштабирование заголовков

Имитация нового шрифта заголовка вертикальным масштабированием через CSS-свойство transform: scaleY()

Простое решение, как получить заголовок, отличный от основного текста, не подключая дополнительных шрифтов и используя только шрифт сайта.

Для реализации применяется CSS-свойство transform: scaleY(), которое растягивает или сужает буквы, придавая шрифту новый вид.

Читать далее

Все иконки RPG Awesome

Полный список всех иконок RPG Awesome с удобным поиском и экспортом

Иконки можно экспортировать

  • Файлом SVG
  • CSS кодом (background-image: url("...");)
  • SVG кодом (<svg>...</svg>)
Читать далее

Изменение элементов при событиях на странице

Изменение любых элементов через CSS при основных событиях на странице

Решение на JavaScript, которое добавляет классы на <body> при основных событиях: DOM построен, страница загружена, скролл, клик, движение мыши, касание и бездействие. Дальше через CSS можно управлять любыми элементами сайта.

Читать далее

Эффект песка на фотографии

Анимированный песочный эффект для изображений с реакцией на движение мыши

Эффект превращает фотографию в сотни тысяч парящих песчинок, которые реагируют на движение курсора мыши. Частицы следуют за указателем, разлетаясь в стороны и возвращаясь обратно, создавая ощущение живого, дышащего изображения.

Читать далее

Список эмодзи

Полный набор эмодзи из категорий: смайлы, люди, животные, еда, активности, путешествия, предметы и символы

Все эмодзи основаны на стандарте Unicode и поддерживаются всеми современными устройствами. Отображение конкретного символа может незначительно отличаться в зависимости от платформы (Windows, macOS, iOS, Android).

Читать далее


Ползунок диапазона с ленточкой

Красивый ползунок с анимированной лентой - Verly Range Slider

Небольшой скрипт Verly Range Slider, работающий поверх нативного <input type="range">.Для отрисовки ленты, которая следует за ползунком с инерцией и плавностью, используется физический движок Verlet.

  • Вес JS-кода — около 17 КБ.
  • Цвет ленты меняется через параметр инициализации.
  • Поддерживается множественное использование на странице.
Читать далее

Смартфон на CSS для демонстрации фото

Макет телефона с подстановкой любых картинок для демонстрации фото и скриншотов

Готовое CSS-решение создаёт реалистичный корпус смартфона с экраном, динамиком, кнопками и отражениями. Внутрь можно подставить любое фото — оно автоматически подстроится под размер дисплея.

Читать далее

Имена цветов на CSS

Спецификация CSS Color Names со значениями в RGB, HEX, CMYK

Спецификация CSS определяет 148 ключевых слов для цветов, которые можно использовать вместо числовых значений. Эти имена охватывают базовую палитру, расширенные оттенки и системные цвета.

Читать далее

Таблица с горизонтальной прокруткой

Адаптивная таблица с drag-скроллом с использованием библиотеки jQuery

Реализация таблицы, которую удобно просматривать на любых устройствах. При переполнении контента по ширине включается плавный drag-скролл.

Читать далее