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

Ночная тема для сайта

Переключение светлой темы сайта на темную и наоборот

Кнопка, которая добавляет и запоминает к тегу <body> класс dark, которым можно перекрасить весь сайт.

Читать далее

Рейтинг со звездочками на CSS

Два варианта рейтинга со звездочками по 5-ти и 10-ти бальной шкале

Для удобства работы с рейтингом звездочки сделаны на radio кнопках с использованием SVG-иконок и на чистом CSS.

Читать далее

Слайдер с точками

Слайдер с точками (горизонтальными линиями) на jQuery

Простой вариант слайдера с переключением его элементов посредством нажатия на точки, расположенные по всей ширине и выглядящие как линии.

Читать далее


Следующая за курсором разноцветная лента

Фоновый эффект на JS с двигающейся за курсором мыши разноцветной ленты

Движение ленты происходит средствами JS в заданной области <canvas> без использования дополнительных библиотек.

Читать далее

Гамбургер SVG-иконки

7 вариантов гамбургер SVG-иконок с анимированным переходом

Переключение иконки по клику происходит через событие onclick, что позволяет обойтись без использования дополнительных JS-кодов

Читать далее

Все иконки FontAwesome 5

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

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

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

Нестандартная защита от копирования

Подмена в копируемом тексте кириллических букв на латинские.

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

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

Читать далее

Модальное окно по таймеру

Вывод на экран модального окна через заданный промежуток времени

Несколько вариантов на JS как в нужное время запустить на странице всплывающее окно.

Читать далее

Фиксированный фон в секции

Простой пример фиксации фонового изображения в секции при прокрутке страницы

Данный эффект напоминает параллакс, но выполнен на CSS и всего одним классом.

Решение очень простое, но подойдет не для всех изображений, в примере на этот счет есть заметка.

Читать далее