Анимированный 3D график с помощью CSS3
Всё началось с небольшого эксперимента, в котором я хотел попробовать свои силы в создании 3D графика на чистом CSS. Как именно достичь этого, мы сейчас рассмотрим в данном уроке.
Для начала, вот несколько ключевых требований к нашему графику:
— независимость от фона — адаптивность (независит от количества столбцов) — маштабируемый (как векторная графика) — легко-настраиваемый (цвет, размер, пропорции)
Планировка проекта это самая важная его часть.
Перед тем как собственно начать кодировать, я обычно записываю все потенциальные трудности и задачи с их решениями, которые относятся к данному проекту. Этот процесс я обычно повотряю до тех пор, пока не получаю что-то , что более или менее похоже на стратегический план действий относительно проекта. Вот список задач и решений, которые я составил для данного случая:
Задача #1 — Столбец с двигающимся внутренним блоком
Что мы знаем: — Столбец должен выглядеть как 3D куб с шестью сторонами — Внутренний блок должен иметь возможность двигаться по вертикали. И еще должна быть опция для скрытия блока.
Что нам понадобится: — 1 див для заднего корпуса из 3 сторон (задняя сторона, нижняя и левая) — 1 див для переднего корпуса состоящего из 3 сторон (передняя сторона, верхняя и правая) — 1 див для внутреннего блока сосотоящего из 3 сторон как и Передний корпус, но с нижним z-индексом — 1 див контейнер для размещения всех трёх частей — 1 див контейнер с «overflow: hidden» чтобы скрыть внутренний блок под столбцом в том случае, если он опускается до нуля.
Это дает нам в целом 5 дивов.
Вы можете спросить, зачем нам 2 контейнера? Ну что ж, я постараюсь объяснить. Нам необходим как минимум один контейнер для каждого столбца (чтобы держать передний корпус, задний корпус и внутренний блок). Мы так же знаем, что наш столбец должен быть маштабируемым, и поэтому мы используем проценты, чтобы управлять значением наполнения слобца. А это требует равной высоты между контейнером и одной из сторон столбца. Теперь, вроде бы, все прояснилось, но нет, постойте-ка. Похоже, появилась другая проблема – должна быть возможность спрятать внутренний блок в движении, а это значит, что он должен опуститься «ниже слобца» и быть там невидим. Вы можете предположить, что для этого у нас уже есть решение – «overflow: hidden». И это так, но не для нашего контейнера, так как его высота ниже чем высота столбца. Вот почему мы добавляем еще один контейнер сверху и применяем «overflow: hidden». Надеюсь, что это объяснение помогло.
Задача #2 – Держатель Графика
Держатель графика должен быть: — представлен в 3D, с осями и тремя сторонами (фон, низ, левая сторона) — независимость от фона — адаптивность к количеству столбцов и их атрибутам (высота, ширина и т.д. ) — иметь внешние обозначения осей X и Y
Что нам потребуется: — 1 неупорядоченный список — 1 элемент внутри каждого элемента списка для обозначения оси X — 1 столбец внутри каждого элемента списка — 1 элемент списка с неупорядоченным списком внутри для обозначения оси Y
Но почему же неупорядоченный список? Разве не было бы содержательней использовать определяющий список для такого графика? Возможно, так бы оно и было, но не для данного задания, так как нам необходимо обернуть каждый столбец и его значение оси X в контейнере для их относительного позиционирования.
Звучит хорошо, но опять таки, почему же мы не используем элемент списка взамен второго контейнера столбца? Мы не можем этого сделать, так как нам необходимо разместить обозначение оси X вне графика. И по скольку мы знаем, что второй контейнер столбца скрывает все, что выходит за его рамки, мы будем использовать элементы списка для уверенности, что все детали графика находятся на своих местах.
Выполнение
Теперь, когда у нас готова стратегия работы, давайте превратим ее в код.
Задача #1 — Столбец с двигающимся внутренним блоком
• bar-wrapper – прячет .bar-inner когда он сдвигается вниз ниже столбца • bar-container – позиционирует .bar-foreground, .bar-inner, .bar-foreground соответсвенно и помещает патч для фона в нижний угол • bar-background – создает 3 стороны корпуса: нижнюю, заднюю и левую • bar-inner – самый важный элемент – внутренний блок • bar-foreground – создает 3 стороны корпуса: переднюю, верхнюю, правую
Теперь давайте стилизуем контейнеры.
Заметьте, что мы устанавливаем ширину .bar-container на 12.5em. Это число является суммой широт передней и верхней сторон столбца (в нашем случае это 10+2.5=12.5). Мы так же используем рамки для придания формы треугольнику, и помещаем его в нижний правый угол .bar-container, для того чтобы убедиться, что нижняя сторона столбца «обрезается» при вертикальном движении. Здесь мы используем :before псевдо класс, чтобы сгенерировать этот элемент. В данном уроке мы будем часто использовать :before и :after псевдо классы.
Теперь давайте стилизуем задний корпус:
Как вы уже могли заметить, мы передвинули корпус на 2.5em вверх и вправо. Мы так же наклонили левую и нижнюю стороны на 45 градусов. Обратите внимание, что мы установили первое значение наклона на 0 градусов, а второе значение установили на -45 градусов, и это позволяет нам наклонять данный элемент вертикально.
Теперь давайте стилизуем корпус.
Здесь уже ничего нового, все точно такое же как и в заднем стиле корпуса, просто используем другие направления. Хорошо еще и то, что мы применили эти стили к переднему корпусу и внутреннему блоку. А почему бы и нет, ведь в плане их формы, это одинаковые элементы.
А вот и стили для внутреннего блока, которые мы еще не успели применить.
Ну вот и готовы наши столбцы, теперь перейдем к держателю графика.
Задача #2 – Держатель Графика (с обозначением осей)
Как видите, мы используем неупорядоченный список и размещаем предметы внутри элементов для позиционирования значений осей X и Y.
Сложной частью здесь является фон. Мы используем линейный градиент для заливки контейнера графика и поднимаем его на 2.5em. Почему, спросите вы? А потому что нижняя сторона держателя графика по высоте равняется 2.5em, и наклонена на 45 градусов, так что в правом нижнем углу остается пустое место. Теперь давайте стилизуем нижнюю сторону.
Мы поворачеваем данную сторону на 45 градусов и сдвигаем немного влево, чтоб поставить ее на правильное место.
Займемся стилизацией левой стороны нашего держателя графика.
Здесь тоже ничего необычного, просто повернули элемент на 45 градусов как и везде, и сдвинули его немного вниз.
Вот мы и закончили с этим, теперь давайте добавим немного волшебства к элементам списка, которые держат наши столбики.
Здесь у нас случились следующие изменения: во-первых мы разместили наши столбцы рядом друг с другом. Во-вторых, мы добавили правую границу к последнему столбцу. Таким образом мы будем убеждены, что у нас достаточно места для нижней стороны держателя графика в нижнем правом углу. Если попробуете убрать гранциу, увидите, что я имею в виду.
И вот мы почти законили. Осталось только добавить маркеры оси Y.
Как видите, мы установили ширину держателей наших маркеров на 100%, чтобы иметь возможность рисовать через весь график. Используйте точечную границу для стилизации линий на оси Y, и разместите элементы так, чтобы обозначение оси Y находилось вне графика. А использование :before и :after позволит нам сохранить наш HTML достаточно чистым.
Вот мы и закончили устанавливать все стили для нашего графика. Однако мы не установили некоторые важные переменные – размеры, цвета и значения заливки столбиков! Мы же говорили, что наш график будет кастомозированным? Так что я решил не смешивать переменные с остальным кодом, чтобы вы могли сделать это сами.
В заключение
Давайте еще раз вспомним некоторые CSS техники, которые мы рассмотрели в этом уроке. Сегодня мы использовали: — transform: skew() and transform: rotate() для того, чтобы трансформировать наши элементы таким образом, чтобы они создавали иллюзию 3D объекта — :before и :after псевдо классы для генерирования элементов CSS и для содержания HTML кода в чистоте — :nth-last-child() и :not псевдо классы для фокусировки определенных элементах списка и избегания добавления лишних классов в разметке — линейный градиент вместе с фоновым – позиционирование на частичную заливку элемента фоном — rgba() для цветов с альфа прозрачностью — borders для создания треугольных форм. Искренне надеюсь, что этот урок был вам интересен и полезен.