Java, UX, HTML, CSS, WEB-design

10 макетов пользовательского интерфейса календаря с открытым исходным кодом, созданных с помощью CSS

[ad_1]

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

Изучив CodePen, я организовал самые лучшие пользовательские интерфейсы календаря, которые я смог найти, которые были созданы специально для веб-сайтов. Все эти календари работают на CSS для интерфейса, хотя некоторые добавляют функциональность JavaScript для создания интересных интерактивных функций.

Взгляните на эти фрагменты и посмотрите, что вы думаете!

НЕОГРАНИЧЕННЫЕ ЗАГРУЗКИ: шаблоны электронной почты, администратора, целевой страницы и веб-сайта

Только начиная с $16.50 в месяц!

Концепция пользовательского интерфейса красочного календаря

См. Концепцию цветного календаря только для стилуса Pen CSS от Дэвида Хуршида (@davidkpiano) на CodePen.default

Это первое демо действительно привлекло мое внимание своей яркой цветовой гаммой и безупречным стилем.

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

Идея на самом деле возникла из кадра на Dribbble и была воплощена в жизнь разработчиком Дэвидом Хуршидом.

Безусловно, это уникальный подход к дизайну календаря, и эта цветовая схема вошла в книгу рекордов.

SVG-сезоны

См. сезонный календарь Pen SVG с анимированным заголовком от Joke Gysen (@keukenrolletje) на CodePen.default.

Мы часто связываем месяцы с сезонами, и большинство печатных календарей отражают это. Так почему бы не привнести это сезонное очарование и в свои цифровые календари?

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

Мне очень нравится анимация выбора даты, так как она имитирует действие кого-то, рисующего дату. По ощущениям это как печать без бумаги!

Мобильная калибровка только с CSS

Концепция этого дизайна более чем невероятна. Он работает исключительно на CSS и позволяет вам выбрать диапазон дат в пользовательском интерфейсе мобильного календаря, а затем выбрать все, что вы хотите запланировать на эту дату (встречи, отпуска и т. д.).

Но поскольку это соответствует идее пользовательского интерфейса мобильного приложения, это, вероятно, не самый убедительный аргумент в пользу CSS.

В любом случае, реализация великолепна, и я до сих пор поражен, как это работает, используя только HTML и CSS.

Виджет календаря

См. Виджет Pen Calendar от Ciprian Ionescu (@ciprianionescu) на CodePen.default

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

Разработчик Чиприан Ионеску использует маленькие точки, чтобы указать, когда что-то сохраняется в определенную дату.

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

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

Полноэкранный интерфейс плоского календаря

См. полноэкранный плоский календарь Pen от Ricky Eckhardt (@rickyeckhardt) на CodePen.default

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

Он работает на чистом CSS, но чтобы высота идеально соответствовала контейнеру, Рикки использовал необходимый JavaScript. Вы можете обойти это, если вам не нужно, чтобы высота соответствовала 100%, и вместо этого вы могли бы установить отступы по умолчанию для элементов календаря.

Все еще довольно крутой эффект, и он даже напоминает мне классический пользовательский интерфейс Календаря Google.

Квадратные блоки

Этот пользовательский календарь на самом деле основан на более раннем снимке, опубликованном на Dribbble еще в 2009 году.

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

И это на 100% чистый CSS, так что вы можете запустить его на любом сайте без написания скриптов.

Перевернуть анимацию

См. анимацию Pen Calendar Flip от Габриэля Коломбо (@gabrielcolombo) на CodePen.default

Вы не слишком часто видите пользовательские 3D-анимации в календарях. Но этот довольно уникален, потому что дизайн основан на чистом CSS, а анимация флипа выполняется как пользовательский метод jQuery.

Если вы щелкнете по любому из дней в календаре, он выполнит эффект 3D-переворота, чтобы повернуться на обратную сторону. Оттуда вы можете ввести данные для планирования событий или расписания.

Реалистичный планировщик

См. Pen Calendar от Benjamin (@maggiben) на CodePen.default

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

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

Обратите внимание, что дни не кликабельны, а этот календарь не очень интерактивен. Но в качестве общей базы для начала проектирования я сторонник этой концепции.

Пользовательский интерфейс семантического календаря

См. Pen Semantic UI — календарь от Ким Чен Ира (@nijin39) на CodePen.default

С помощью фреймворка Semantic UI можно создать множество интересных вещей. Без сомнения, этот календарь является одним из таких примеров.

Большинство элементов интерфейса предназначены только для демонстрации, но функции сортировки календаря работают именно так, как вы ожидаете. И поскольку это работает исключительно на семантическом пользовательском интерфейсе, весь дизайн основан на этой таблице стилей по умолчанию.

Кто знал, что такой мощный дизайн может получиться из такой маленькой библиотеки внешнего интерфейса?

Календарь Angular.js

См. Pen FlexCalendar от Russian Rebouças (@Russian60) на CodePen.default

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

И этот пользовательский интерфейс календаря под названием FlexCalendar — действительно классный пример, работающий на Angular. Он не позволяет вам добавлять пользовательский контент или хранить что-либо в локальной базе данных JSON или что-то еще сумасшедшее.

Но он работает как интерактивный календарь и работает исключительно на библиотеке Angular.js.

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

Альтернативный интерфейс темного календаря

См. Календарь, реагирующий на перо, автор Kenny Sing (@KennySing) на CodePen.default.

Большинство этих календарей имеют типичный белый фон, с которым мы знакомы. А как насчет темного пользовательского интерфейса календаря?

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

Он работает на чистом CSS-коде и имеет несколько довольно изящных эффектов при наведении курсора. Кроме того, все это вписывается в полноэкранный дизайн, так что это, вероятно, один из самых универсальных календарей, которые вы найдете.

Я не могу сказать, что какая-либо из этих демонстраций будет полезна для средства выбора даты U, но они предлагают отличные отправные точки для разработки собственного календаря на основе CSS.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.

[ad_2]
Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — 10 макетов пользовательского интерфейса календаря с открытым исходным кодом, созданных с помощью CSS

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье 10 макетов пользовательского интерфейса календаря с открытым исходным кодом, созданных с помощью CSS

Название: 10 макетов пользовательского интерфейса календаря с открытым исходным кодом, созданных с помощью CSS . Краткое описание: [ad_1] ⭐ Создание полноценного пользовательского и . Дата публикации: 21.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»