О блоге:

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

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

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

Выдвижная боковая панель на CSS

Пример создания выдвижной боковой панели средствами CSS

Данное решение сделано с использованием флажка checkbox и не требует скриптов.

Использовать такую панель можно как угодно, например, для создания меню, социальных сетей, регистрации/авторизации или любой другой информации

Читать далее

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

Адаптивная таблица на Flexbox

Таблица, которая меняет расположение ячеек на узких экранах

Ранее уже была похожая тема: "Адаптивная таблица", но она имела фиксированный размер ячеек и могла использоваться не для всех решений .

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

Читать далее

Цыпленок с вращающимися звездами

Вариант анимированной картинки на SVG с вращающимися вокруг цыпленка звездами

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

Читать далее

Ховер-эффекты с наложенными друг на друга фотографиями

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

Возвращаясь к теме "Сдвиг частей фотографии в разные стороны" сделал еще несколько примеров, как использовать наложенные друг на друга одинаковые фотографии для создания интересных ховер эффектов

Читать далее

Параллакс эффект при движении мыши

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

Данный скрипт не требует никакие библиотеки и занимает всего 6 строчек.

Читать далее