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

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

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

Кнопка, которая добавляет и запоминает к тегу <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 и всего одним классом.

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

Читать далее

О блоге:

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

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