Сделаем простой эффект следования декоративного элемента за курсором и добавим ему дополнительное поведение при определенном событии (в данном примере при наведении на ссылку)
В данной статье посмотрим как добиться плавной навигации между секциями, а также напишем JavaScript код, который будет отслеживать активную секцию и в зависимости от этого устанавливать активный класс для соответствующего...
Часто в дизайне активный элемент навигации (или при наведении) выделяют другим начертанием шрифта, например bold. В таком случае, при смене начертания, элемент становится шире и занимает больше пространства, чем раньше,...
Предположим, нам нужно сверстать накладывающиеся друг на друга элементы, которые будут полностью отображаться при наведении. Когда у нас есть курсор, мы без проблем можем навести его на элемент, и при...
В jQuery есть метод siblings(), который позволяет получить соседние элементы. В этой статье посмотрим, как добиться того же результата на чистом JavaScript.
Preloader при загрузке страниц чаще всего нужен в том случае, если необходимо, чтобы пользователь начал пользоваться сайтом только после загрузки всех ресурсов (изображения, javascript-код и так далее). Но нужно использовать...
Сделаем адаптивный вертикальный слайдер на основне плагина Swiper с превью, с возможностью переключать слайды, нажимая на превью или кнопками расположенными рядом, потянув за слайды или колесиком мыши. Если вам понадобится...
Свойство position является одним из базовых CSS-свойств, которое необходимо понять при изучении вёрстки. В этой статье мы разберём его подробно на примерах.
Свойство z-index c первого взгляда кажется простым, и это не далеко от истины, но чтобы полноценно разобраться в его работе, необходимо узнать о такой концепции, как контекст наложения (stacking context)...
Хорошая практика для удобства пользователя реализовать закрытие динамического элемента не только при клике на кнопку, а также при клике вне этого элемента
При верстке карточек товаров для каталога или аналогичных блоков, описание в карточке может значительно отличаться по объему текста. В результате, контент после этого текста располагается на разной высоте, что в...
Рассмотрим очень полезное свойство для изображений - object-fit.
Опишу как достигается zoom-эффект, а также посмотрим другие полезные применения этого свойства
При указании блоку свойств border или padding, блок становится больше заданных размеров.
Используем свойство box-sizing: border-box для исправления такого поведения.
