CSS

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

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

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

В данной статье сделаем так называемую бесконечную прокрутку постов(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

Позиционирование элементов - свойство Position

Свойство position является одним из базовых CSS-свойств, которое необходимо понять при изучении вёрстки. В этой статье мы разберём его подробно на примерах.

Свойство z-index и контекст наложения

Свойство z-index c первого взгляда кажется простым, и это не далеко от истины, но чтобы полноценно разобраться в его работе, необходимо узнать о такой концепции, как контекст наложения (stacking context)...

Как отследить клик вне элемента

Хорошая практика для удобства пользователя реализовать закрытие динамического элемента не только при клике на кнопку, а также при клике вне этого элемента

Адаптивная навигация

Навигация - одна из основных составляющих сайта. Она должна быть доступна и удобна для использования на любом устройстве.

Основы адаптивной вёрстки

Рассмотрим основы адаптивной вёрстки, что такое область просмотра (viewport), как использовать @media запросы и некоторые не самые очевидные нюансы

Индикатор прокрутки на 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, поэтому написал несколько стилей для применения в разных макетах.

Сброс CSS стилей Bootstrap Reboot

Существует множество вариантов сбросов стилей CSS. И также много о них написано. Я просто объясню почему я остановился на Bootstrap Reboot

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

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

Стили для placeholder

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

CSS только для Internet Explorer 10+

Добавить CSS только для Internet Explorer 10+

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

Sublime Text

Не работает Emmet после обновления

В моем случае после обновления Emmet в Sublime Text работает некорректно.

Music

Spotify - Cozy Lofi

Всех с наступающими праздниками!

Spotify - Ambulo

Приятная музыка для верстки или просто по настроению

Spotify - Limes

Приятная музыка для верстки или просто по настроению

Spotify - Saib

Приятная музыка для верстки или просто по настроению

Spotify - Idealism

Приятная музыка для верстки или просто по настроению

Spotify в России

Наконец-то Spotify появился в России.

Spotify

Spotify - Cozy Lofi

Всех с наступающими праздниками!

Spotify - Ambulo

Приятная музыка для верстки или просто по настроению

Spotify - Limes

Приятная музыка для верстки или просто по настроению

Spotify - Saib

Приятная музыка для верстки или просто по настроению

Spotify - Idealism

Приятная музыка для верстки или просто по настроению

Spotify в России

Наконец-то Spotify появился в России.

jQuery

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

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

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

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

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

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

JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как отследить клик вне элемента

Хорошая практика для удобства пользователя реализовать закрытие динамического элемента не только при клике на кнопку, а также при клике вне этого элемента

Повышаем производительность при resize, scroll, ...

Некоторые события в браузере происходят с очень высокой частотой. Количество событий при движении курсора, прокрутке страницы, изменении размеров окна браузера, зажатой клавиши и так далее может достигать 100 раз в...

Адаптивная навигация

Навигация - одна из основных составляющих сайта. Она должна быть доступна и удобна для использования на любом устройстве.

Плагин для отображения размеров окна браузера

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

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

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

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

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

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

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

GitHub

Установка GitHub Desktop и его базовое использование

Что такое Git, регистрируемся на GitHub, для чего нужен GitHub Desktop, установим и рассмотрим его базовое использование

Node.js

Node.js - зачем верстальщику и как установить

Зачем HTML-верстальщику Node.js и рассмотрим установку по шагам

Gulp

Используем Gulp для ускорения процесса верстки

Что такое Gulp? Как его установить? Как им пользоваться?

Pug

Pug - шаблонизатор и препроцессор HTML

Знакомимся с Pug - синтаксис и базовые возможности

Stylus

Stylus - препроцессор CSS

Знакомимся со Stylus - синтаксис и базовые возможности

Адаптивность

Адаптивная навигация

Навигация - одна из основных составляющих сайта. Она должна быть доступна и удобна для использования на любом устройстве.

Основы адаптивной вёрстки

Рассмотрим основы адаптивной вёрстки, что такое область просмотра (viewport), как использовать @media запросы и некоторые не самые очевидные нюансы

SVG

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

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

JS

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

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

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

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

Vue

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

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

Axios

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

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