О блоге:

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

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

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

Удаление и добавление товаров в краткой корзине HostCMS

Решение, позволяющее прибавить, убавить и удалить товар из краткой корзины HostCMS 6

По умолчанию краткая корзина в магазине HostCMS очень скудная, в ней есть только название товара и его цена.

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

Читать далее

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

Оформление кнопок на CSS

Варианты стилизации кнопок button и input, а также ссылок

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

Все кнопки имеют красивые ховер эффекты и всего один класс atuin-btn

Читать далее

Сдвиг частей фотографии в разные стороны

Вертикальный и горизонтальный сдвиг частей изображения в разные стороны на CSS

Пара примеров, как разрезать картинку <img> на несколько частей и произвольно сдвинуть их в нужные стороны.

Решение сделано на CSS без использования скриптов

Читать далее

Слайдер для смены двух фотографий

Пример создания слайдера "До" и "После" с диагональным разделением фотографий

Еще один вариант слайдера "До" и "После", который также может подойти для фонового эффекта секции.

Читать далее

Варианты установки SVG иконки

Установка SVG иконки графическим файлом, на HTML, CSS и JS

Есть несколько методов установки SVG иконки на страницу, и у каждого есть свои плюсы и минусы.

Читать далее

3D карусель Cloud 9 Carousel

jQuery/Zepto плагин Cloud 9 Carousel для создания 3D карусели изображений или блоков

Ранее уже была заметка 3D карусель изображений про похожий слайдер, но Cloud 9 Carousel имеет гораздо больше настроек и возможностей.

Читать далее