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

Отредактировано

14К открытий14К показов

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

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

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

			html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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

			<html>
  <head>
    <link rel="stylesheet" href="solar.css"/>
  </head>
  <body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  </body>
</html>

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

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

			@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
body {
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  background-color: #08090A;
}

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

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

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

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

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

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

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

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

			body {
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABA...RDcYAFYAKP/9k=);
}

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

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

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

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

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

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

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

			<body>
  <div id="universe"></div>
</body>

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

			#universe {
  z-index: 1;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-position: center 40%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(data:image/png;base64,iVBORw0KGgo...RK5CYII=); }
}

Результат:

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

14К открытий14К показов

Также рекомендуем

CSS в 2023: что изменилось за последние несколько лет

Рассказали о нововведениях в CSS в 2023 году: какие оказали большое влияние на текущие методы работы с CSS, а какие не изменили ничего.

Работа над Serverless SSR, новости CSS и партия в DnD. Ретроперспектива недели с Сергеем Совой

Запускаем новую рубрику на Tproger. В первом выпуске — Сергей Сова, разработчик, фронтендер и подкастер, делится своими мыслями о Serverless SSR, новостях CSS и мастхев книге.

Дьявол в деталях: интерактивная карта на OpenLayers. Часть 2

Рассказали, как сделать интерактивную карту на сайте с помощью JS-библиотеки OpenLayers: как добавить остановки и отслеживать юзеров.

Зарплаты веб-разработчиков на Западе в 2024 году

IT-блогер Chris Sean выпустил новое видео на английском языке, в котором рассказал о зарплатах веб-разработчиков в западных компаниях.