Создаём Солнечную систему на чистом 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К показов

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

Топ JavaScript-фреймворков для быстрой разработки в 2025

Топ JavaScript фреймворков в 2025. Рассказываем об основных фреймворков для быстрой разработки. Рассматриваем преимущества и недостатки ✔ Tproger

30 самых полезных библиотек Python для веб-разработки в 2024 году

Узнайте о лучших библиотеках Python, которые помогут вам в 2024 году. От анализа данных до веб-разработки — все, что нужно для эффективного программирования на Python.

Редкие языки программирования: зачем они нужны и что на них пишут

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

Стилизация участков текста с помощью CSS Custom Highlight API

В этой статье я расскажу, как с помощью CSS Custom Highlight API можно стилизовать выделенные диапазоны текста, а также разберу теорию на практическом примере.