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

Ищете способ создания простых гистограмм CSS в Интернете? Эта коллекция обязательно поможет, так как она полна бесплатных гистограмм с открытым исходным кодом, разработанных с помощью CSS.

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

1. Диаграммы данных

В этом наборе вы найдете несколько графиков, которые красиво оформлены и очень хорошо выполнены. Разработчик Крис Ольшевски сосредоточился в основном на UX для этих гистограмм, а верхняя часть каждой гистограммы делилась необработанными данными (в данном случае числами-заполнителями).

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

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

2. Гистограмма покемонов

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

Эти панели в стиле покемонов предлагают креативный графический дизайн для Интернета. Каждая полоса опирается на определенную цветовую схему вместе с векторными элементами для глаз отдельных покемонов.

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

3. Анимированный график

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

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

Я думаю, что наиболее впечатляющей частью является то, как все это работает через CSS. Анимация и процентный текст появляются из-за свойств CSS. Сумасшедшие вещи!

4. Минималистская диаграмма

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

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

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

5. Чистые цветовые полосы CSS

Градиенты CSS многое добавляют в сеть, и эта гистограмма — еще один пример градиентов в действии.

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

Чтобы редактировать цвета, вам нужно работать с Sass/SCSS или использовать CodePen для компиляции в необработанный CSS. Но это не слишком сложный график, так что это не должно вызвать особых проблем.

6. Перекладины в шахматном порядке

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

Он спроектирован горизонтально, поэтому полосы загружаются по всему экрану и включают метки внутри гистограммы. Таким образом, общее измерение «уровня навыков» следует по оси X и оставляет место для добавления дополнительных навыков по вертикали.

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

7. Отзывчивая гистограмма

Каждый современный веб-сайт действительно должен реагировать на все устройства. Но на некоторые элементы реагировать труднее, чем на другие.

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

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

8. Ежедневный график CSS

Разработчики любят проверять свои навыки с помощью таких задач, как Daily CSS. Каждый день он извлекает изображения дизайнов пользовательского интерфейса и просит разработчиков воссоздать их в HTML/CSS.

Вы найдете много таких на CodePen, и этот график — один из первых примеров.

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

9. Таблица побед

Еще один классный пример Daily CSS — это диаграмма инвентаризации виноградников, созданная с использованием CSS и некоторых хитрых навыков работы с HTML.

Это довольно уникальная идея, и еще более впечатляет то, что она работает исключительно с помощью CSS. Меня больше всего впечатлил фактический дизайн графика и то, как он идеально отображается в браузере.

Конечно, это также не будет работать на большинстве веб-сайтов, но это свидетельство того, что возможно в современном CSS.

10. Горизонтальные навыки только с CSS

Вы найдете множество гистограмм для измерения навыков в Интернете, но эта от Джеда Троу — настоящее удовольствие.

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

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

Все эти графики предлагают что-то уникальное, но у них также есть одна общая черта: удивительное использование чистого кода CSS.

Вам также может понравиться: 10 библиотек диаграмм данных JavaScript с открытым исходным кодом, которые стоит рассмотреть.