Доброго времени суток, друзья!
Однажды веб серфинг привел меня к этому замечательному коду.
«Замечательность» его (то бишь кода) состоит в практическом использовании переменных в CSS, что сильно облегчает написание стилей (использование переменных также обуславливает необычную структуру CSS). И, конечно, тема импонирует весьма — планеты Солнечной системы.
Оригинальный проект написан на Pug и Sass, мы же разберем его на HTML/CSS.
Итак, поехали.
Разметка одной планеты (в данном случае Меркурия) выглядит следующим образом (привожу собственный облегченный вариант):
<div class="card mercury">
<div class="planet">
<div class="atmosphere">
<div class="surface"></div>
</div>
</div>
<div class="info">
<h2 class="title">mercury</h2>
<div class="form">
<div class="item">
<label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">0.034° </span>
</div>
<div class="item">
<label class="label">Day</label><span class="line"></span><span class="detail">1,407 hours</span>
</div>
<div class="item">
<label class="label">Year</label><span class="line"></span><span class="detail">88 days</span>
</div>
</div>
</div>
</div>
Видим следующее:
- Обертку для планеты и информации о ней — .card
- Привязку обертки к конкретной планете — .mercury
- Контейнер для планеты — .planet
- Внутри которого находится контейнер для атмосферы — .atmosphere
- Внутри которого — поверхность планеты — .surface
- Контейнер для информации о планете — .info
- Название соответствующей планеты — .title
- Контейнер для дополнительных сведений — .form
- Контейнер для единицы информации — .item
- Всего у нас три единицы информации:
- В первой содержится информация о наклоне оси планеты и изображение стрелочки
- Во второй — информация о продолжительности дня в часах
- В третьей — о продолжительности года в днях
Да, чуть не забыл — в элементе «head» подключается шрифт:
<link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet">
… и Font Awesome (для стрелочки):
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>
Весь HTML:
<div class="card mercury">
<div class="planet">
<div class="atmosphere">
<div class="surface"></div>
</div>
</div>
<div class="info">
<h2 class="title">mercury</h2>
<div class="form">
<div class="item">
<label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">0.034° </span>
</div>
<div class="item">
<label class="label">Day</label><span class="line"></span><span class="detail">1,407 hours</span>
</div>
<div class="item">
<label class="label">Year</label><span class="line"></span><span class="detail">88 days</span>
</div>
</div>
</div>
</div>
<div class="card venus">
<div class="planet">
<div class="atmosphere">
<div class="surface"></div>
</div>
</div>
<div class="info">
<h2 class="title">venus</h2>
<div class="form">
<div class="item">
<label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">177.3° </span>
</div>
<div class="item">
<label class="label">Day</label><span class="line"></span><span class="detail">5,832 hours</span>
</div>
<div class="item">
<label class="label">Year</label><span class="line"></span><span class="detail">224.7 days</span>
</div>
</div>
</div>
</div>
<div class="card earth">
<div class="planet">
<div class="atmosphere">
<div class="surface"></div>
</div>
</div>
<div class="info">
<h2 class="title">earth</h2>
<div class="form">
<div class="item">
<label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">23.26° </span>
</div>
<div class="item">
<label class="label">Day</label><span class="line"></span><span class="detail">23.9 hours</span>
</div>
<div class="item">
<label class="label">Year</label><span class="line"></span><span class="detail">365.2 days</span>
</div>
</div>
</div>
</div>
<div class="card mars">
<div class="planet">
<div class="atmosphere">
<div class="surface"></div>
</div>
</div>
<div class="info">
<h2 class="title">mars</h2>
<div class="form">
<div class="item">
<label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">25.2° </span>
</div>
<div class="item">
<label class="label">Day</label><span class="line"></span><span class="detail">24.6 hours</span>
</div>
<div class="item">
<label class="label">Year</label><span class="line"></span><span class="detail">687 days</span>
</div>
</div>
</div>
</div>
<div class="card jupiter">
<div class="planet">
<div class="atmosphere">
<div class="surface"></div>
</div>
</div>
<div class="info">
<h2 class="title">jupiter</h2>
<div class="form">
<div class="item">
<label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">3.1° </span>
</div>
<div class="item">
<label class="label">Day</label><span class="line"></span><span class="detail">9.9 hours</span>
</div>
<div class="item">
<label class="label">Year</label><span class="line"></span><span class="detail">4,331 days</span>
</div>
</div>
</div>
</div>
<div class="card saturn">
<div class="planet">
<div class="atmosphere">
<div class="surface"></div>
</div>
</div>
<div class="info">
<h2 class="title">saturn</h2>
<div class="form">
<div class="item">
<label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">26.7° </span>
</div>
<div class="item">
<label class="label">Day</label><span class="line"></span><span class="detail">10.7 hours</span>
</div>
<div class="item">
<label class="label">Year</label><span class="line"></span><span class="detail">10,747 days</span>
</div>
</div>
</div>
</div>
<div class="card uranus">
<div class="planet">
<div class="atmosphere">
<div class="surface"></div>
</div>
</div>
<div class="info">
<h2 class="title">uranus</h2>
<div class="form">
<div class="item">
<label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">97.8° </span>
</div>
<div class="item">
<label class="label">Day</label><span class="line"></span><span class="detail">17.2 hours</span>
</div>
<div class="item">
<label class="label">Year</label><span class="line"></span><span class="detail">30,589 days</span>
</div>
</div>
</div>
</div>
<div class="card neptune">
<div class="planet">
<div class="atmosphere">
<div class="surface"></div>
</div>
</div>
<div class="info">
<h2 class="title">neptune</h2>
<div class="form">
<div class="item">
<label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">28.3° </span>
</div>
<div class="item">
<label class="label">Day</label><span class="line"></span><span class="detail">16.1 hours</span>
</div>
<div class="item">
<label class="label">Year</label><span class="line"></span><span class="detail">59,800 days</span>
</div>
</div>
</div>
</div>
<div class="card pluto">
<div class="planet">
<div class="atmosphere">
<div class="surface"></div>
</div>
</div>
<div class="info">
<h2 class="title">pluto</h2>
<div class="form">
<div class="item">
<label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">122.5° </span>
</div>
<div class="item">
<label class="label">Day</label><span class="line"></span><span class="detail">153.3 hours</span>
</div>
<div class="item">
<label class="label">Year</label><span class="line"></span><span class="detail">90,560 days</span>
</div>
</div>
</div>
</div>
<div class="card sun">
<div class="planet">
<div class="atmosphere">
<div class="surface"></div>
</div>
</div>
<div class="info">
<h2 class="title">sun</h2>
<div class="form">
<div class="item">
<label class="label">Tilt</label><span class="line"></span><i class=" icon fas fa-long-arrow-alt-right"></i><span class="detail">0° </span>
</div>
<div class="item">
<label class="label">Day</label><span class="line"></span><span class="detail">~600 hours</span>
</div>
<div class="item">
<label class="label">Year</label><span class="line"></span><span class="detail">0 days</span>
</div>
</div>
</div>
</div>
Переходим к CSS.
Для объявления переменных в CSS используется следующий синтаксис:
:root {
--имя-переменной: значение;
}
Подробнее о псевдоклассе :root можно почитать здесь.
Переменные для планеты объявляются следующим образом:
:root {
--mercury-image: url(https://thebestcode.ru/media/solarSystem/mercury.jpg);
--mercury-tilt: rotate(0.034deg);
--mercury-day: 1407.6;
--mercury-color: #999;
}
Как видим, объявляются переменные для изображения, угла наклона, продолжительности дня и цвета планеты, соответственно.
Для вращения планет используется такая анимация:
@keyframes planetRotate {
0% {
background-position: 0% center;
}
100% {
background-position: -200% center;
}
}
Применяются переменные в CSS так:
var(--имя-переменной);
Вот как переменные используются для создания стилей планеты:
.mercury .atmosphere {
box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mercury-color);
}
.mercury .surface {
background-image: var(--mercury-image);
transform: var(--mercury-tilt) scale(1.2);
animation: planetRotate calc(var(--mercury-day)*.1s) linear infinite;
}
.mercury .planet::before {
transform: var(--mercury-tilt) scale(1.2);
border-color: var(--mercury-color);
color: var(--mercury-color);
}
.mercury .icon {
transform: var(--mercury-tilt);
color: var(--mercury-color);
}
Обратите внимание, как переменная для продолжительности дня (--mercure-day) используется для определения продолжительности анимации (скорости вращения планеты).
Весь CSS:
:root {
--mercury-image: url(https://thebestcode.ru/media/solarSystem/mercury.jpg);
--mercury-tilt: rotate(0.034deg);
--mercury-day: 1407.6;
--mercury-color: #999;
--venus-image: url(https://thebestcode.ru/media/solarSystem/venus.jpg);
--venus-tilt: rotate(177.3deg);
--venus-day: 5832.5;
--venus-color: #e8cda2;
--earth-image: url(https://thebestcode.ru/media/solarSystem/earth.jpg);
--earth-tilt: rotate(23.26deg);
--earth-day: 23.9;
--earth-color: #b3caff;
--mars-image: url(https://thebestcode.ru/media/solarSystem/mars.jpg);
--mars-tilt: rotate(25.2deg);
--mars-day: 24.6;
--mars-color: #c07158;
--jupiter-image: url(https://thebestcode.ru/media/solarSystem/jupiter.jpg);
--jupiter-tilt: rotate(3.1deg);
--jupiter-day: 9.9;
--jupiter-color: #c9b5a4;
--saturn-image: url(https://thebestcode.ru/media/solarSystem/saturn.jpg);
--saturn-tilt: rotate(26.7deg);
--saturn-day: 10.7;
--saturn-color: #f0e2c4;
--uranus-image: url(https://thebestcode.ru/media/solarSystem/uranus.jpg);
--uranus-tilt: rotate(97.8deg);
--uranus-day: 17.2;
--uranus-color: #b8d8e1;
--neptune-image: url(https://thebestcode.ru/media/solarSystem/neptune.jpg);
--neptune-tilt: rotate(28.3deg);
--neptune-day: 16.1;
--neptune-color: #5e73bb;
--pluto-image: url(https://thebestcode.ru/media/solarSystem/pluto.jpg);
--pluto-tilt: rotate(122.5deg);
--pluto-day: 153.3;
--pluto-color: #c3b6aa;
--sun-image: url(https://thebestcode.ru/media/solarSystem/sun.jpg);
--sun-tilt: rotate(0deg);
--sun-day: 600;
--sun-color: #cc9f4c;
}
@keyframes planetRotate {
0% {
background-position: 0% center;
}
100% {
background-position: -200% center;
}
}
body {
background: #000;
color: #fff;
height: 100%;
width: 100vw;
margin: 10px 0 40px 0;
display: grid;
grid-template-columns: repeat(auto-fill, 190px);
grid-template-rows: repeat(auto-fill, 400px);
grid-gap: 40px;
align-items: center;
justify-items: center;
justify-content: center;
overflow-x: hidden;
font-family: "Major Mono Display";
text-transform: lowercase;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.mercury .atmosphere {
box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mercury-color);
}
.mercury .surface {
background-image: var(--mercury-image);
transform: var(--mercury-tilt) scale(1.2);
animation: planetRotate calc(var(--mercury-day)*.1s) linear infinite;
}
.mercury .planet::before {
transform: var(--mercury-tilt) scale(1.2);
border-color: var(--mercury-color);
color: var(--mercury-color);
}
.mercury .icon {
transform: var(--mercury-tilt);
color: var(--mercury-color);
}
.venus .atmosphere {
box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--venus-color);
}
.venus .surface {
background-image: var(--venus-image);
transform: var(--venus-tilt) scale(1.2);
animation: planetRotate calc(var(--venus-day)*.1s) linear infinite;
}
.venus .planet::before {
transform: var(--venus-tilt) scale(1.2);
border-color: var(--venus-color);
color: var(--venus-color);
}
.venus .icon {
transform: var(--venus-tilt);
color: var(--venus-color);
}
.earth .atmosphere {
box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--earth-color);
}
.earth .surface {
background-image: var(--earth-image);
transform: var(--earth-tilt) scale(1.2);
animation: planetRotate calc(var(--earth-day)*.1s) linear infinite;
}
.earth .planet::before {
transform: var(--earth-tilt) scale(1.2);
border-color: var(--earth-color);
color: var(--earth-color);
}
.earth .icon {
transform: var(--earth-tilt);
color: var(--earth-color);
}
.mars .atmosphere {
box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mars-color);
}
.mars .surface {
background-image: var(--mars-image);
transform: var(--mars-tilt) scale(1.2);
animation: planetRotate calc(var(--mars-day)*.1s) linear infinite;
}
.mars .planet::before {
transform: var(--mars-tilt) scale(1.2);
border-color: var(--mars-color);
color: var(--mars-color);
}
.mars .icon {
transform: var(--mars-tilt);
color: var(--mars-color);
}
.jupiter .atmosphere {
box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--jupiter-color);
}
.jupiter .surface {
background-image: var(--jupiter-image);
transform: var(--jupiter-tilt) scale(1.2);
animation: planetRotate calc(var(--jupiter-day)*.1s) linear infinite;
}
.jupiter .planet::before {
transform: var(--jupiter-tilt) scale(1.2);
border-color: var(--jupiter-color);
color: var(--jupiter-color);
}
.jupiter .icon {
transform: var(--jupiter-tilt);
color: var(--jupiter-color);
}
.saturn .atmosphere {
box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--saturn-color);
}
.saturn .surface {
background-image: var(--saturn-image);
transform: var(--saturn-tilt) scale(1.2);
animation: planetRotate calc(var(--saturn-day)*.1s) linear infinite;
}
.saturn .planet::before {
transform: var(--saturn-tilt) scale(1.2);
border-color: var(--saturn-color);
color: var(--saturn-color);
}
.saturn .icon {
transform: var(--saturn-tilt);
color: var(--saturn-color);
}
.uranus .atmosphere {
box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--uranus-color);
}
.uranus .surface {
background-image: var(--uranus-image);
transform: var(--uranus-tilt) scale(1.2);
animation: planetRotate calc(var(--uranus-day)*.1s) linear infinite;
}
.uranus .planet::before {
transform: var(--uranus-tilt) scale(1.2);
border-color: var(--uranus-color);
color: var(--uranus-color);
}
.uranus .icon {
transform: var(--uranus-tilt);
color: var(--uranus-color);
}
.neptune .atmosphere {
box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--neptune-color);
}
.neptune .surface {
background-image: var(--neptune-image);
transform: var(--neptune-tilt) scale(1.2);
animation: planetRotate calc(var(--neptune-day)*.1s) linear infinite;
}
.neptune .planet::before {
transform: var(--neptune-tilt) scale(1.2);
border-color: var(--neptune-color);
color: var(--neptune-color);
}
.neptune .icon {
transform: var(--neptune-tilt);
color: var(--neptune-color);
}
.pluto .atmosphere {
box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--pluto-color);
}
.pluto .surface {
background-image: var(--pluto-image);
transform: var(--pluto-tilt) scale(1.2);
animation: planetRotate calc(var(--pluto-day)*.1s) linear infinite;
}
.pluto .planet::before {
transform: var(--pluto-tilt) scale(1.2);
border-color: var(--pluto-color);
color: var(--pluto-color);
}
.pluto .icon {
transform: var(--pluto-tilt);
color: var(--pluto-color);
}
.sun .atmosphere {
box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--sun-color);
}
.sun .surface {
background-image: var(--sun-image);
transform: var(--sun-tilt) scale(1.2);
animation: planetRotate calc(var(--sun-day)*.1s) linear infinite;
}
.sun .planet::before {
transform: var(--sun-tilt) scale(1.2);
border-color: var(--sun-color);
color: var(--sun-color);
}
.sun .icon {
transform: var(--sun-tilt);
color: var(--sun-color);
}
.planet::before {
content: '';
position: absolute;
height: 190px;
z-index: -2;
left: 50%;
top: 0%;
border-left: 1px dashed rgba(255, 255, 255, 0.25);
}
.atmosphere {
height: 190px;
width: 190px;
position: relative;
background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 65%);
border-radius: 100px;
overflow: hidden;
}
.surface {
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
background-size: cover;
}
.sun .atmosphere {
box-shadow: 0px 0px 10px 0px var(--sun-color), 0px 0px 1000px -2px var(--sun-color);
}
.info {
width: 100%;
}
.title {
text-align: center;
font-size: 28px;
}
.form {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.item {
display: flex;
align-items: flex-end;
margin-bottom: 5px;
font-size: 14px;
}
.item .icon {
margin: 0 5px;
}
.label {
font-size: 11px;
}
.line {
flex: 1;
margin: 0 5px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}
Мой вариант можно посмотреть здесь.
А вот еще одна Солнечная система (лучшее из того, что я видел).
Благодарю за внимание.
Счастливого кодинга!
WBuilder
Вы обогатили мои знания о CSS, благодарю!
P.S. Не сарказм, про :root действительно не знал, CSS изучал давно и использую его крайне эпизодически.