Archive of posts with category 'HTML'

Как сделать маску для текстовых полей 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