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

Боковое меню с иконками на CSS

Фиксированное боковое меню с иконками и выдвигающимися подсказками на CSS

Иконки в данном меню могут иметь любые форматы (графика или шрифт).

Для SVG-иконок предусмотрен вариант с анимацией (пункт 3 в меню).

Читать далее

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

Иконки на фоне кляксы

Иконки и другие изображения на фоне кляксы

Клякса имеет 3 варианта отображения:

  • обычное
  • при наведении мышки
  • при нажатии на нее

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

Читать далее

Красочный фон турбулентности на JS

Эффект с появляющейся рандомной каплей в качестве фона для секции

Фон реализован небольшим JS кодом без добавления каких-либо библиотек и плагинов

Читать далее

Капля случайной формы на JS

Эффект с появляющейся рандомной каплей в качестве фона для секции

Капля реализована небольшим JS кодом без добавления каких-либо библиотек и плагинов

Читать далее

Перелистывающиеся страницы с фотографиями

Эффект перелистывания страниц с фотографиями на CSS

Решение сделано на чистом CSS для 5-ти страниц (фотографий)

Читать далее

3D табы с картинкой и описанием

Трехмерное переключение вкладок, в которых присутствует фотография и ее описание

В данном решении для библиотеки jQuery:

  • Фотография и описание поворачиваются в разные стороны
  • Меню табов создается автоматически через дата-атрибут
  • Цвет фона каждой вкладки и ее пункта меню задается также через дата-атрибут
  • Корректно отображается на мобильных устройствах
Читать далее

Блокирование элементов сайта при включенном AdBlock на CSS

Простое решение на CSS, как отображать разный контент в зависимости от включенного AdBlock

Для того чтобы попросить посетителя сайта отключить AdBlock, вовсе не обязательно мучать его всплывающими окнами, которые кстати можно им же и заблокировать, или писать хитрые скрипты (как в теме про определение показа рекламы), которые можно просто отключить.

Есть решение проще — использовать CSS.

Читать далее

Вращающийся по окружности слайдер

jQuery плагин Rotating-Slider, который вращает слайды по окружности

Для создания круглой формы плагин использует css-свойство clip-path, в результате чего получается окружность из любого количества слайдов

Читать далее

О блоге:

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

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