In questa lezione affronteremo i seguenti argomenti:
• Approfondire le tecniche avanzate di gestione dei colori in CSS3.
• Utilizzare gradienti per creare sfondi più sofisticati.
• Esplorare l'uso di trasparenza e opacità nei colori.
• Implementare immagini di sfondo.
Utilizzo di Gradienti
I gradienti consentono di creare sfondi più complessi transizionando tra due o più colori. Ci sono due tipi principali di gradienti: lineari e radiali.
/* Gradient lineare da sinistra a destra */
.linear-gradient {
background: linear-gradient(to right, #ffcc00, #ff3300);
}
/* Gradient radiale dal centro verso l'esterno */
.radial-gradient {
background: radial-gradient(circle, #66ff66, #003366);
}
Trasparenza e Opacità
L'opacità può essere controllata utilizzando la proprietà opacity.
Un valore di 0 indica totale trasparenza, mentre 1 è completamente opaco.
.transparent-box {
background-color: #ff0000;
opacity: 0.7;
}
Immagini di Sfondo
È possibile utilizzare immagini per sfondi di elementi HTML.
La proprietà background-image definisce l'immagine di sfondo, mentre background-size regola le dimensioni.
.background-image {
background-image: url('immagine.jpg');
background-size: cover; /* Altre opzioni: contain, auto, 100% */
}
Gradienti Trasparenti
Combinando gradienti con trasparenza, è possibile ottenere effetti sofisticati.
/* Gradient trasparente dal nero al 50% */
.transparent-gradient {
background: linear-gradient(to bottom, rgba(0,0,0,0), #000000);
}
Attività Pratica
Sperimentare con gradienti lineari e radiali su elementi diversi.
Creare una sezione con immagine di sfondo.
Aggiungere trasparenza a un elemento e sperimentare con gradienti trasparenti.