Per la definizione di una tonalità di colore da applicare ai vari elementi (testo, bordo, sfondo, ecc.) CSS3 mette a disposizione diverse possibilità:
- Nome del colore, usando una delle costanti letterali come white, black, blue, red, yellow, brown, purple;
- Notazione esadecimale completa, nella forma #RRGGBB (rosso/verde/blu) dove, per esempio, il bianco è #FFFFF, il nero #000000, il rosso #FF0000, il verde #00FF00, il blu #0000FF, il giallo #FFFF00, il viola #FF00FF;
- Notazione esadecimale compatta, nella forma #RGB; rispetto alla notazione completa presuppone che le due cifre che determinano la "quantità" di ciascun colore siano uguali, per cui il bianco può essere espresso come #FFF, il nero come #000, il rosso come #F00, il verde come #0F0, il blu come #00F, il giallo come #FF0, il viola come #F0F;
- RGB con i colori espressi in base 10 anziché 16; in questo caso bianco, nero, rosso, verde, blu, giallo e viola sono definiti rispettivamente con rgb(255, 255, 255), rgb(0, 0, 0), rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255), rgb(255, 255, 0) e rgb(255, 0, 255);
- RGBA, analogo a RGB ma con la gestione della trasparenza (alpha); il valore di alpha deve essere compreso tra 0 (completamente trasparente) e 1 (completamente opaco) quindi, per esempio, il nero con trasparenza al 50% è definito come rgba(0, 0, 0, .5);
- HSL (hue, saturation, lightness) per definire il colore in modo "naturale", in base a tonalità (da 0 a 360, corrispondente all'angolo della tinta desiderata nel cerchio dell'arcobaleno dei colori), saturazione e brillantezza (entrambe espressi in percentuale); per esempio hsl(0, 100%, 50%) esprime un colore rosso con luminosità massima e saturazione al 50%;
- HSLA, analogo a HSL ma con la gestione della trasparenza con la stessa modalità descritta per RGBA; in questo caso il colore rosso d'esempio può essere reso semi-trasparente indicando: hsla(0, 100%, 50%, 0.5).
La gestione della trasparenza supportata dalle notazioni RGBA e HSLA ha effetto esclusivamente sul colore, a differenza dell'uso della proprietà opacity che consente di estendere l'effetto all'intero elemento, compresi gli eventuali figli in esso contenuti.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Ottimizzazione dei block template in Angular 17
Utilizzare Tailwind CSS all'interno di React: installazione
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Implementare l'infinite scroll con QuickGrid in Blazor Server
Usare le collection expression per inizializzare una lista di oggetti in C#
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Code scanning e advanced security con Azure DevOps
Estrarre dati randomici da una lista di oggetti in C#
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
I più letti di oggi
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Estrarre dati randomici da una lista di oggetti in C#
- Utilizzare un DataContext specifico per la modalità design time di Blend e Visual Studio nei controlli Silverlight
- Effettuare il multi-checkout in linea nelle pipeline di Azure DevOps
- Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione