О блоге:

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

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

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

Слайдер с меняющимися фото на CSS

Слайдер с меняющимися фотографиями и их описанием на чистом CSS

Слайдер выполнен без применения скриптов с использованием СSS-свойства animation

Читать далее

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

Блок-секция для лицензий

Оформление блок-секции для лицензий, сертификатов или других вертикальных фотографий на CSS

Данное решение не является универсальным и рассчитано для четырех фотографий. При изменении их количества или размеров нужно будет корректировать стили.

Читать далее

Отложенная загрузка Яндекс карты и виджета ВК

Отложенная загрузка скриптов на примере Яндекс Карты и виджета группы ВКонтакте

Внешние скрипты, такие как карты, виджеты соц сетей, чаты, например JivoSite, или сторонние формы лучше подключать на страницу не сразу, а через определенное время и действие (в данном примере после прокрутки страницы).

В этой теме рассмотрено подключение таким образом Яндекс карты и виджета группы ВКонтакте

Читать далее

Сценические волны на JS

Фоновый эффект, создающий сценические волны в заданном блоке.

Эффект основан на WebGL, а скрипт, реализующий его, занимает всего 18кб без сжатия.

Читать далее

Плюс и минус для поля input

Создание и оформление кнопок плюс и минус для поля <input>

Небольшой скрипт на jQuery, который при нажатии на соотвествующую кнопку, прибавляет и отнимает единичку в текстовом поле.

Также в этой теме есть несколько вариантов оформления этих кнопок.

Читать далее

Аккордеон на CSS

Вариант создания аккордеона на чистом CSS

2 примера создания аккордена без использования скриптов.

Один работает с использованием радиокнопок <input type="radio" /> , а другой с флажками <input type="checkbox" />

Читать далее

Радиокнопки — карточки

Оформление переключателей radio в виде карточек для тарифов или другой информации

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

Читать далее