Passa al contenuto principale

Cat Painting

Il Progetto​

Dipinto di un gatto creato interamente con CSS, utilizzando tecniche avanzate come position: absolute, transform, border-radius e gradienti lineari.

Codice Sorgente​

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>fCC Cat Painting</title>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <main>
        <div class="cat-head">
          <div class="cat-ears">
            <div class="cat-left-ear">
              <div class="cat-left-inner-ear"></div>
            </div>
            <div class="cat-right-ear">
              <div class="cat-right-inner-ear"></div>
            </div>
          </div>

          <div class="cat-eyes">
            <div class="cat-left-eye">
              <div class="cat-left-inner-eye"></div>
            </div>
            <div class="cat-right-eye">
              <div class="cat-right-inner-eye"></div>
            </div>
          </div>
          
          <div class="cat-nose"></div>

          <div class="cat-mouth">
            <div class="cat-mouth-line-left"></div>
            <div class="cat-mouth-line-right"></div>
          </div>

          <div class="cat-whiskers">
            <div class="cat-whiskers-left">
              <div class="cat-whisker-left-top"></div>
              <div class="cat-whisker-left-middle"></div>
              <div class="cat-whisker-left-bottom"></div>
            </div>
            <div class="cat-whiskers-right">
              <div class="cat-whisker-right-top"></div>
              <div class="cat-whisker-right-middle"></div>
              <div class="cat-whisker-right-bottom"></div>
            </div>
          </div>

        </div>
      </main>
  </body>
</html>

L’Esperienza di Sviluppo​

Mi è piaciuto davvero molto! Mi ci è voluto meno di un weekend per completarlo. Non mi sono limitato a eseguire il codice così come richiesto, ma come faccio spesso sono andato a modificare i vari valori e, a volte, ho provato a raggiungere la soluzione in modi diversi rispetto a quelli proposti nell’esercizio. Ho sperimentato creando forme differenti proprio per testare le tecniche che avevo imparato.

L’Approccio Sperimentale​

Nella maggior parte dei casi non riesco ancora a trovare soluzioni alternative funzionanti, non essendo padrone dell’argomento, ma a volte sì. Ne cito una interessante che mi ha fatto capire un concetto importante.

Una Domanda Interessante​

Ho posto al Code Tutor una domanda su una parte del codice:

«Se il risultato è sempre 4rem, perché non scrivere semplicemente:

min-width: 4rem;
max-width: 4rem;

Invece di:

width: 100vw;
min-width: 4rem;
max-width: 4rem;

La risposta: dal punto di vista pratico, funziona allo stesso modo!

È come dire:

  • Metodo lungo: «Voglio tutto il buffet, ma massimo una fetta di pizza e minimo una fetta»
  • Metodo corto: «Voglio una fetta di pizza»

Risultato: in entrambi i casi mangi una fetta di pizza.

La differenza sta nella chiarezza dell’intento e nella compatibilità con browser molto vecchi, ma per questo caso specifico il mio approccio più diretto ha funzionato perfettamente.

Riflessione Importante​

So che questi strumenti tendono a rafforzare bias, come il confirmation bias in questo caso, ma questa volta la domanda ha portato a una comprensione reale di un concetto fondamentale del CSS. Ho scoperto che spesso, in CSS, esistono più modi per ottenere lo stesso risultato.

Cosa Ho Imparato​

  • Positioning assoluto per creare forme complesse
  • Transform e rotate per orientare gli elementi
  • Trucchi con i border per creare forme geometriche
  • Z-index per gestire le sovrapposizioni
  • Gradienti lineari per effetti di colore
  • L’importanza di sperimentare oltre le istruzioni

Prossimo Progetto: Imparare il Responsive Web Design costruendo un Piano