Colori CSS

CSS offre varie modalità per definire i colori. I colori possono essere espressi usando nomi, valori esadecimali, RGB, RGBA e HSL.

1. Nomi dei Colori: Esistono nomi predefiniti per alcuni colori in CSS, come red, blue, green, black, e white. Questo metodo è semplice, ma limitato ai colori standard.

2. Valori Esadecimali: Un colore in esadecimale viene espresso con un simbolo # seguito da sei cifre che rappresentano i valori di rosso, verde e blu (ad esempio, #FF5733 per un arancione acceso). I primi due caratteri indicano il rosso, i successivi due il verde e gli ultimi due il blu. Ogni coppia di cifre va da 00 a FF, dove 00 è il minimo e FF il massimo.

3. RGB (Red, Green, Blue): La notazione RGB permette di definire i colori specificando i valori di rosso, verde e blu in un intervallo da 0 a 255. Per esempio, rgb(255, 87, 51) corrisponde a un arancione simile a #FF5733.

4. RGBA: È una variante di RGB che aggiunge un valore di opacità (alpha) con un intervallo da 0 (completamente trasparente) a 1 (completamente opaco). Esempio: rgba(255, 87, 51, 0.5) crea un colore arancione con trasparenza al 50%.

5. HSL (Hue, Saturation, Lightness): In questa notazione, il colore è definito tramite tonalità (hue), saturazione e luminosità. La tonalità è un angolo in gradi (0-360°) su una ruota dei colori, mentre saturazione e luminosità sono percentuali. Per esempio, hsl(16, 100%, 60%) definisce un colore arancione.

6. HSLA: Simile a HSL ma aggiunge un canale alpha per la trasparenza, come per RGBA. Esempio: hsla(16, 100%, 60%, 0.5) crea un colore arancione semi-trasparente.

Immagini di Sfondo e Proprietà Correlate

CSS offre molte proprietà per gestire gli sfondi delle pagine o degli elementi. Le principali proprietà per lavorare con gli sfondi sono background-color, background-image, background-size, background-position e background-repeat.

1. background-color: Imposta il colore di sfondo di un elemento. Può essere definito con qualsiasi metodo colore visto sopra (es. background-color: #FF5733 o background-color: rgba(255, 87, 51, 0.5)).

2. background-image: Permette di impostare un’immagine di sfondo. È comune definire il percorso dell’immagine come URL. Esempio: background-image: url('path/to/image.jpg');. Supporta anche gradienti lineari o radiali come immagini di sfondo, ad esempio, background-image: linear-gradient(to right, #FF5733, #33FF57);.

3. background-size: Definisce la dimensione dell’immagine di sfondo. I valori più comuni sono:
   • cover: adatta l’immagine per coprire completamente l’elemento.
   • contain: adatta l’immagine in modo che rientri completamente all’interno dell’elemento.
   • Valori specifici in pixel o percentuale, ad esempio background-size: 50% 100%.

4. background-position: Determina la posizione dell’immagine di sfondo all’interno dell’elemento. Può essere espresso in parole chiave (come top, center, bottom, left, right), percentuali (es. background-position: 50% 50% per centrare l’immagine) o valori specifici in pixel.

5. background-repeat: Indica se e come ripetere un’immagine di sfondo. I principali valori sono:
   • repeat: ripete l’immagine sia orizzontalmente che verticalmente.
   • repeat-x: ripete solo orizzontalmente.
   • repeat-y: ripete solo verticalmente.
   • no-repeat: l’immagine viene visualizzata solo una volta, senza ripetizioni.

Proprietà Composta background

CSS consente di usare la proprietà background come scorciatoia per combinare tutte le proprietà sopra citate in una singola dichiarazione. Ad esempio:

1
background: url('path/to/image.jpg') no-repeat center/cover #FF5733;

In questo esempio:

• L’immagine è centrata (center).
• È impostata a coprire tutto l’elemento (cover).
• Non si ripete (no-repeat).
• È presente un colore di sfondo alternativo (#FF5733) che verrà mostrato se l’immagine non viene caricata.

Queste proprietà consentono un controllo dettagliato sia sui colori che sugli sfondi, rendendo gli elementi e le pagine più dinamici e visualmente accattivanti.

Tipografia CSS