О блоге:

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

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

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

Замедленная загрузка изображений

Скрипт ComcastifyJS для эмуляции загрузки изображений как на модеме 56к

Очень интересный скрипт, который поможет старожилам интернета вспомнить прошлое и понастальгировать, а остальным посмотреть, как раньше загружали фотографии из сети.

Читать далее

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

Блоки из фигур на CSS

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

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

Все примеры имеют hover-эффект.

Читать далее

Индикатор прокрутки страницы

Индикатор, показывающий глубину прокрутки в процентах и в виде линии.

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

Читать далее

Анимация элементов при прокрутке — WOW.js

Скрипт WOW.js для анимации элементов при прокрутке страницы вниз.

Ранее уже была заметка для добавления анимационных эффектов при прокрутке страницы c jQuery плагином ScrollMe.

Скрипт WOW.js использует библиотеку animate.css, благодаря чему имеет больше возможностей, и не требует никакие библиотеки на JavaScript

Читать далее

Кнопки закрытия на CSS

Варианты оформления закрывающих кнопок (close button) на CSS

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

Читать далее

Определение изменения размера элемента

Библиотека ResizeSensor, помогающая определить, когда элементы на сайте изменяют свой размер

Иногда бывает нужно определить изменение размера какого-нибудь элемента на сайте, чтобы выполнить определённые функции.

Сами по себе размеры не меняются, и действие, которое вызвало их изменение может выполнить и нужные нам операции. Однако, если сделать это затруднительно, то можно использовать библиотеку ResizeSensor.

Читать далее

Полезные ресурсы для работы с изображениями

Ссылки на различные ресурсы на которых можно создать или обработать графические файлы

Речь в данной заметке пойдет не о сайтах, на которых можно сжать или изменить формат изображений (о них будет чуть позже), а именно о создании и обработке.

Читать далее

Установка флажка checkbox карандашом

Оригинальный эффект, который ставит и стирает галочки на полях checkbox карандашом

Данный вариант не использует графику и какие-либо библиотеки. Карандаш сделан линейным градиентом, а галочка закодирована в base64

Читать далее

Круговая пульсация на элементах

Эффект круговой пульсации при наведении на кнопку, ссылку или блок

Красивый hover-эффект с использованием CSS3 и JavaScript

Читать далее