mercoledì 19 febbraio 2025

Corso di CSS & Web Design: 6 – Immagini, sfondi e media

6 – Immagini, sfondi e media

1. Proprietà background

CSS consente di gestire lo sfondo di un elemento tramite varie proprietà.

1.1 Colore di sfondo

div {
  background-color: #f2f2f2; /* colore chiaro */
}

1.2 Immagine di sfondo

div {
  background-image: url('immagine.jpg');
  background-repeat: no-repeat; /* evita ripetizioni */
  background-position: center;   /* centro della cella */
  background-size: cover;       /* copre tutta l’area del box */
}

1.3 Gradiente

Lineare:

div {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

Radiale:

div {
  background: radial-gradient(circle, #6a11cb, #2575fc);
}

2. Controllo sulle immagini

2.1 Object-fit

Determina come un’immagine si adatta all’elemento contenitore:

Valore	Funzione
fill	Riempie tutto lo spazio, distorcendo se necessario
contain	Si adatta senza ritagliare
cover	Riempie senza distorsione, ritagliando se necessario
none	Mantiene dimensioni originali
scale-down	Scala verso il basso se necessario

Esempio

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

2.2 Background-size

Controlla la dimensione dell’immagine di sfondo:

div {
  background-size: cover;   /* copre tutta l’area */
  background-size: contain; /* tutta l’immagine visibile */
}

3. Icone e SVG

3.1 Icone

Possono essere inserite come immagini (<img>) o tramite librerie tipo Font Awesome.

<i class="fas fa-home"></i>

3.2 SVG

Immagini vettoriali scalabili:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Vantaggi: scalabilità senza perdita di qualità e controllo tramite CSS.

4. Esercizio svolto: galleria fotografica con hover effect

Obiettivo

Creare una galleria di immagini che cambia stile al passaggio del mouse (hover).

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Galleria CSS</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <div class="gallery">
    <div class="photo"><img src="https://via.placeholder.com/300x200" alt="Foto 1"></div>
    <div class="photo"><img src="https://via.placeholder.com/300x200" alt="Foto 2"></div>
    <div class="photo"><img src="https://via.placeholder.com/300x200" alt="Foto 3"></div>
  </div>
</body>
</html>

CSS (stile.css)

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  padding: 50px;
}

.gallery {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.photo {
  overflow: hidden;
  border-radius: 10px;
}

.photo img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s, filter 0.3s; /* animazione hover */
}

.photo img:hover {
  transform: scale(1.1);      /* ingrandimento */
  filter: brightness(80%);    /* scurisce leggermente */
}

Risultato

Tre immagini affiancate, con spaziatura uniforme.
Effetto zoom e darken al passaggio del mouse.
Immagini adattate al contenitore grazie a object-fit: cover.
Design responsive e moderno.

SILICIO E NUVOLE