🧓🏽 🙌🏽 🛵 Aprendizaje de variables CSS con un ejemplo práctico 🚣🏻 ✍️ 🛡️

¡Buen dia amigos!

Una vez que la navegación web me llevó a este maravilloso código .

La "grandeza" del mismo (es decir, el código) es el uso práctico de variables en CSS, lo que facilita enormemente la escritura de estilos (el uso de variables también causa una estructura CSS inusual). Y, por supuesto, el tema es muy impresionante: los planetas del sistema solar.

El proyecto original está escrito en Pug y Sass, pero lo analizaremos en HTML / CSS.

Entonces vamos.

El diseño de un planeta (en este caso, Mercurio) es el siguiente (traigo mi propia versión ligera):

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

Vemos lo siguiente:

Un contenedor para el planeta e información al respecto - .card
Encuadernar una envoltura a un planeta en particular: mercurio.
Contenedor para el planeta - .planet
En el interior, que es el contenedor de la atmósfera: atmósfera.
Dentro de la cual está la superficie del planeta - .superficie
Contenedor de información del planeta - .info
El nombre del planeta correspondiente es .title
Contenedor de información adicional - .form
Contenedor de la Unidad de Información - .item
En total, tenemos tres unidades de información:
1. El primero contiene información sobre la inclinación del eje del planeta y la imagen de la flecha.
2. En el segundo: información sobre la duración del día en horas
3. En el tercero, aproximadamente la duración del año en días

Sí, casi lo olvido: la fuente está conectada en el elemento principal:

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

... y Font Awesome (para la flecha):

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

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

Pasemos a CSS.

La siguiente sintaxis se utiliza para declarar variables en CSS:

:root {
  ---: ;
}

Lea más sobre la: pseudo-clase raíz aquí .

Las variables para el planeta se declaran de la siguiente manera:

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

Como puede ver, las variables se declaran para la imagen, el ángulo de inclinación, la duración del día y el color del planeta, respectivamente.

Para rotar los planetas se usa la siguiente animación:

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

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

Las variables utilizadas en CSS son:

var(---);

Así es como se usan las variables para crear estilos de planeta:

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

Observe cómo se usa la variable para la duración del día (--mercure-day) para determinar la duración de la animación (velocidad de rotación del planeta).

Todos los 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);
}

Mi versión se puede ver aquí .

Y aquí hay otro sistema solar (lo mejor de lo que vi).

Gracias por su atención.

¡Feliz codificación!

Aprendizaje de variables CSS con un ejemplo práctico

More articles: