Archive of posts with category 'HTML'

Постепенное изменение числа до целевого значения

В этой статье разберём частый кейс при вёрстке - постепенное/плавное увеличение числа от некоторого значения до целевого

Вариант бесконечной прокрутки постов

В данной статье сделаем так называемую бесконечную прокрутку постов(Infinite Scroll) используя Intersection Observer API, Vue.js, Axios

Градиентная прозрачность карточек, трансформация курсора при наведении

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

Параллакс эффект на основе плагина Rellax

В данной статье рассмотрим вариант параллакс эффекта, с помощью плагина Rellax

Псевдо 3D эффект при наведении на карточку

В данной статье кратко опишу как добиться такого эффекта карточки при наведении

Вариант простой галереи изображений на Flexbox

Сделаем простейшую галерею изображений, используя Flexbox

Эффект плавного подчеркивания ссылок при наведении

В данной практической статье сделаем интересный эффект плавного подчеркивания ссылок при наведении

Эффект следования за курсором

Сделаем простой эффект следования декоративного элемента за курсором и добавим ему дополнительное поведение при определенном событии (в данном примере при наведении на ссылку)

Навигация по секциям

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

Изменить начертание шрифта при наведении без сдвига соседних элементов

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

Изменяем поведение элементов при наличии точного указателя

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

Как получить соседние элементы без jQuery

В jQuery есть метод siblings(), который позволяет получить соседние элементы. В этой статье посмотрим, как добиться того же результата на чистом JavaScript.

Как сделать маску для текстовых полей input

Частая задача при вёрстке макетов - добавление масок для текстовых полей, чтобы пользователь вводил данные именно в том формате, который необходим

Как сделать простой Preloader при загрузке страниц

Preloader при загрузке страниц чаще всего нужен в том случае, если необходимо, чтобы пользователь начал пользоваться сайтом только после загрузки всех ресурсов (изображения, javascript-код и так далее). Но нужно использовать...

Создаём и используем символьный SVG-спрайт

В данной статье посмотрим, как можно просто и быстро создавать и использовать символьные SVG-спрайты

Вариант модальных окон на JavaScript

В этой практической статье сделаем свою реализацию модальных окон с корректным отображением на любом экране

Вариант вертикального слайдера с превью на основе Swiper

Сделаем адаптивный вертикальный слайдер на основне плагина Swiper с превью, с возможностью переключать слайды, нажимая на превью или кнопками расположенными рядом, потянув за слайды или колесиком мыши. Если вам понадобится...

Плавное изменение высоты блока без jQuery

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

Вариaнт адаптивных вкладок (tabs) на JavaScript

Практическая статья по созданию адаптивных вкладок (tabs), используя JavaScript

Индикатор прокрутки на JavaScript

С нуля напишем индикатор прокрутки страницы на чистом JavaScript.

Скрываем/показываем Header при прокрутке

Как скрывать Header при прокрутке страницы вниз и отображать при прокрутке вверх

Аккордеон меню на jQuery

Напишем простое и универсальное аккордеон меню на jQuery

Подключаем веб-шрифты

Как просто и корректно подключить веб-шрифты

3D эффект карточек на CSS

Практикуем БЭМ, CSS Transforms, CSS Grid, CSS переменные

Выравнивание по низу карточки

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

БЭМ - полный контроль над версткой

Методология БЭМ позволяет более структурировано и гибко верстать независимыми Блоками и в дальнейшем наиболее комфортно поддерживать такую верстку

CSS-переменные: как сделать темную тему

Реализуем темную (и не только) тему с помощью css-переменных и немного JavaScript

Эффект параллакса при прокрутке страницы

Интересный параллакс-эффект c помощью jQuery

Анимация при прокрутке страницы

Анимируем элементы при прокрутке страницы

Заливка текста градиентом или изображением

Эффектный текст с фоновым градиентом или изображением

Как закрепить блок при прокрутке страницы

Закрепляем блоки при прокрутке страницы в пределах родительского блока

Zoom-эффект - масштаб и позиционирование изображения

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

Адаптивные круглые и другие пропорциональные блоки на CSS

Расскажу принцип адаптивных пропорциональных блоков

Эффект размытия фона на CSS

Рассмотрим как добиться такого эффекта размытия

3D-эффект только на CSS

Приятный 3D-эффект только на CSS

Почему размеры блока больше заданных

При указании блоку свойств border или padding, блок становится больше заданных размеров. Используем свойство box-sizing: border-box для исправления такого поведения.

CSS стили для Checkbox

В каждом проекте приходится стилизовать Checkbox, поэтому написал несколько стилей для применения в разных макетах.

Адаптивная сетка для каталога

Как верстать подобного вида адаптивные сетки:

Стили для placeholder

Изменить стандартные стили placeholder для input и textarea