Background, Bordi e Ombre

Bentornato.

Nella lezione precedente hai imparato il responsive design.

Il tuo layout ora capisce i telefoni.

Molto bene.

Oggi rendiamo le cose più rifinite.

Non sovradecorate.

Non “ho scoperto 47 effetti e li ho usati tutti prima di colazione.”

Rifinite.

Lavoreremo con:

background;
bordi;
border radius;
ombre;
card;
pulsanti;
gerarchia visiva.

Sono piccoli dettagli che fanno sembrare una pagina completa.

Senza questi dettagli, un sito può funzionare perfettamente ma sembrare progettato durante un blackout.

Cosa Imparerai

In questa lezione imparerai:

come usare background-color;
come usare background-image;
come creare gradienti;
come usare i bordi;
come arrotondare gli angoli con border-radius;
come usare box-shadow;
come stilizzare card e pulsanti;
come evitare di decorare troppo la pagina.

Perché la Rifinitura Visiva Conta

CSS non riguarda solo il layout.

Il layout decide dove vanno le cose.

La rifinitura visiva decide come si sentono.

Una card semplice funziona.

Una card rifinita sembra intenzionale.

Esempio:

.card {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

Questa semplice combinazione può rendere una sezione moderna e pulita.

Ma attenzione.

Troppe ombre e troppi bordi possono far sembrare la pagina una pila di vassoi di plastica fluttuanti.

CSS dà potere.

Usalo da adulto.

Più o meno.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir css-lesson8
cd css-lesson8
touch index.html
touch style.css

Dovresti avere:

css-lesson8/
  index.html
  style.css

Apri la cartella nel tuo editor.

Costruiremo una piccola pagina servizi con card e hero section.

È pratico.

Puoi usare questo pattern per:

servizi web;
course cards;
progetti portfolio;
sezioni pricing;
landing pages.

In pratica, tutti i posti dove un sito deve smettere di sembrare HTML grezzo con i calzini.

Scrivi l’HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background, Bordi e Ombre</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <nav class="navbar">
      <h1 class="logo">PolishCSS</h1>

      <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">Servizi</a>
        <a href="#">Progetti</a>
        <a href="#">Contatto</a>
      </div>
    </nav>

    <section class="hero-content">
      <p class="eyebrow">CSS Visual Design</p>
      <h2>Fai Sembrare il Tuo Layout Finito</h2>
      <p>
        Background, bordi e ombre aiutano la pagina a sembrare più pulita, strutturata e professionale.
      </p>
      <a href="#" class="button">Esplora gli Stili</a>
    </section>
  </header>

  <main class="page">
    <section class="intro-card">
      <h2>Piccoli Dettagli, Grande Differenza</h2>
      <p>
        I buoni dettagli visivi guidano l’utente. Separano il contenuto, creano profondità e rendono la pagina più facile da capire.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <h2>Background</h2>
        <p>Usa colori di sfondo, immagini e gradienti per creare atmosfera.</p>
      </article>

      <article class="card featured">
        <h2>Bordi</h2>
        <p>Usa i bordi per separare il contenuto e evidenziare aree importanti.</p>
      </article>

      <article class="card">
        <h2>Ombre</h2>
        <p>Usa le ombre con attenzione per creare profondità senza far volare via tutto.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Creato mentre imparo background, bordi e ombre.</p>
  </footer>
</body>
</html>

Questo ci dà:

hero section;
navigazione;
testo hero;
pulsante;
intro card;
tre content cards;
footer.

Ora possiamo farlo sembrare meno uno scheletro e più una vera pagina web.

Nessuna mancanza di rispetto per gli scheletri.

Fanno un lavoro importante.

Inizia con il CSS Base

Apri style.css e aggiungi:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

Questo ci dà un punto di partenza pulito.

La pagina ha:

dimensioni prevedibili;
nessun margin predefinito del body;
font semplice;
background chiaro;
link puliti.

Ora possiamo aggiungere la rifinitura visiva.

Lentamente.

Come condire una zuppa.

Non come rovesciare dentro tutto il barattolo del sale.

Background Color

La proprietà background-color imposta lo sfondo di un elemento.

Esempio:

body {
  background-color: #f3f4f6;
}

Puoi usarla sulle sezioni:

.hero {
  background-color: #111827;
}

Aggiungi questo:

.hero {
  background-color: #111827;
  color: white;
}

Ora la hero ha uno sfondo scuro.

Questo crea contrasto.

La hero sembra una sezione iniziale forte.

Una buona hero dovrebbe dire:

“Benvenuto.”

Non:

“Sono stata messa qui per sbaglio da HTML.”

Gradienti di Sfondo

CSS può creare gradienti senza immagini.

Esempio:

background: linear-gradient(135deg, #111827, #1e3a8a);

Aggiungi questo a .hero:

.hero {
  background: linear-gradient(135deg, #111827, #1e3a8a);
  color: white;
}

Ora lo sfondo della hero passa dal grigio scuro al blu.

I gradienti sottili possono sembrare moderni.

Ma non esagerare.

Un gradiente dovrebbe sussurrare.

Non arrivare con gli occhiali da sole urlando “sono design!”

Stilizza la Navbar

Aggiungi:

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Ora la navigazione è allineata.

Il logo è a sinistra.

I link sono a destra.

Questo è familiare dalle lezioni precedenti.

CSS non è sempre nuovo caos.

A volte è vecchio caos con una giacca migliore.

Stilizza il Contenuto Hero

Aggiungi:

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #bfdbfe;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #dbeafe;
  font-size: 20px;
  line-height: 1.7;
}

La hero ora ha:

contenuto centrato;
titolo grande;
piccola label uppercase;
paragrafo leggibile.

letter-spacing dà alla label un aspetto più pulito.

Usalo con attenzione.

Troppo letter spacing fa sembrare le parole come se si stessero allontanando lentamente l’una dall’altra.

Bordi

I bordi creano separazione visibile.

Esempio:

.card {
  border: 2px solid #e5e7eb;
}

Un border ha:

width;
style;
color.

Esempio:

border: 2px solid #e5e7eb;

Puoi usare i bordi su card, pulsanti, sezioni e immagini.

I bordi sono utili.

Ma troppi bordi possono rendere il design pesante.

Un bordo dovrebbe aiutare l’utente a capire la struttura.

Non far sembrare la pagina una prigione di spreadsheet.

Border Radius

border-radius arrotonda gli angoli.

Esempio:

.card {
  border-radius: 18px;
}

Aggiungi gli stili per pagina e card:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
}

Ora le card sembrano più morbide e moderne.

Gli angoli netti non sono sbagliati.

Ma gli angoli arrotondati spesso sembrano più amichevoli.

Come se la pagina avesse preso un caffè e deciso di non essere aggressiva.

Box Shadow

La proprietà box-shadow aggiunge un’ombra dietro un elemento.

Esempio:

.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

I valori significano:

horizontal offset
vertical offset
blur
color

Esempio:

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

Questo significa:

nessun movimento orizzontale;
ombra spostata 10px verso il basso;
blur dell’ombra di 25px;
colore nero con bassa opacità.

Aggiungi:

.intro-card,
.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

Ora le card hanno una profondità sottile.

Sottile è la parola chiave.

Un’ombra deve supportare il design.

Non sembrare che la card stia cercando di scappare dalla gravità terrestre.

Card Featured

Facciamo risaltare una card.

Aggiungi:

.featured {
  border-color: #2563eb;
  background-color: #eff6ff;
}

Questo dà alla card featured:

bordo blu;
sfondo azzurro chiaro.

Semplice.

Chiaro.

Non urlato.

Un elemento featured deve essere evidente.

Non comportarsi come se avesse vinto una gara di costumi neon.

Stile del Pulsante

Ora stilizza il pulsante.

Aggiungi:

.button {
  display: inline-block;
  background-color: white;
  color: #1e3a8a;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.button:hover {
  transform: translateY(-2px);
}

Questo pulsante ha:

sfondo bianco;
testo blu;
forma arrotondata;
ombra;
piccolo movimento hover.

Gli effetti hover possono rendere i pulsanti più interattivi.

Ma non farli saltare come rane nervose.

Un piccolo movimento basta.

Aggiungi Transitions

Il movimento hover sarà più bello con transition.

Aggiungi:

.button,
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.1);
}

Ora le card si sollevano leggermente al passaggio del mouse.

Questo dà una sensazione interattiva piacevole.

Di nuovo, tienilo sottile.

Se ogni card salta in modo drammatico, la pagina inizia a sembrare un parco di tappeti elastici.

Divertente per i bambini.

Non sempre ideale per il web design.

CSS Completo

Il tuo style.css dovrebbe essere così:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

.hero {
  background: linear-gradient(135deg, #111827, #1e3a8a);
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #bfdbfe;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #dbeafe;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: white;
  color: #1e3a8a;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.intro-card h2,
.card h2 {
  margin-top: 0;
}

.intro-card p,
.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.1);
}

.featured {
  border-color: #2563eb;
  background-color: #eff6ff;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

@media (max-width: 800px) {
  .hero-content h2 {
    font-size: 42px;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero-content {
    padding: 56px 20px 72px;
    text-align: left;
  }

  .hero-content h2 {
    font-size: 34px;
  }

  .hero-content p {
    font-size: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .intro-card,
  .card {
    padding: 24px;
  }
}

Salva il file.

Aggiorna il browser.

Ora dovresti vedere:

una hero con gradiente;
navigazione stilizzata;
card arrotondate;
ombre leggere;
una card featured;
un pulsante rifinito;
effetti hover;
layout responsive.

La pagina dovrebbe sembrare più completa.

Non perché abbiamo aggiunto decorazioni casuali.

Ma perché abbiamo usato dettagli visivi con uno scopo.

Questa è la differenza tra design e lanciare coriandoli CSS.

Errori Comuni

Troppa Ombra

Male:

.card {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

È troppo forte per una card normale.

Sembra drammatica.

Troppo drammatica.

Come se la card avesse un’identità segreta da cattivo.

Meglio:

.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

Le ombre piccole di solito bastano.

Troppi Bordi

I bordi sono utili, ma non tutto ha bisogno di un bordo.

Se ogni sezione, card, immagine, pulsante, titolo e paragrafo ha un bordo, la pagina diventa rumorosa.

Usa i bordi per chiarire la struttura.

Non per mettere ogni elemento in gabbia come un piccolo animale digitale.

Contrasto Debole

Non mettere testo con poco contrasto su sfondi colorati.

Male:

.hero p {
  color: #9ca3af;
}

su sfondo blu scuro può essere troppo debole.

Meglio:

.hero p {
  color: #dbeafe;
}

Prima leggibile.

Poi bello.

Bello ma illeggibile è solo confusione decorativa.

Pratica

Crea una sezione servizi con tre card.

Ogni card dovrebbe avere:

titolo;
breve paragrafo;
border;
border radius;
ombra sottile;
effetto hover.

Rendi una card featured.

Usa:

background-color;
border;
border-radius;
box-shadow;
transition;
transform.

Mantieni il design pulito.

Non decorare tutto come una torta di compleanno che litiga con un arcobaleno.

Mini Sfida

Crea una sezione pricing con tre piani:

Basic;
Standard;
Premium.

Usa:

sfondi bianchi per le card;
ombre sottili;
angoli arrotondati;
bordo blu per Premium;
pulsante dentro ogni card;
effetto hover su card e pulsanti.

Rendila responsive:

tre colonne su desktop;
due colonne su tablet;
una colonna su telefono.

Questo è un vero pattern da landing page.

Puoi riusarlo per i tuoi servizi.

Sì, è utile.

CSS finalmente paga l’affitto.

Riassunto

Oggi hai imparato che:

background-color imposta gli sfondi degli elementi;
i gradienti possono creare hero sections moderne;
i bordi aiutano a separare ed evidenziare contenuti;
border-radius arrotonda gli angoli;
box-shadow crea profondità;
le ombre dovrebbero essere di solito sottili;
gli effetti hover fanno sembrare gli elementi interattivi;
le transitions rendono i cambiamenti più fluidi;
la rifinitura visiva deve supportare l’usabilità;
la decorazione senza scopo diventa rumore.

Il buon design non significa aggiungere di più.

Significa aggiungere le cose giuste.

Una piccola ombra.

Un bordo pulito.

Un buon background.

Abbastanza spacing.

Spesso è tutto ciò che serve.

CSS non deve urlare.

A volte deve solo pettinarsi.

Prossima Lezione

Nella prossima lezione impareremo transitions e semplici animazioni.

Faremo muovere gli elementi in modo fluido.

Non come un circo.

Come un sito professionale con buone maniere.