Статьи по тегу «UI»

 

Иконка Рубрики
4 недели назад

Как сделать галерею-карусель со слайдером на OwlCarousel2 и FancyBox

Галерея-карусель со слайдером — это удобный способ показать изображения на сайте с возможностью листания и полноэкранного просмотра. В этом руководстве мы создадим такой компонент с помощью библиотек OwlCarousel2 и FancyBox.
Frontend 229
8 месяцев назад

Создаем двойной ползунок с помощью плагина NoUiSlider

Создание двойного ползунка (double range slider) с помощью NoUiSlider — это отличное решение, когда нужно дать пользователям возможность выбирать диапазон значений, например, для фильтрации цен или других числовых параметров.
Frontend 789
8 месяцев назад

Форма ввода пароля с проверкой надежности на JavaScript

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

Создаем гибкие выпадающие списки с помощью Virtual Select

Веб-разработчики сталкиваются с необходимостью предоставления пользователям удобных и отзывчивых элементов управления. Один из таких элементов — выпадающий список выбора (select box).
Frontend 362
9 месяцев назад

Горизонтальная галерея-аккордеон на CSS

Это галерея-аккордеон, реализованная с помощью чистого CSS, которая создает адаптивный горизонтальный макет аккордеона, раскрывающий изображения в полном размере при простом наведении курсора.
Frontend 609
2 года назад

UI-компоненты: табы на JavaScript

Создадим простые табы на JavaScript. Мы определим четыре кнопки вкладок и соответствующее содержимое вкладок с помощью HTML. Мы также определяем некоторый CSS для стилизации кнопок вкладок и скрытия содержимого вкладок по умолчанию.
Frontend 988
2 года назад

UI-компоненты. Аккордеон на JavaScript

Напишем пример JavaScript-аккордеона с плавной анимацией. Аккордеон — это тип элемента пользовательского интерфейса, который позволяет пользователям отображать или скрывать дополнительное содержимое, кликая на вкладки аккордеона.
Frontend 1 128
2 года назад

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

Создадим красивую кнопку с градиентом на CSS и со значком Font Awesome. В этом примере код HTML создает кнопку с именем класса gradient-btn и включает значок Font Awesome внутри кнопки.
Frontend 1 146
2 года назад

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

Создадим 5 красивых кнопок со значками на CSS, используя значки Font Awesome. В этом примере код HTML создает 5 кнопок с разными именами классов и включает значки Font Awesome внутри кнопок.
Frontend 2 074
2 года назад

UI-компоненты. Анимированные кнопки на CSS

Создадим 5 красивых анимированных кнопок на CSS3. В этом примере код HTML создает 5 кнопок с разными именами классов. Код CSS стилизует и анимирует кнопки с помощью псевдокласса :hover, который запускает анимацию, когда пользователь наводит курсор на кнопку.
Frontend 1 054
2 года назад

UI-компоненты. Модальное окно на JavaScript

Создадим простое модальное окно на JavaScript. Этот код создает модальное окно, которое появляется при нажатии кнопки «Открыть модальное окно». Модальное окно содержит некоторый текст и имеет кнопку закрытия (представленную символом «x») в правом верхнем углу.
Frontend 1 549
2 года назад

UI-компоненты. Выпадающий список на JavaScript

Напишем выпадающее меню в JavaScript или его еще называют dropdown menu. Этот код устанавливает прослушиватель событий на кнопке раскрывающегося списка, которая переключает класс show в раскрывающемся меню.
Frontend 3 122
2 года назад

Сортировка таблицы с помощью JavaScript

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

UI-компоненты. Индикатор прокрутки страницы на JavaScript

Напишем индикатор прокрутки страницы с использованием JavaScript. Этот код создает фиксированную полосу в нижней части страницы и использует событие прокрутки для расчета процентной доли прокрутки страницы.
Frontend 738
2 года назад

UI-компоненты. Поиск по списку на JavaScript

Напишем код на JavaScript для поиска по списку с комментариями. Этот код создает ввод для поиска и список элементов. Когда пользователь вводит поисковый запрос, скрипт просматривает каждый элемент в списке и сравнивает его с поисковым запросом.
Frontend 1 706
2 года назад

UI-компоненты. Прелоадер для сайта

Простая анимация предварительного загрузчика в виде спиннера, которую можно использовать на своем веб-сайте с помощью JavaScript. В этом коде div preloader действует как фон для анимации счетчика.
Frontend 946
2 года назад

UI-компоненты. Подсказка при наведении

Подсказка при наведении (ее еще называют тултип) показывает блок с текстом при наведении на элемент. Тултип показывает справочную информацию о содержимом элемента.
Frontend 1 023
2 года назад

Таймер обратного отсчета на JS

Таймер обратного отсчета показывает сколько времени осталось до определенного события. Часто таймеры используют на сайтах, чтобы подтолкнуть пользователя к покупке: показывают сколько времени осталось до окончания акции.
Frontend 2 920
2 года назад

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

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

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

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