Создаём Солнечную систему на чистом CSS3. Часть первая. Начальный этап, готовим сцену и фон

solarmini2

Анимированная Солнечная система на демке ниже — это настоящее произведение искусства. В этом цикле статей мы подробно рассмотрим все этапы её создания, шаг за шагом разобрав весь CSS-код, и познакомимся с кодированием изображений base64, keyframe-анимацией и 3D-преобразованиями. 

See the Pen CSS 3D Solar System by Julian Garnier (@juliangarnier) on CodePen.

Готовим сцену: CSS Reset и Prefixtree

Прежде чем мы начнём писать CSS-код для наших анимаций, нужно сбросить все стили, предоставленные браузером, поскольку не везде они одинаковы. Меняться могут свойства текста, отступы и границы. Этот процесс называется сбросом CSS (CSS Reset). Приведённый ниже код не влияет на нашу анимацию и сбрасывает даже больше элементов, чем мы будем использовать, но этот шаблонный код лучше использовать во всех ваших проектах.

Кроме того, будет полезно использовать библиотеку Prefix Tree CSS, которая позволяет везде использовать CSS-свойства без префиксов и добавляет нужные для каждого браузера самостоятельно. Таким образом, нам не нужно постоянно учитывать всевозможные старые браузеры, что экономит время. Давайте начнём писать наш HTML:

Мы добавили ссылки на Prefix Tree и наш файл CSS.

Также нужно установить базовый шрифт для нашего анимационного проекта:

Используя утверждение @import, мы можем загружать CSS-код из внешних файлов. В нашем случае мы будем использовать один из шрифтов Google Fonts.

Добавляем фоновое изображение, используя кодирование Base64

Первым, что мы сделаем, будет звёздный фон нашей системы. Сделать это можно тремя способами:

  • Добавив элемент <img> и растянув его на всю страницу;
  • Добавив CSS-правило background-image, ссылающееся на внешний файл с изображением, в элемент <body>;
  • Добавив в элемент <body> CSS-правило background-image, используя base64-закодированное изображение.

Добавление элемента <img> приведёт к лишнему обращению к серверу и дальнейшему захламлению HTML. Кроме того, этот элемент нельзя повторять, в отличие он фоновых изображений.

Добавление внешнего файла в качестве фона также приведёт к лишней загрузке данных, поэтому мы будем использовать кодирование base64. Воспользуемся следующим изображением размера 500×500, весящим примерно 15 КБ:

starfield

Закодировать его base64-кодом можно при помощи различных инструментов. Загрузите изображение, получите строку Base64 и вставьте её в ваш CSS-код:

(Длина нашей строки — примерно 18 тысяч символов, поэтому мы сократили её.)

Это — одна из полезных фич CSS3. Вы можете предоставить инструкцию data: внутри функции url() в background-image, где вы можете задать MIME-тип изображения (image/jpeg в нашем случае, но можно использовать image/png и другие) и указать base64-закодированные данные изображения.

Вот что у нас получилось:

See the Pen CSS 3 Solar System, Step 1 by Independent Software (@independent-software) on CodePen.

Добавляем солнечный свет, используя прозрачный PNG-файл и свойство background-size

В демке участвует дополниельное фоновое изображение, симулирующее солнечный свет (который будет нужен, когда мы добавим Солнце), источник которого находится в центре системы. Для получения этого эффекта мы воспользуемся изображением с альфа-каналом, выглядящим так:

flare-750x462

Добавим ещё один HTML-слой для нашего фона, который будет накладываться на звёздное небо.

Затем нам нужно добавить CSS-правила для <div>‘а #universe, чтобы он заполнил весь экран. Фоновое изображение снова добавляется при помощи base64 и растягивается на всё доступное пространство. Для этого мы используем новое свойство CSS3, background-size. Исходя из спецификации W3C, вы можете установить background-size в cover для пропорционального масштабирования фонового изображения таким образом, что покрывается вся видимая область, а часть изображения может за неё выйти. Именно это нам и нужно. Ещё один вариант —  contain, что отмасштабирует изображение так, чтобы и его длина, и ширина помещались в доступной зоне. В конце концов, можно просто поиграться с процентными соотношениями длины и ширины.

Результат:

See the Pen CSS 3 Solar System, Step 2 by Independent Software (@independent-software) on CodePen.

Неплохо для HTML-страницы, содержащей всего один элемент!

Перевод статьи «Making of the CSS 3 solar system animation»Иван Бирюков, страж правописания