Colored Markers

CSS Color Practice

Codice Sorgente

index.html
styles.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker green">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
      <div class="marker blue">
        <div class="cap"></div>
        <div class="sleeve"></div>
      </div>
    </div>
  </body>
</html>

h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.cap {
  width: 60px;
  height: 25px;
}

.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
  border-left: 10px double rgba(0, 0, 0, 0.75);
}

.cap, .sleeve {
  display: inline-block;
}

.red {
  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
  box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
}

.green {
  background: linear-gradient(#55680D, #71F53E, #116C31);
  box-shadow: 0 0 20px 0 #3B7E20CC;
}

.blue {
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
  box-shadow: 0 0 20px 0 blue;
}

Cosa Ho Imparato:

Sintassi CSS e struttura dei selettori
Utilizzo dello styling basato su classi per componenti riutilizzabili
display: inline-block per layout orizzontali mantenendo le caratteristiche dei blocchi
Comprensione del box model: width, height, margin
Applicazione di diversi modelli di colore:
rgb() per definizioni red-green-blue
rgba() per il controllo della trasparenza
hex per valori di colore compatti
hsl() per il controllo di hue-saturation-lightness
Creazione di gradienti lineari con linear-gradient()
Uso di box-shadow per profondità ed effetti di luce
Strutturazione dell’HTML con div annidati per simulare componenti reali
Importanza di separare le parti visive in blocchi semantici (cap, sleeve, body)

Osservazione Interessante: Imparare a combinare gradienti e ombre per simulare l’illuminazione e gli effetti 3D è stato particolarmente interessante. Mi ha aiutato a consolidare l’idea che il CSS non serva solo per il colore, ma anche per creare atmosfera e dimensione.

Tempo: 3 ore e 5 min di studio + 46 min di documentazione e commenti

Nota Personale: Questo esercizio mi ha ricordato lo skeuomorfismo, uno stile di interfaccia che ho sempre amato. Da bambino avevo un iPod Touch con iOS 5, con un’interfaccia ricca di dettagli visivi realistici e texture che trovavo affascinanti. Ricordo ancora quando ho fatto il jailbreak del dispositivo, un processo che permetteva di personalizzare e modificare il sistema in modi non previsti da Apple. Quell’esperienza ha acceso la mia curiosità per la personalizzazione e il design.

Prossimo: Imparare i Form HTML costruendo un Registration Form

Codice Sorgente​

Codice Sorgente