👩🏻‍🚒 🏵️ 🚬 Lernen von CSS-Variablen anhand eines praktischen Beispiels 🚍 ✍🏽 🗂️

Guten Tag, Freunde!

Einmal führte mich das Surfen im Internet zu diesem wunderbaren Code .

Die „Größe“ davon (dh der Code) ist die praktische Verwendung von Variablen in CSS, was das Schreiben von Stilen erheblich erleichtert (die Verwendung von Variablen führt auch zu einer ungewöhnlichen CSS-Struktur). Und natürlich ist das Thema sehr beeindruckend - die Planeten des Sonnensystems.

Das ursprüngliche Projekt ist in Pug und Sass geschrieben, aber wir werden es in HTML / CSS analysieren.

So lass uns gehen.

Das Layout eines Planeten (in diesem Fall Merkur) ist wie folgt (ich bringe meine eigene leichte Version mit):

<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>

Wir sehen folgendes:

Ein Wrapper für den Planeten und Informationen darüber - .card
Binden einer Hülle an einen bestimmten Planeten - Quecksilber
Container für den Planeten - .planet
Im Inneren befindet sich der Behälter für die Atmosphäre - .atmosphere
Im Inneren befindet sich die Oberfläche des Planeten - Oberfläche
Planet Information Container - .info
Der Name des entsprechenden Planeten lautet .title
Zusätzlicher Informationscontainer - .form
Information Unit Container - .item
Insgesamt haben wir drei Informationseinheiten:
1. Die erste enthält Informationen über die Neigung der Planetenachse und das Bild des Pfeils
2. Im zweiten - Informationen über die Länge des Tages in Stunden
3. Im dritten - etwa die Länge des Jahres in Tagen

Ja, ich hätte es fast vergessen - die Schrift ist im head-Element verbunden:

<link href="https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet">

... und Font Awesome (für den Pfeil):

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>

Alles 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>

Fahren wir mit CSS fort.

Die folgende Syntax wird verwendet, um Variablen in CSS zu deklarieren:

:root {
  ---: ;
}

Lesen Sie hier mehr über die: root- Pseudoklasse .

Variablen für den Planeten werden wie folgt deklariert:

:root {
    --mercury-image: url(https://thebestcode.ru/media/solarSystem/mercury.jpg);
    --mercury-tilt: rotate(0.034deg);
    --mercury-day: 1407.6;
    --mercury-color: #999;
}

Wie Sie sehen können, werden Variablen für das Bild, den Neigungswinkel, die Dauer des Tages und die Farbe des Planeten deklariert.

Um die Planeten zu drehen, wird die folgende Animation verwendet:

@keyframes planetRotate {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: -200% center;
    }
}

Die in CSS verwendeten Variablen sind:

var(---);

So werden Variablen verwendet, um Planetenstile zu erstellen:

.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);
}

Beachten Sie, wie die Variable für die Tageslänge (--mercure-day) verwendet wird, um die Dauer der Animation (Planetendrehzahl) zu bestimmen.

Alle 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);
}

Meine Version zu sehen ist hier .

Und hier ist ein anderes Sonnensystem (das Beste von dem, was ich gesehen habe).

Vielen Dank für Ihre Aufmerksamkeit.

Viel Spaß beim Codieren!

Lernen von CSS-Variablen anhand eines praktischen Beispiels

More articles: