Birra in HTML, Javascript e CSS

Chi mi conosce lo sa, sono un appassionato di birra.
La birra mi piace berla, studiarla, leggerne la storia sui libri e, qualche volta con scarsi risultati, farla.

Se qualcuno dovesse chiedermi come si crea una birra, risponderei “semplice, basta prendere malto d’orzo, acqua, lievito, luppolo, unire il tutto ed il gioco è fatto”.
In realtà non è proprio così.

Sono quattro ingredienti che, nella loro semplicità, nascondono alchimie, sfumature e caratteristiche ben diverse fra loro; ma che combinati assieme nelle giuste dosi, nel giusto tempo e alle giuste temperature creano una delle bevande più bevute e amate al mondo.

Ora, se dovessi spostare questa mia passione al web, mi sorgerebbe spontanea una domanda:

“Come si crea una birra in HTML, Javascript e CSS?”

Uhmmm, vediamo un po’…

<style>

    .canvas {
background-color: rgba(0, 0, 0, 0.1);
padding: 100px;
    }

    .bar-counter {
border-bottom: 30px solid rgb(142, 111, 85);
position: relative;
width: 300px;
    }



    .bar-counter__overlay {
background-color: rgba(255, 255, 255, 0.1);
bottom: -30px;
height: 30px;
position: absolute;
right: 0;
width: 150px;
    }


Ora creiamo la nostra pinta

    .pint-glass {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 220px solid rgb(159, 207, 235);
margin: 0 auto;
position: relative;
width: 150px;
    }


Ora versiamo la birra


    .beer {
border-left: 17px solid transparent;
border-right: 16px solid transparent;
border-top: 180px solid rgb(252, 212, 53);
bottom: 10px;
left: -12px;
position: absolute;
width: 134px;
    }

Mi raccomando, la schiuma!


    .beer__foam {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 50px solid rgb(255, 255, 255);
bottom: 160px;
position: absolute;
left: -20px;
width: 140px;
    }

La schiuma perfetta si gonfia creando piccole bolle

    .beer__bubble {
background-color: rgb(255, 255, 255);
border-radius: 50%;
border-top: 3px solid rgba(0, 0, 0, 0.1);
height: 60px;
position: absolute;
width: 60px;
    }

    .beer__bubble:nth-child(1) {
bottom: 15px;
left: -4px;
    }

    .beer__bubble:nth-child(2) {
bottom: 30px;
left: 40px;
    }

    .beer__bubble:nth-child(3) {
bottom: 15px;
left: 73px;
    }

    .beer__overlay {
border-top: 220px solid rgba(255, 255, 255, 0.2);
border-right: 20px solid transparent;
bottom: -10px;
position: absolute;
right: -24px;
width: 60px;
    }
</style>

<div class="canvas">
<div class="bar-counter">
<div class="bar-counter__overlay"></div>
<div class="pint-glass">
<div class="beer">
<div class="beer__foam">
<div class="beer__bubble"></div>
<div class="beer__bubble"></div>
<div class="beer__bubble"></div>
</div>
<div class="beer__overlay"></div>
</div>
</div>
</div>
</div>
Ed ecco la nostra birra!
 

Semplice dai, peccato che non si possa bere! 🙁