Get best of the week

Learning CSS Variables with a Practical Example



Good day, friends!

Once web surfing led me to this wonderful code .

The “greatness” of it (that is, the code) is the practical use of variables in CSS, which greatly facilitates the writing of styles (the use of variables also causes an unusual CSS structure). And, of course, the topic is very impressive - the planets of the solar system.

The original project is written in Pug and Sass, but we will analyze it in HTML / CSS.

So let's go.

The layout of one planet (in this case, Mercury) is as follows (I bring my own lightweight version):

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

We see the following:

  • A wrapper for the planet and information about it - .card
  • Binding a wrapper to a particular planet - .mercury
  • Container for the planet - .planet
  • Inside which is the container for the atmosphere - .atmosphere
  • Inside of which is the surface of the planet - .surface
  • Planet Information Container - .info
  • The name of the corresponding planet is .title
  • Additional Information Container - .form
  • Information Unit Container - .item
  • In total, we have three units of information:
    1. The first contains information about the tilt of the planet axis and the image of the arrow
    2. In the second - information about the length of the day in hours
    3. In the third - about the length of the year in days

Yes, I almost forgot - the font is connected in the head element:

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

... and Font Awesome (for the arrow):

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

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


Let's move on to CSS.

The following syntax is used to declare variables in CSS:

:root {
  ---: ;
}

Read more about the: root pseudo-class here .

Variables for the planet are declared as follows:

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

As you can see, variables are declared for the image, the angle of inclination, the duration of the day and the color of the planet, respectively.

To rotate the planets the following animation is used:

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

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

The variables used in CSS are:

var(---);

Here's how variables are used to create planet styles:

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

Notice how the variable for day length (--mercure-day) is used to determine the duration of the animation (planet rotation speed).

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


My version can be seen here .

And here is another solar system (the best of what I saw).

Thank you for attention.

Happy coding!

More articles:


All Articles