9.1 Combinazione di funzioni di colore
Il web design richiede una comprensione più profonda e l'applicazione delle funzioni di colore per creare interfacce complesse, ma armoniose e adattive. Vediamo manipolazioni più complesse con i colori in CSS, utilizzando le funzioni rgba(), hsla(), hsl() e rgb().
Esempio 1: Creazione di un gradiente semitrasparente
Per creare gradienti complessi è possibile combinare diverse funzioni di colore.
In questo esempio si usa un gradiente lineare che combina colori semitrasparenti, impostati tramite rgba() e hsla():
<div class="gradient"></div>
.gradient {
min-height: 200px;
background: linear-gradient(
to right,
rgba(255, 0, 0, 0.8),
hsla(240, 100%, 50%, 0.7),
rgba(0, 255, 0, 0.6)
);
}
Esempio 2: Gradiente con transizione attraverso vari colori
Qui si utilizza un gradiente lineare ad un angolo di 45 gradi, che scorre dolcemente attraverso cinque colori, ognuno dei quali impostato con diverse funzioni di colore:
<div class="gradient"></div>
.gradient {
min-height: 200px;
background: linear-gradient(
45deg,
hsl(0, 100%, 50%) 0%,
rgb(255, 255, 0) 25%,
hsla(240, 100%, 50%, 0.7) 50%,
rgba(0, 255, 0, 0.6) 75%,
rgb(0, 255, 255) 100%
);
}
9.2 Creazione di ombre complesse ed effetti semitrasparenti
Esempio 3: Ombre utilizzando rgba()
In questo esempio si crea un'ombra complessa che utilizza colori semitrasparenti per creare un effetto di volume e luce:
<div class="shadow"></div>
.shadow {
min-height: 155px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
-10px -10px 20px rgba(255, 255, 255, 0.2);
}
Esempio 4: Bordi e sfondi semitrasparenti
Bordi e sfondi semitrasparenti possono essere creati utilizzando rgba() e hsla(), consentendo di creare effetti stratificati e texturizzati:
<div class="border-background"></div>
.border-background {
min-height: 200px;
border: 2px solid rgba(0, 0, 0, 0.5);
background-color: hsla(120, 100%, 50%, 0.3);
}
9.3 Animazioni e transizioni con funzioni di colore
Esempio 5: Animazione dello sfondo con hsl()
In questo esempio si utilizza un'animazione che cambia gradualmente il colore dello sfondo attraverso diverse sfumature utilizzando hsl():
<div class="animated-background"></div>
@keyframes color-change {
0% {
background-color: hsl(0, 100%, 50%);
}
50% {
background-color: hsl(120, 100%, 50%);
}
100% {
background-color: hsl(240, 100%, 50%);
}
}
.animated-background {
min-height: 200px;
animation: color-change 5s infinite;
}
Esempio 6: Transizione del colore del testo
Qui il testo cambia gradualmente colore e trasparenza al passaggio del mouse, utilizzando rgba() e la proprietà transition:
<div class="text-transition">Some text</div>
.text-transition {
min-height: 100px;
color: rgba(255, 0, 0, 1);
transition: color 2s;
}
.text-transition:hover {
color: rgba(0, 0, 255, 0.5);
}
9.4 Utilizzo delle variabili CSS
Vediamo esempi di utilizzo delle variabili CSS con le funzioni di colore.
Esempio 7: Variabili e funzioni di colore
Utilizzare variabili CSS con funzioni di colore permette di gestire i colori centralmente e di creare stili complessi, ma facili da gestire:
<div class="advanced"></div>
:root {
--primary-color: rgba(255, 0, 0, 0.8);
--secondary-color: hsl(240, 100%, 50%);
--border-color: rgba(0, 0, 0, 0.5);
}
.advanced {
min-height: 200px;
background: linear-gradient(
to right,
var(--primary-color),
var(--secondary-color)
);
border: 2px solid var(--border-color);
}
Esempio 8: Sovrapposizione di più gradienti
In questo esempio due gradienti lineari si sovrappongono l'uno all'altro, creando un effetto multilivello complesso:
<div class="multi-gradient"></div>
.multi-gradient {
min-height: 200px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5)),
linear-gradient(to bottom, hsla(240, 100%, 50%, 0.5), hsla(60, 100%, 50%, 0.5));
}
GO TO FULL VERSION