Dare un colore di sfondo ai nostri elementi: una competenza utile per sfondare nel web

2022-06-05 19:36:30

Ciao a tutte e tutti voi!
Oggi vi propongo un video breve in cui scopriamo insieme un metodo che ci permette di impostare il colore di sfondo degli elementi del nostro sito web.
Un'operazione che viene fatta una miriade di volte per rendere più leggibili o visibili certi punti delle pagine web o per attirare l'attenzione e mettere in evidenza dei messaggi particolari.
Contenuto breve, quindi, ma di un'utilità che credo si protrarrà a lungo nel tempo in quanto si tratta di una competenza di base necessaria a dare ai nostri siti un aspetto professionale ed efficace nella comunicazione dei nostri propositi.
Come sempre vi ricordo che, associato al video, c'è un articolo che vi invito a leggere per completare le informazioni.
Potete farlo cliccando su vedi tutto qui sotto.
Attenzione: se sarete infastiditi dalla presenza di un quadratino nero nella prima parte del testo è un effetto voluto che serve a illustrare un concetto.
Resistete quei pochi secondi e sperimenterete qualcosa di importante sui colori di sfondo :-)
Un ringraziamento a tutte le persone che hanno sostenuto sinora questo progetto iscrivendosi al canale, invitando persone potenzialmente interessate a seguire questi contenuti, ma anche supportando questo progetto attraverso l'opzione sostieni sotto ai video o nella pagina del canale.
Ricordo che chi lo desidera può aderire all'I-Team (o iper-team): l'area riservata per tutte le persone che vorranno supportare il progetto attraverso dei piccoli contributi mensili regolari.
Lì troverete contenuti aggiuntivi, dietro le quinte e riflessioni che non si troveranno nell'area pubblicamente accessibile del canale.
Detto questo vi saluto e vi auguro una buona visione e lettura!
PS: ecco il link promesso nel video al contenuto sull'elemento div.
Condividendo si impara!

L'importanza di primo piano dello sfondo

Il colore di sfondo degli elementi del nostro sito web potrebbe apparire come un fronzolo decorativo per alcuni.

E tuttavia è importante renderci conto di come un colore di sfondo può influenzare molto la leggibilità del contenuto del nostro sito e rendere più o meno faticosa la lettura o la visione degli elementi che presentiamo ai nostri utenti.

Insomma: già leggere un testo su uno schermo è spesso stancante, se in più il colore di sfondo aumenta lo sforzo necessario il tempo di permanenza delle persone sulla nostra pagina potrebbe essere notevolmente ridotto.

Ad esempio spesso si utilizza l'espressione nero su bianco per indicare la chiarezza, la mancanza di ambiguità e la regolazione senza ambiguità delle responsabilità che derivano da un patto scritto.

Ma quando parliamo di nero su bianco visto su uno schermo luminoso ecco che l'espressione potrebbe essere meno positiva in quanto l'abbinamento di questi due colori allo stato puro, con lo 0% di luminosità del nero che si staglia sul 100% di luminosità dello sfondo bianco, provoca un notevole affaticamento degli occhi.

È per questo che il nero che vediamo di solito nel testo delle pagine web in realtà è piuttosto un grigio scuro su sfondo bianco.

Potete per esempio confrontare il colore in cui sono scritte queste righe col quadrato nero che segue per rendervi conto di come i due colori siano differenti e di come uno stressi l'occhio molto di più dell'altro se messo contro uno sfondo bianco

Visto? Probabilmente questo piccolo quadratino nero aveva già cominciato a darvi fastidio nella visione periferica ancora prima che arrivaste a questo punto della lettura. Perdonatemi, ma ho pensato di dimostrarvi la cosa mentre ve la raccontavo.

Naturalmente questo é solo un esempio e ci sono molti altri casi in cui un contrasto non corretto tra colore dell'elemento in primo piano e colore di sfondo possono ridurre notevolmente la leggibilità del nostro sito.

Allora smettiamo di mettere lo sfondo sullo sfondo dei nostri interessi e cominciamo a dargli l'importanza di primo piano che si merita!

La proprietà background-color

Il primo passo per migliorare la leggibilità dei nostri siti è quindi quello di imparare a manipolare il colore di sfondo degli elementi che abbiamo inserito nel nostro sito.

Per fare questo usiamo la proprietà background-color (colore di sfondo in inglese).

Come le altre proprietà che abbiamo conosciuto sinora il colore di sfondo si imposta selezionando l'elemento che vogliamo modificare, indicando tra parentesi graffe la proprietà che ci interessa, in questo caso background-color, e dichiarando il valore che vogliamo assegnarle dopo i due punti, in questo caso la parola chiave che indica il colore che vogliamo attribuire allo sfondo di quell'elemento.

Vedremo più in là che ci sono anche altri modi più precisi di indicare i colori che permettono di ottenere sfumature molto più personalizzabili ma per ora ci interessa piuttosto vedere come funziona la cosa in un caso semplice.

Se quindi vogliamo dare un colore di sfondo nero a un elemento div della nostra pagina dobbiamo farlo in questo modo:

<style>

div {

background-color: black;

}

</style>

Come vediamo, quindi, la struttura è molto semplice ed è sempre la stessa per l'attribuzione di tutte le proprietà agli elementi di una pagina.

Ricordiamoci quindi di background-color perché utilizzeremo tantissimo questa proprietà man manao che impariamo a costruire siti web a partire da zero!

Come contribuire allo sviluppo del nostro gruppo di studio

Se ritenete utile e interessante questo progetto potete contribuire al suo sviluppo e alla sua continuazione condividendo questo canale con chi pensate che possa essere interessato a fare questo percorso insieme a noi e imparare a creare siti web a partire da zero.

V'invito anche a valutare la possibilità di diventare finanziatori di questa spedizione nel mondo del web con un contributo a vostra scelta utilizzando gli strumenti offerti da Cam.TV, per esempio attraverso l'opzione sostieni sotto ai contenuti oppure nella pagina del canale.

Se volete potete poi entrare nell' I-Team: L'area riservata ai sostenitori periodici del canale in cui condivido dietro le quinte, contenuti e riflessioni che non sono disponibili altrove.

Approfitto dell'occasione per ringraziare di cuore tutte le persone che hanno già contribuito!

Vi ringrazio per il tempo che avete passato con me e vi auguro un iper-buona vita online e offline!

E non dimentichiamoci che condividendo si impara!!