Статьи на тему «Frontend»

 

Иконка Рубрики
2 года назад

UI-компоненты. Ползунок диапазона

Ползунок диапазона позволяет выбрать между минимальным и максимальным значением. Данный элемент повышает интерактивность на сайте. Браузерные ползунки зачастую не подходят, поэтому мы сделаем свой кастомный ползунок.
Frontend 1 290
2 года назад

UI-компоненты. Кастомные радиокнопки на CSS

Радиокнопки используются для выбора одного из множества значений. Если текст радиокнопки короткий, то уместно использовать переключатель. Такой вариант мы реализуем в этой статье с использованием чистого CSS.
Frontend 769
2 года назад

UI-компоненты. Кастомные чекбоксы на CSS

Чекбокс используется для выбора двух состояний у одного параметра. Он может использоваться для выбора элементов списка, например, для выбора нескольких документов, или для активации уведомлений и выбора конкретных ситуаций, в которых их следует отправлять.
Frontend 1 226
2 года назад

UI-компоненты. Переключатель на CSS

Переключатель (его еще называют тумблер) помогает выбрать два состояния. Например, включение или отключение темной темы на сайте. Чисто функционально переключатель — это тот же самый чекбокс.
Frontend 1 447
2 года назад

Как сделать фон градиентом в CSS

Вы ищете способ добавить немного цвета на свой сайт? С помощью всего нескольких строк CSS вы можете создать красивые градиентные фоны, которые выделят ваш сайт среди других.
Frontend 2 126
2 года назад

Создаем карточки товаров на HTML и CSS

Карточки с товарами — неотъемлемая часть любого интернет-магазина. Они позволяют в удобном виде презентовать товары или услуги потенциальному клиенту. В этой статье мы сделаем верстку карточек товаров, выведем их в сетку, а также адаптируем сетку под мобильные устройства.
Frontend 61 241
2 года назад

Форма обратной связи: отправка файла на почту

При создании форм обратной связи часто возникает потребность в отправке файла. Например, мы хотим отправить рисунок, для заказа печати плакатов в копицентре.
Frontend 4 009
2 года назад

Drag and Drop API. Подробное руководство на JavaScript

Если вы хотите получить подробную информацию о том, как использовать JavaScript для создания интерфейсов с drag and drop, вот несколько заметок, которые могут быть полезны.
Frontend 5 033
2 года назад

Как прижать футер к низу страницы с помощью flexbox

Вы пытаетесь прижать этот надоедливый футер к нижней части страницы? Не волнуйтесь! Это руководство покажет вам, как использовать flexbox, чтобы вернуть футер на свое место.
Frontend 3 662
2 года назад

Делаем увеличение картинки при наведении на CSS

Если вы ищете способ добавить интерактивности вашим изображениям, обратите внимание на css. С помощью всего нескольких строк кода вы можете добавить эффект «масштабирования» при наведении курсора на изображение.
Frontend 3 239
2 года назад

Создаем модальное окно для сайта

Модальное окно — это всплывающее окно, которое появляется поверх основного окна. Обычно оно используется для отображения дополнительной информации или для того, чтобы попросить пользователя подтвердить действие.
Frontend 3 800
2 года назад

Создаем слайдер карусель для сайта

Карусельный слайдер — это тип слайдера, который позволяет пользователям прокручивать серию изображений или другой контент. Карусельные слайдеры обычно имеют элементы управления навигацией со стрелками или точками, которые позволяют пользователю прокручивать содержимое.
Frontend 12 051
2 года назад

Делаем кнопку наверх на JavaScript

При скролле страницы на сайте часто возникает потребность вернутся наверх. Например, в контентных сайтах при прочтении статьи необходимо вернуться обратно в меню.
Frontend 6 701
2 года назад

Маска для ввода телефона на JavaScript

Маска телефонного номера — это строка символов, которая используется для представления реального телефонного номера. Маска используется для того, чтобы облегчить пользователям ввод номера телефона в поле формы.
Frontend 17 875
2 года назад

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

В мире веб-дизайна постоянно появляются новые инструменты и технологии, которые помогают упорядочить процесс и сделать его более эффективным. Это особенно верно, когда речь идет о верстке веб-сайта.
Frontend 912
2 года назад

Верстка сайтов для начинающих

При создании веб-сайта одним из наиболее важных аспектов является макет. Макет — это то, как организован ваш сайт и как посетители будут перемещаться по нему.
Frontend 791
2 года назад

Верстка форм авторизации и регистрации по макету Figma

Рассмотрим, как сверстать две формы: одну для авторизации, вторую для регистрации пользователя. Данные формы вы можете адаптировать под себя: дизайн у них довольно простой, так же как сам код.
Frontend 7 112
3 года назад

Пишем темную тему для сайта

В этом уроке мы напишем скрипт на JS для переключения на темную и светлую тему. Мы будем использовать localStorage для сохранения данных о текущей темы, чтобы при перезагрузке страницы и выходе из браузера наша тема не «слетала».
Frontend 1 756
3 года назад

Анимированные табы

В данном уроке мы создадим стильные табы на JS. Сделаем их на чистом JS и CSS, без использования библиотек. В процессе вы поймете как сделать табы, сможете стилизовать их под свои требования.
Frontend 1 823
3 года назад

Адаптивная галерея для сайта

Рассмотрим создание полноразмерной галереи для сайта. В первой части напишем адаптивную сетку на CSS и выведем все фотографии в виде плитки.
Frontend 4 187