TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Tutorial sui colori CSS per principianti

2

I colori danno significato alla pagina web. La pagina apparirà semplice e noiosa senza colori diversi. Puoi utilizzare due tipi di proprietà del colore con i CSS in una pagina web. Uno è il colore di primo piano (generalmente come colore) per cambiare il colore del testo o del carattere. Il secondo è il colore di sfondo per aggiungere il colore di sfondo a diversi elementi HTML. In questo tutorial esploriamo come utilizzare le proprietà del colore CSS con vari attributi.

Modificare il colore del testo nei CSS

Facciamo un esempio di modifica del colore di un elemento di paragrafo

al rosso. Puoi farlo con la seguente definizione di stile in CSS:

p { color: red; }

Produrrà il seguente risultato sul browser:

Questo è un paragrafo di colore rosso.

Modifica dei colori di sfondo nei CSS

Puoi cambiare il colore di sfondo di qualsiasi elemento HTML usando la seguente definizione di stile CSS:

p { background-color:red;color:white; }

Produrrà il seguente risultato:

Questo è un paragrafo di colore rosso.

Nota che abbiamo usato il colore del testo bianco in modo che sia chiaramente leggibile con uno sfondo rosso.

Definire i colori nei CSS

Negli esempi sopra, abbiamo usato i colori rosso e bianco con il nome. Puoi creare milioni di colori combinando i tre colori di base rosso, blu e verde. Non è possibile ricordare il nome dei colori e inoltre la maggior parte dei colori non ha un nome effettivo. Per semplificare l’utilizzo, i CSS consentono i seguenti modi per definire il valore del colore:

  • Nomi per colori come rosso, verde o bianco
  • Usando una combinazione di valori decimali rossi, verdi e blu come rgb (20,50,200)
  • Utilizzo di valori esadecimali per rosso, verde e blu come #ffffff
  • Valore percentuale per i colori rosso, blu e verde come rgb (10%, 80%, 25%)
  • Utilizzo di tonalità, saturazione e luminosità come hsl (0,80%, 70%)
  • Aggiunta di opacità ai valori RGB come rgba(0,0,0,0,8)
  • Aggiunta di opacità ai valori HSL come hsla(200,75%90%0.6)

Utilizzo dei nomi dei colori nei CSS

Abbiamo già visto come usare il nome nelle proprietà CSS del colore e dello sfondo. Ci sono solo circa 150 nomi di colori che i browser possono identificare. Ti consigliamo di utilizzare i numeri invece dei nomi per i colori. Puoi anche controllare i codici colore per il popolare sito di social network in questo articolo.

Utilizzo dei colori RGB nei CSS

Nel metodo RGB i colori rosso, blu e verde sono indicati con i numeri decimali compresi tra 0 e 255. Ad esempio, il colore del pomodoro è indicato come rgb (255,99,71).

<div style="background-color: rgb(255,99,71);"> This text will have a tomato color background with the RGB value as rgb(255,99,71). </div>

Produrrà il seguente risultato sul browser:

Questo testo avrà uno sfondo color pomodoro con il valore RGB come rgb(255,99,71).

Puoi creare più di 16 milioni di colori variando i tre valori di colore di base. Tuttavia, assicurati di utilizzare il colore del testo corretto in modo che sia facile da leggere. L’opzione migliore è scegliere colori sicuri per il web come i colori piatti dell’interfaccia utente per il tuo sito web.

Utilizzo di valori di colore esadecimali

Il colore del pomodoro rgb(255,99,71) può essere convertito in un valore esadecimale equivalente a FF6347. Questa è una semplice conversione di 255 in FF, 99 in 63 e 71 in 47. È possibile utilizzare gli strumenti di conversione del colore per convertire tra RGB in codici esadecimali.

Puoi utilizzare valori di colore esadecimali in CSS come di seguito:

<div style="background-color: #FF6347; padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

Il "padding:15px;" è usato per aggiungere padding al contenuto del testo all’interno del

elemento. Produrrà il seguente risultato sul browser:

Questo testo avrà uno sfondo color pomodoro con il valore del codice esadecimale come #FF6347. Ricorda di usare il simbolo # davanti al valore del codice esadecimale e usa il colore del testo come #FFFFFF. Inoltre, sia il minuscolo #ff6347 che il maiuscolo #FF6347 produrranno lo stesso risultato.

Utilizzo dei valori RGB come percentuale

Invece di intervalli di numeri decimali da 0 a 255, puoi anche menzionare il valore percentuale per rosso, verde e blu.

<div style="background-color: rgb(20%,69%,74%); padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

Produrrà il seguente risultato:

Questo testo avrà uno sfondo color pomodoro con il valore del codice esadecimale come #FF6347. Ricorda di utilizzare il simbolo # davanti al valore del codice esadecimale. Anche sia il minuscolo #ff6347 che il maiuscolo #FF6347 produrranno lo stesso risultato.

Aggiungere opacità ai colori RGB

In CSS3, hai la possibilità di menzionare il valore alfa o di opacità per i colori. Il valore alfa viene aggiunto come numero decimale compreso tra 0,0 e 1,0 come quarto valore. Il valore 0 rappresenta completamente trasparente che è 0% di opacità e 1.0 indica opaco con 100% di opacità.

Di seguito è riportata la sintassi dell’utilizzo del valore alfa nel colore RGB con il 20% di opacità:

<div style="background-color: rgba(255,0,0,0.2);"> Content Here...... </div>

Mostriamo il colore rosso con il 20%, 40%, 60%, 800% e 100% di valori di opacità per renderlo più comprensibile.

Tutorial sui colori CSS per principianti

Ricorda, esiste anche una proprietà CSS separata chiamata "opacità: che può essere utilizzata anche per lo stesso scopo. Il vantaggio dell’opacità è che può essere utilizzato anche sulle immagini. Ma non è supportato da tutti i browser. Di seguito è illustrato come utilizzare separatamente la proprietà di opacità:

p { background-color: rgb(255,0,0); opacity: 0.5; }

Utilizzo dei colori HSL nei CSS

CSS3 ha un’opzione aggiuntiva per definire un colore usando il metodo HSL. HSL sta per tonalità, saturazione, luminosità e ha tre valori:

  • La tonalità è un grado indicato in una ruota dei colori con riferimenti come 0 = rosso, 120 = verde, 240 è blu.
  • La saturazione è un valore percentuale di grigio in un colore.
  • La luminosità è un valore percentuale di chiaro o scuro dove 0% è scuro (nero) e 100% è chiaro (bianco).

Di seguito è riportato un esempio di come creare uno sfondo verde con il colore HSL in CSS:

<div style="background-color: hsl(120,100%,50%,0.2);"> Content Here...... </div>

HSL con opacità

Simile a RGBA, puoi anche aggiungere opacità al colore HSL come quarto valore. L’opacità o alfa è indicata in un numero decimale compreso tra 0,0 e 1,0 dove 0,0 indica completamente trasparente e 1,0 indica opaco. Di seguito è riportato un esempio di creazione di colore verde con opacità del 50% utilizzando la dichiarazione HSLA in CSS.

<div style="background-color: hsla(120,100%,50%,0.6);"> Content Here...... </div>

Le seguenti caselle mostrano il colore verde a diversi livelli alfa:

Tutorial sui colori CSS per principianti

Esempio completo di utilizzo dei colori nei CSS

Finora abbiamo visto diversi modi per definire i colori nei CSS. Mostriamo un esempio completo della creazione di colori di primo piano e di sfondo:

<!-- This is CSS --> <style> div {background-color:tomato; padding:10px;} p {color: rgba(50,90,20,0.8);} p {color: #ffffff;} /* This will be the final paragraph color */ h1 {color: yellow;} div > h1 {color:#008754;} /* This will be the final h1 color */ h2 {background:hsla(10,20%,30%,0.8);} h2 {color:#ffffff;} em {color: #4500aa;} p > em {background-color: rgba(60,43,78,0.7); color:yellow;} </style> <!-- This is HTML --> <div> <!-- Background Tomato --> <h1>This is a H1 heading.</h1> <!-- Color #008754 --> <p>Here is a paragraph element.</p> <!-- Color #ffffff --> <h2>This is a H2 heading.</h2> <!-- Background hsla(10,20%,30%,0.8) --> <p>Here is another paragraph. <!-- Color #ffffff --> <em>This is emphasized text inside paragraph.</em> <!-- Background rgba(60,43,78,0.7) Color yellow --> </p> <em>This is emphasized text outside paragraph.</em> <!-- Color #4500aa --> </div>

Il risultato finale verrà mostrato come di seguito:

Ecco un elemento di paragrafo.

Questa è un’intestazione H2.

Ecco un altro paragrafo.
Questo è il testo enfatizzato all’interno del paragrafo.
Questo è il testo enfatizzato al di fuori del paragrafo.

  • Se definisci più colori in CSS per lo stesso elemento, l’ultima avrà la precedenza su tutte le dichiarazioni precedenti. Nell’esempio sopra, il paragrafo avrà il colore #ffffff per questo motivo.
  • Gli stili specifici avranno la precedenza sullo stile padre o generico. Il colore h1 sarà #008754 e non giallo.
  • È inoltre possibile utilizzare la proprietà abbreviata dello sfondo per definire il colore di sfondo.

Se il colore di sfondo non è menzionato, l’elemento avrà uno sfondo trasparente. Poiché i browser utilizzano lo sfondo bianco, vedrai che la maggior parte delle pagine sul Web ha uno sfondo bianco. In realtà gli elementi delle pagine sono dichiarati con sfondo bianco per garantire una corretta visualizzazione in quanto gli utenti possono cambiare il colore di sfondo del browser.

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More