Доброго времени суток, друзья!
Однажды веб серфинг привел меня к этому замечательному коду.
«Замечательность» его (то бишь кода) состоит в практическом использовании переменных в 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); }
Мой вариант можно посмотреть здесь.
А вот еще одна Солнечная система (лучшее из того, что я видел).
Благодарю за внимание.
Счастливого кодинга!
ссылка на оригинал статьи https://habr.com/ru/post/489294/
Добавить комментарий